前端H5 使用百度统计进行埋点

1、申请百度统计账号:
包括申请账号、填写网站域名、首页地址等等;(百度统计文档非常全面)
2、获取代码和安装代码:
当你注册完账号填写完地址以后,百度统计会给你一段代码:类似于这种的

    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?122222dfsd1fr4fgdfs1f44sd4f4sf4";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script> 

将这段代码放到你要监听的页面的<header>里面,添加完成以后,检查一下有没有添加成功;
3、添加事件监控:
_hmt.push([‘_trackEvent’, category, action, opt_label,opt_value]);

category: 要监控的目标的类型名称,通常是同一组目标的名字,比如”视频”、”音乐”、”软件”、”游戏”等等。该项必选。
action: 用户跟目标交互的行为,如”播放”、”暂停”、”下载”等等。该项必选。
opt_label: 事件的一些额外信息,通常可以是歌曲的名称、软件的名称、链接的名称等等。该项可选。
opt_value: 事件的一些数值信息,比如权重、时长、价格等等,在报表中可以看到其平均值等数据。该项可选。
4、查看监听结果:
在这里插入图片描述
5、事件监听以后,一般会在半个小时之后可以监听到,可以在百度统计进行查看。
6、发现的坑:监听页面跳转的时候,会被打断。。。
在这里插入图片描述

参考文档:百度统计官方文档
推荐一个总结很详细的博客:https://blog.youkuaiyun.com/zwq912318834/article/details/78748709

