参考官网:百度统计开放平台 百度统计

最近往项目里面引入百度统计,也是在网上查了各种资料,把百度统计的官网api又好好的看了一下,顺着文档的步骤,一步一步走下来,其实还蛮简单的,首先先在百度统计注册一个账号,在管理页面填写好自己要监控的网站域名,网站的首页,填写完成以后,会自动生成一段代码,如下图所示,我这里已经填写过了,点击获取代码,就可以取到百度自动生成的代码。

但是在vue单页面开发中接入百度统计代码时,不能把这一段代码按照官网说的放到index.html的head标签里,因为vue是单页面路由切换的,这样的话就只能统计到一次,其他页面的切换就会统计不到,所以就把这一段代码加到入口文件main.js里面,把_hmt变量挂载到window下,这样_hmt就成了全局变量,就可以在任何地方访问了,要不然就会报_hmt变量找不到的错。

1.在main.js下百度统计代码添加

// eslint-disable-next-line
const _hmt = _hmt || [];
// eslint-disable-next-line
window._hmt = _hmt; // 必须把_hmt挂载到window下,否则找不到
(function () {
  const hm = document.createElement('script');
  hm.src = 'https://hm.baidu.com/hm.js?6f2212ee8e3fd2f83702bd023606f48e';
  const s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(hm, s);
}());

这里要注意一下,如果安装的有ESLint代码校验的话,_hmt变量上面要加 // eslint-disable-next-line 让ESLint不检测这一行代码,因为现在的变量命名是不建议有_的,所以ESLint认为是不符合语法的,就一直报错,因为这个变量是百度的,里面的api都是通过这个变量调用的,我们不能更改,所以只能不让ESLint校验这个变量。

2.创建vueRouter后,调用beforeEach方法,每个路由跳转时都将其跳转的路由推给百度

router.beforeEach((to, from, next) => {
  // eslint-disable-next-line
  if (_hmt) {
    if (to.path) {
      // eslint-disable-next-line
      _hmt.push(['_trackPageview', to.fullPath]);
    }
  }
  next();
});

这里因为我的路由mode是history,所以 _hmt.push(['_trackPageview', to.fullPath]),但是如果是hash的话,后面的路径要修改一下,改成

_hmt.push(['_trackPageview', '/#' + to.fullPath]);

这是监控页面的pv统计,如果想监控哪一个按钮点击的次数,就可以直接在按钮事件下调用百度api的事件方法,比如我的这个复制小程序昵称的方法,就可以统计到这个按钮点击的次数,也就是小程序昵称被复制的次数

      copyToBoard() {
        // eslint-disable-next-line
        _hmt.push(['_trackEvent', 'copy', 'copy', '复制小程序昵称', 10]);
        this.$copyText(this.message).then((e) => {
          console.log(this.message);
          console.log(e);
          this.$createToast({
            txt: '小程序昵称已复制',
            type: 'txt',
            time: 3000,
          }).show();
        }, (e) => {
          console.log(e);
        });
      },

运行代码大概20分钟以后,如果有人访问网站的话,百度统计里面就能看到统计结果了

 

Logo

前往低代码交流专区

更多推荐