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);
  }
});

　　3. 如何添加二級域名統計

 

 在添加子目錄中，注意仔細閱讀規則，其實子目錄就是從主目錄中過濾出來，如果配置不正確，將無法看到數據