【Vue】16.vue项目里引入百度统计

阳光穿透心脏的1/2处 2022-03-22 09:24 353阅读 0赞

参考官网：[百度统计开放平台][Link 1] [百度统计][Link 2]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 2][]

但是在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分钟以后，如果有人访问网站的话，百度统计里面就能看到统计结果了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 4][]

[Link 1]: http://tongji.baidu.com/open/api/more?p=guide_trackEvent
[Link 2]: https://tongji.baidu.com/web/homepage/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70]: /images/20220322/a00d39f16b5e4e00ab5929af353b785e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 1]: /images/20220322/955b77755f004aff88784f628b3b0acc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 2]: /images/20220322/15fe06e6a464415682903a51cd376c8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 3]: /images/20220322/f67e51b2370c463a90898d5d056a9841.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 4]: /images/20220322/f5a2003e0133459c9e4d348e2e9f675c.png