【项目经验分享】百度统计

我终于进来大厂，成为了美团下面的一名光荣骑手

新的需求下来，关键字“百度统计”
下面是百度统计的官网链接：https://tongji.baidu.com/web/welcome/login

百度统计有什么用

下面一段copy

---

copy:begin
百度统计:是百度推出的一款专业网站流量分析工具，能够告诉您访客是如何找到并浏览您的网站，以及如何改善访客在您网站上的使用体验，帮助您让更多的访客成为客户，不断提升网站的投资回报率。

百度统计:提供了几十种图形化报告，全程跟踪访客的行为路径，并且帮助监控各种[网络媒介]推广效果，让您及时了解哪些关键词、哪些创意的效果最好。同时，百度统计集成[百度推广]数据，帮助您及时了解[百度推广]效果并优化推广方案。

基于百度强大的技术实力，百度统计提供了丰富的数据指标，系统稳定，功能强大但操作简易。登陆系统后按照系统说明完成代码添加，百度统计便可马上收集数据，为您提高投资回报率提供决策依据。
copy:end

---

第一步注册账户

得到他们给你的token

第二部在html中加入这个代码

var _hmt = _hmt || [];
        window._hmt = _hmt;
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?你的token";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

这段代码其实就是在你的html中加入script标签

image.png

百度统计原理

知乎大神文章推荐查看
https://zhuanlan.zhihu.com/p/35844509

简单概括就是
每次运行上面js代码,就会发起请求，传递数据到百度的统计系统，然后百度统计数据
效果如下：

image.png

传递的参数

image.png

也就是如果你对界面请求了这个，就说明使用成功了

问题，如果我用的是前端路由 history hash模式？

也就是百度提供的代码只在html第一次加载的时候运行一次而已，这就尴尬了
于是百度官网提供的方案是：
https://tongji.baidu.com/open/api/more?p=guide_trackPageview

在每次前端hostory.push的时候，调用下面的方法

window._hmt.push(['_trackPageview', pageURL]);

你唯一要解决的问题是监听router的改变
我用的是react
使用过的方法如下

 this.props.history.listen((location, action) => {
            // location is an object like window.location
            // console.log(action, location.pathname, location.state)
            // debugger
            window._hmt.push(['_trackPageview',  location.pathname]);
        });

ok,点击切换界面，查看

image.png

网站请求hm.gif，完美

end