项目中使用百度统计和友盟统计

因项目需要，需要在项目中添加百度统计或友盟统计；项目是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和数据请求的监测；后期还会监测页面事件，待续。。。。

 

转载于:https://www.cnblogs.com/wangtaolearning/p/11295258.html