<think>我们参考了多个引用,其中引用[1]提到uniapp+vue自定义埋点数据收集和提交,引用[3]介绍了基于uniapp做按钮埋点功能的处理(使用自定义指令),引用[5]提到了uniapp-h5实现埋点功能(友盟)。根据用户需求,他们希望使用uniapp和vue2在纯前端实现用户行为埋点,所以我们主要结合自定义埋点和第三方埋点工具(如友盟)的方法来回答。 实现用户行为埋点的方法通常有两种: 1. 自定义埋点:自己编写代码收集数据,然后发送到自己的后端。 2. 使用第三方埋点工具:如友盟、百度统计等,按照他们的SDK接入。 用户要求纯前端实现,所以两种方法都可以在前端完成。 下面我们将分别介绍这两种方法,并给出代码示例。 一、自定义埋点(无第三方依赖) 我们可以通过Vue自定义指令来拦截事件(如点击事件)实现按钮埋点,也可以监听页面生命周期收集PV/UV。 步骤: 1. 创建自定义指令用于按钮点击埋点(参考引用[3]的做法) 2. 在页面生命周期中收集PV/UV数据(如onShow,onHide等) 3. 将收集的数据存储在本地(如sessionStorage)并达到一定量后发送到后端(避免频繁请求) 示例代码(main.js中): ```javascript // 自定义指令v-track,用于元素点击埋点 Vue.directive('track', { bind(el, binding) { // 获取需要收集的数据,可以通过binding.value传递额外参数 el.addEventListener('click', () => { const eventData = { type: 'click', element: el.tagName, id: el.id || '', classList: Array.from(el.classList), text: el.innerText || '', timestamp: Date.now(), ...binding.value // 这里可以传入自定义参数,如事件名等 }; // 将事件数据存储 saveTrackData(eventData); }); } }); // 存储埋点数据,并检查是否达到发送条件 function saveTrackData(data) { let trackData = JSON.parse(sessionStorage.getItem('track_data') || '[]'); trackData.push(data); sessionStorage.setItem('track_data', JSON.stringify(trackData)); // 达到一定数量(比如50条)就发送 if (trackData.length >= 50) { sendTrackData(trackData); // 清空已发送的数据 trackData = []; sessionStorage.setItem('track_data', JSON.stringify(trackData)); } } // 发送数据到后端 function sendTrackData(data) { // 这里用uni.request发送数据,示例中省略了具体URL uni.request({ url: 'https://your-api.com/track', method: 'POST', data: data, success: () => { console.log('埋点数据发送成功'); }, fail: (err) => { console.error('埋点数据发送失败', err); // 如果发送失败,可以选择将数据重新放回存储,等待下次发送 let trackData = JSON.parse(sessionStorage.getItem('track_data') || '[]'); trackData = data.concat(trackData); // 将本次发送失败的数据放回 sessionStorage.setItem('track_data', JSON.stringify(trackData)); } }); } // 监听页面生命周期,收集PV/UV // 在uniapp中,可以在App.vue的onShow和onHide中处理 // 注意:每个页面的PV可以通过页面onShow来收集,但需要避免重复计数(如页面跳转) // 这里我们在App.vue中统一处理(也可以在每个页面单独处理) ``` 在App.vue中: ```javascript export default { onShow() { // 记录一次应用启动或从后台进入前台 const pvData = { type: 'app_show', timestamp: Date.now() }; saveTrackData(pvData); }, onHide() { // 记录一次应用进入后台 const pvData = { type: 'app_hide', timestamp: Date.now() }; saveTrackData(pvData); } } ``` 二、使用第三方埋点工具(如友盟) 引用[2]和[5]介绍了友盟的接入方法,引用[4]介绍了百度统计。这里以友盟为例。 步骤: 1. 注册友盟账号并创建应用,获取appkey。 2. 下载对应的SDK(根据不同平台条件编译)。 3. 在main.js中引入并初始化。 示例代码(main.js): ```javascript // 条件编译引入不同平台的友盟SDK // #ifdef MP-TOUTIAO import uma from './tools/umtrack-tt/uma.min.js' uma.init({ appKey: 'xxx', // 替换为你的appKey autoGetOpenid: false, debug: false, uploadUserInfo: true }) // #endif // #ifdef MP-BAIDU import uma from './tools/umtrack-swan/uma.min.js' uma.init({ appKey: 'xxxx', autoGetOpenid: false, debug: false, uploadUserInfo: true }) // #endif // #ifdef H5 // 对于H5,引用[5]的方式 const { aplus_queue } = window; aplus_queue.push({ action: 'aplus.sendPV', arguments: [{ is_auto: false }] }); // #endif // 将uma挂载到Vue原型上,方便使用 uma.install = function(Vue) { Vue.prototype.$uma = uma; } Vue.use(uma); ``` 然后,在需要埋点的地方调用相应方法。例如: - 记录事件:this.$uma.trackEvent('事件名', {参数}) - 记录PV:this.$uma.trackPageView() 在页面切换时,可以在页面的onShow方法中调用PV记录。 三、混合使用 也可以结合两种方式,比如自定义指令内部调用友盟的方法: ```javascript Vue.directive('track', { bind(el, binding) { el.addEventListener('click', () => { // 自定义收集的数据 const eventData = { ... }; // 同时调用友盟 if (this.$uma) { this.$uma.trackEvent('click', eventData); } }); } }); ``` 注意事项: 1. 数据存储和发送要处理好网络异常和本地存储限制。 2. 避免频繁发送请求,可以设置定时发送(比如每30秒)或者定量发送(比如每次50条)。 3. 注意用户隐私,收集数据前需要获得用户同意(如GDPR要求)。 用户可以根据需求选择自定义埋点还是使用第三方工具。自定义埋点更灵活,但需要自己实现数据收集、存储和发送;第三方工具省事,但可能受限于平台。 最后,提供示例中省略了部分细节(如不同平台的条件编译、具体发送逻辑等),实际开发中需要根据项目情况调整。 §§相关问题§§ 1. 在uniapp中如何实现自定义埋点的数据存储和发送优化? 2. 如何在使用友盟埋点时处理不同平台的条件编译? 3. 在自定义埋点中,如何准确收集页面停留时长? </think>基于提供的引用内容,以下是使用 UniApp + Vue2 在纯前端实现用户行为埋点的完整方案,结合自定义埋点和第三方工具集成两种方式: ### 一、自定义埋点方案(推荐) 通过 Vue 自定义指令实现无依赖的按钮级埋点: ```javascript // main.js let trackData = []; const TRIGGER_COUNT = 50; // 触发发送的阈值 Vue.directive('track', { bind(el, binding) { el.addEventListener('click', () => { const eventData = { eventType: 'click', element: binding.value || el.id, // 允许自定义事件名或使用元素ID timestamp: new Date().toISOString(), page: this.$route?.path || 'unknown', // 页面路径 extra: binding.modifiers // 支持修饰符传递额外参数 }; trackData.push(eventData); sessionStorage.setItem('track_data', JSON.stringify(trackData)); if (trackData.length >= TRIGGER_COUNT) { sendTrackData(); // 达到阈值发送 } }); } }); function sendTrackData() { uni.request({ url: 'https://your-api-endpoint.com/track', method: 'POST', data: trackData, success: () => { trackData = []; sessionStorage.removeItem('track_data'); }, fail: (err) => { console.error('埋点发送失败:', err); // 失败重试逻辑可在此实现 } }); } // 定时发送(每30秒检查一次) setInterval(() => { if (trackData.length > 0) sendTrackData(); }, 30000); ``` **使用示例**: ```vue <template> <button v-track:login>登录</button> <!-- 自定义事件名 --> <button v-track.search>搜索按钮</button> <!-- 带修饰符 --> <button v-track>普通按钮</button> <!-- 默认使用元素ID --> </template> ``` ### 二、第三方工具集成方案 #### 1. 友盟埋点集成(全端支持) ```javascript // main.js // 条件编译(不同平台) // #ifdef MP-TOUTIAO import uma from '@/sdk/umtrack-tt.min.js' // #endif // #ifdef H5 const { aplus_queue } = window; aplus_queue.push({ action: 'aplus.sendPV', arguments: [{ is_auto: false }] }); // #endif uma.init({ appKey: 'YOUR_APP_KEY', autoGetOpenid: false, debug: process.env.NODE_ENV === 'development' }); // 挂载到Vue原型 Vue.prototype.$uma = uma; ``` **事件触发示例**: ```vue <script> export default { methods: { handlePurchase() { this.$uma.trackEvent('purchase', { product_id: 'p123', amount: 99.9 }); } } } </script> ``` #### 2. 百度统计集成(H5专用) ```html <!-- public/index.html --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?YOUR_TOKEN"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> ``` ### 三、关键实现策略 1. **PV/UV统计** ```javascript // App.vue export default { onLaunch() { this.$uma?.trackPageView(); // 友盟 _hmt?.push(['_trackPageview', '/']); // 百度 }, onShow() { recordCustomEvent('APP_ACTIVE'); // 自定义记录 } } ``` 2. **数据持久化** - 使用 `sessionStorage` 临时存储埋点数据 - 实现 **双保险机制**:定量触发(50条) + 定时触发(30秒) - 失败重传:发送失败时保留数据下次重试 3. **跨平台处理** ```javascript // 统一封装埋点方法 export function trackEvent(event, params) { // #ifdef H5 _hmt?.push(['_trackEvent', event, JSON.stringify(params)]); // #endif // #ifdef MP-WEIXIN this.$uma?.trackEvent(event, params); // #endif // 自定义记录 trackData.push({ event, ...params }); } ``` ### 四、最佳实践建议 1. **埋点分类规范**: - 行为事件:`v-track:search` - 页面事件:`onPageShow` - 错误监控:`uni.onError` 2. **性能优化**: ```javascript // 使用requestIdleCallback发送非关键埋点 window.requestIdleCallback?.( () => sendTrackData(), { timeout: 2000 } ); ``` 3. **隐私合规**: ```vue <button v-if="consentGranted" v-track>...</button> ``` > 自定义方案更适合深度行为分析,第三方工具适合快速接入。建议使用 **分层策略**:关键业务事件用自定义埋点,通用分析用友盟/百度。[^1][^3][^5]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值