友盟工作台地址:workbench.umeng.com/#
1、创建应用H5应用:
注册成功获得appkey
2、Umeng SDK配置
在App.vue中的beforeCreate()函数中
(function(w, d, s, q, i) {
w[q] = w[q] || [];
var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
j.async = true;
j.id = 'beacon-aplus';
j.src = 'https://d.alicdn.com/alilog/mlog/aplus/' + i + '.js';
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'aplus_queue', '203467608');
//集成应用的appKey
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['appKey', '申请的Appkey']
});
/************************以下内容为可选配置内容****************************/
//sdk提供手动pv发送机制,启用手动pv(即关闭自动pv),需设置aplus-waiting=MAN;
//注意:由于单页面路由改变时不会刷新页面,无法自动发送pv,所以对于单页应用,强烈建议您关闭自动PV, 手动控制PV事件
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-waiting', 'MAN']
});
//是否开启调试模式
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['DEBUG', true]
});
//是否指定用作计算umid的id类型,默认为cnaid,目前支持:
//1. 微信和QQ: openid; 字节和百度 anonymousid; 支付宝 alipay_id
//2. 微信、QQ、字节、百度平台的 unionid
//3. 业务方自己生成的随机id uuid
// aplus_queue.push({
// action: 'aplus.setMetaInfo',
// arguments: ['aplus-idtype', 'openid'] //取值参考见附表1
// });
// 关闭自动PV
aplus_queue.push({
action: 'aplus.sendPV',
arguments: [{
is_auto: false
}]
});
/******************************************************************/
在公众号H5中关闭PV自动上报
aplus_queue.push({
action: 'aplus.sendPV',
arguments: [{
is_auto: false
}]
});
不需要设置
// aplus_queue.push({
// action: 'aplus.setMetaInfo',
// arguments: ['aplus-idtype', 'openid'] //取值参考见附表1
// });
最初集成时加入了此方法,上报数据一直在UMeng平台无法查看,经过与客服沟通
建议删除,删除以后数据就上报成功!
3、自定义事件上报:
在UMeng平台创建自定义事件-事件管理
批量导入:
导入模板:模板规则(事件字段名,事件名)一行一个事件
Um_Event_PageView, 页面浏览
Um_Event_ModularClick, 功能按钮点击
api调用:
在使用api时从window对象获取aplus_queue
const { aplus_queue } = window;
调用api上报自定义事件:
aplus_queue.push({
action: 'aplus.record',
arguments: [eventId, 'CLK', data]
});
简单封装:
const {
aplus_queue
} = window;
const EVENT_ID = {
PAGE_VIEW: 'Um_Event_PageView', //页面浏览
MODULAR_CLICK: 'Um_Event_ModularClick', //功能按钮点击
BOTTOM_NAVI_CLICK: 'Um_Event_BottomNaviClick', //下导航点击
LOGIN_SUC_CLICK: 'Um_Event_LoginSuc', //登录成功
}
const trackEvent=(eventId,data)=>{
// #ifdef H5
aplus_queue.push({
action: 'aplus.record',
arguments: [eventId, 'CLK', data]
});
// #endif
}
module.exports={
trackEvent
}
api调用:
TrackEventRecord.trackEvent('Um_Event_PageView',{
"参数名","参数"
})
在微信开发者工具中就可以看到UMeng统计上报的web_logs请求!