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

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

步骤

引入

修改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’)
  1

插件

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