項目中使用百度統計和友盟統計

因項目需要，需要在項目中添加百度統計或友盟統計；項目是vue單頁應用項目，

最開始是用的百度統計：

1、在index頁面head里面加入（這個應該也可以不需要，主要第二部動態加入）：

<script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
                hm.id = "baidu_tj";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script> 

2、在main.js 中寫入router.afterEach(function(to,from){}),路由守衛；

在守衛中寫入百度統計代碼：

    //百度統計；
    setTimeout(() => {
        var _hmt = _hmt || [];
        (function() {
            //每次執行前，先移除上次插入的代碼
            document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
            hm.id = "baidu_tj"
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
        // console.log(to.fullPath);
        _hmt.push(['_trackPageview','/#'+to.fullPath]);
        
    }, 0);

上面這種是動態的加入百度統計代碼，因為單頁應用的head在首次加載完畢之后，就不會再執行了，內部的具體執行機制我也不是很清楚，希望知道老鐵們給我一些指導提示；

然后在其他的地方，比如請求攔截器的地方：

_hmt.push(['_trackPageview',config.url]);

而后換成友盟統計：

1、在index頁面：

<div style="display: none;">
            <script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=XXXXXXXX&web_id=XXXXXXXX"></script>
        </div>
        <script>
            _czc.push(["_setAutoPageview", false]);
        </script>

搞笑的是上面的一條js引入會生成四個字：“站長統計”，所以用了個div包裹起來並隱藏；

如果使用_trackPageview改寫了已有頁面的URL，那么建議您在CNZZ的JS統計代碼執行前先調用_setAutoPageview，將該頁面的自動PV統計關閉，防止頁面的流量被統計雙倍。

 

2、在main.js 中的路由守衛中：

if (window._czc) {
          // window._czc.push(["_setAutoPageview", false]);
          let location = window.location;//路由變化
          let contentUrl = "/#" + to.fullPath;//自定義當前url，可帶上路由以此區分每個頁面
          let refererUrl = location.protocol + "//" + location.host + "/#" + from.fullPath;
          window._czc.push(["_setAutoPageview", false]);
          window._czc.push(["_trackPageview", contentUrl, refererUrl])
        }

3、在請求的攔截中：

if (window._czc) {
          // window._czc.push(["_setAutoPageview", false]);
          let location = window.location;//路由變化
          // let contentUrl = location.pathname + location.hash;//自定義當前url，可帶上路由以此區分每個頁面
          // console.log(config);
          let contentUrl;
          if(config.params){
            let keys = Object.keys(config.params);
            let strArr = [];
            for(var i=0;i<keys.length;i++){
                strArr.push(keys[i]+"="+config.params[keys[i]]);
            };
            let str = strArr.join("&");
            contentUrl = config.url+"?"+str;
          }else{
              contentUrl = config.url;
          }
          let refererUrl = location.href;
          window._czc.push(["_setAutoPageview", false]);
          window._czc.push(["_trackPageview", contentUrl, refererUrl])
    }

以上，目前使用的也都是對pv和數據請求的監測；后期還會監測頁面事件，待續。。。。