第一步:创建应用
第二步:接入SDK
第三步:代码埋点
1. App.vue
beforeCreate() {
console.log(process.env.NODE_ENV, 'process.env.NODE_ENV...............');
(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',
process.env.NODE_ENV === 'development'
? '6333a6d988ccdf4b7e3b6966'
: '6335470c88ccdf4b7e3d89df'
]
});
/************************以下内容为可选配置内容****************************/
//sdk提供手动pv发送机制,启用手动pv(即关闭自动pv),需设置aplus-waiting=MAN;
//注意:由于单页面路由改变时不会刷新页面,无法自动发送pv,所以对于单页应用,强烈建议您关闭自动PV, 手动控制PV事件的发送时机N": N取值为300-3000之间的整数值 , 所有日志指令在SDK初始化完成后的N毫秒内将被hold在指令队列, 直至N毫秒等待结束;"MAN": 取消自动化PV日志采集. 设置为MAN之后, 所有PV日志均需手动触发, 但其他类型的事件日志不受影响
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-waiting', 'MAN']
});
/******************************************************************/
}
2. main.js
router.afterEach((to, from) => {
const { userId = '' } = JSON.parse(sessionStorage.getItem('userInfo')) || {}
console.log(userId, '时时出发');
if (!userId) return
// PV曝光
const { aplus_queue } = window;
aplus_queue.push({
action: 'aplus.sendPV',
arguments: [{
is_auto: false
},
{ page_path: to.path, user_id: userId }
]
});
aplus_queue.push({
action: 'aplus.record',
arguments: ['enterPage_custom', 'CLK', { page_path: to.path, user_id: userId }]
});
})
到此埋点完成!
自定义事件
第一步:创建自定义事件方案
第二步:代码埋点(根据情况而定)
例:自定义登录成功事件
const { aplus_queue } = window;
aplus_queue.push({
action: 'aplus.record',
arguments: [
'Um_Event_LoginSuc',
'CLK',
{
Um_Key_LoginType: opNode == '1' ? '密码' : '短信',
Um_Key_UserID: userId
}
]
});