Vue项目中添加百度统计

简介

统计页面打开等事件
对某些关键事件做埋点,统计关键事件的点击率等

这里假设已经注册好百度统计相关账号,做好相关配置了

步骤

引入

  • 修改index.html文件,添加百度统计代码
// 百度统计 var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();

备注

  • 如果做了多环境,建议只给开发环境配置百度统计
  • 引入后,就会自动页面跟踪统计
  • vue-cli脚手架搭建的SPA项目,切换页面是通过vue-router切换的。切换时不会自动页面跟踪,需要手动加一下

SPA项目页面统计

  • src/utils/目录下新建文件behavior.js文件,我们把统计相关代码写在这个文件里面
// src/utils/behavior.js /* 百度统计-页面切换 */ export function trackPageView(url) { if (!url) { return } window._hmt.push(['_trackPageview', url]) }
  • 修改src/router/index.js文件,每个页面切换之前,发送统计
import { trackPageView } from '../utils/behavior' // ... router.beforeEach((to, from, next) => { trackPageView(window.location.pathname + '#' + to.fullPath) next() }) // ...
  • 打开的第一个页面,会发送两次统计,我们屏蔽掉百度的自动统计。修改index.html文件,添加代码_hmt.push(['_setAutoPageview', false]);
// 百度统计 var _hmt = _hmt || []; _hmt.push(['_setAutoPageview', false]); (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();

埋点事件

  • 修改src/utils/behavior.js文件,添加埋点方法
// ... /** * 百度统计-页面中的用户行为 * index.html模板文件中需要先预定于 var _hmt = _hmt || []; */ export function behavior(action, label, value) { if (value === undefined) { window._hmt.push(['_trackEvent', 'category', action, label]) } else { window._hmt.push(['_trackEvent', 'category', action, label, value]) } }
  • 修改src/main.js文件,挂载到vue的原型上去
// ... import { behavior } from './utils/behavior' // ... Vue.prototype.$behavior = behavior // ...
  • 组件中使用
this.$behavior('漫画章节点击数', this.chapter.title, '+1')

插件

vue-ba提供了百度统计的封装。

使用教程见:


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: