vue 中使用百度统计 - sjpqy

Z时代
2024-01-10
分类：综合

vue

vue 中使用百度统计

百度统计一个免费的统计平台，使用的时候只需要申请下账号即可

官网地址：https://tongji.baidu.com/

一、添加需要统计的网址

二、添加完之后，点击获取代码，可以看到一段js代码

三、每个网址都会对应一个唯一的id，这个不能更换，将此代码复制到 vue 的 index.html 中，不出意外等待一天就能看到效果

四、遇到的问题

　　1. 在index.html 页面中写的代码，只有在第一次进入的时候会触发，切换路由不会触发，导致统计不准确

　　2. 无法统计到点击事件。在官网热力图中无法显示

　　解决办法：

　　在main.js中添加以下代码

router.afterEach((to, from) => {
  // 每次进入路由都会触发
  if (window._hmt) {
    if (to.path) {
      window._hmt.push([\'_setAutoPageview\', false]);
      window._hmt.push([\'_trackPageview\', \'/template/displayTemplate/dist/index.html#\' + to.fullPath]); // 如果不是根路径，需要指定第二个参数的路径
    }
  }
});
Vue.mixin({
  beforeCreate () {
    const options = this.$options;
    this.$hm = options.parent && options.parent.$hm
      ? options.parent.$hm
      : (function (window) {
        if (!window._hmt) {
          return;
        }
        return Object.assign({}, window._hmt, { // 统计页面的点击事件
          click: (category, val) => {
            const userInfo = store.getters.userInfo || {};
            return window._hmt.push([
              \'_trackEvent\',
              category,
              \'click\',
              userInfo.loginName || \'notLogin\',
              val
            ]);
          }
        });
      })(window);
  }
});