步骤如下:
- 注册账号 H5的埋点位于【U-Mini】下,新建测试应用后,如下图:
主要用到的是appkey
- 在【价值转化】-【自定义事件】中,添加需要的埋点事件
- 前端是vue框架,在index.html中加入官方文档的代码
<head>
<script>
(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', 'xxxxxxx']
});
/* 如果使用的是单页面应用,例如:React、Vue、Angular等,则需要添加下面的代码 */
/* 关闭自动PV发送,如果不是单页面应用,请删掉下方代码 */
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-waiting', 'MAN']
});
//是否开启调试模式
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['DEBUG', true]
});
</script>
</head>
vue是单页面应用,需要关闭自动PV发送 在main.ts的app.mount('#app')之前,加入路由相关代码:
// 💡 页面访问埋点逻辑放在这里
router.afterEach((to, from) => {
// 避免首次加载页面多次触发,可以做防抖/限频
if (window.aplus && typeof window.aplus.sendPV === 'function') {
window.aplus.sendPV({
is_auto: false, // 禁用 SDK 自动上报(你已经手动控制)
page_url: window.location.href,
page_title: document.title,
});
}
});
封装一个单独的youmeng.ts类,如下:
declare global {
interface Window { aplus_queue: any }
}
// 手动点击
export const trackEvent = (eventName: string, params: Record<string, string | number>) => {
const { aplus_queue } = window as any;
aplus_queue.push({
action: 'aplus.record',
arguments: [
eventName, // 事件ID (需在后台预先创建)
'CLK', // 固定事件类型
{ // 平铺参数 (禁止嵌套!)
...params
}
]
});
}
// 手动曝光
export const trackExposure = (items: Record<string, string>) => {
const { aplus_queue } = window as any;
aplus_queue.push({
action: 'aplus.record',
arguments: [
'$$_exposure', // 固定事件ID
'EXP', // 曝光类型
{ // 平铺参数
...items
}
]
});
}
具体的vue页面内调用如下:
import { trackEvent, trackExposure } from '@/umeng';
trackEvent('click_submit', { form: '123123' });
上面
click_submit对应你在后台创建的自定义事件key{ form: '123123' }对应你需要收集的埋点信息,可以自定义