前台 SPA 单页应用数据统计处理方案 (ReactJS / VueJS)

一、百度统计的代码： UV PV 统计方式可能存在问题

在 SPA 的前台项目中 数据统计，往往就是一个比较麻烦的事情，React 和 Vue 也是一样。

在 发现问题之前，我们得来思考下 百度统计的 统计原理 是什么？

1-1: 百度统计代码

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

通过 JSONP 加载了一个 百度统计的 JS 文件，这个 JS 文件，相对还是比较大的

粗略的看了一 hm.js 的 源码文件， 获取本地的 cookie、session、url、ua 等而后还有少量解决数据的方法和 少量数据上传的方法。

那么在什么情况下，百度统计 会去触发上传的操作？

我们来试验一下？

1、每次页面的刷新 这个是一定会去 触发的
2、路由去下一个新页面会去触发么？（待验证）
3、路由返回旧页面会触发么？（待验证）

下面： 我们就将待验证的场景实现出来看看，究竟会不会触发。

1-2： 加入 react-router 在项目中

const GetBaidu = props => {  let children = props.children;  let _hmt = _hmt || [];  (function() {    var hm = document.createElement("script");    hm.src = "https://hm.baidu.com/hm.js?ccb0e8f10ba18ccb5041e8aa48068c1b";    var s = document.getElementsByTagName("script")[0];    s.parentNode.insertBefore(hm, s);  })();  return children;};const App = () => {  return (    <div>      <h2>测试百度统计代码</h2>      <h3>        <Link to={"/"}>Index</Link>      </h3>      <h3>        <Link to={"/home"}>Home</Link>      </h3>      <h3>        <Link to={"/my"}>my</Link>      </h3>      <Switch>        <GetBaidu>          <Route exact path="/" component={Index} />          <Route exact path="/home" component={Home} />          <Route exact path="/my" component={My} />        </GetBaidu>      </Switch>    </div>  );};

这样相似一个阻拦器一样，在路由跳转之前把 百度统计的代码再次家再一次。

同样，Vue-router 的项目也是相似。

1-3： 加入 Vue-router 在项目中

router.afterEach( ( to, from, next ) => { 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?xxxx";    hm.id = "baidu_tj"    var s = document.getElementsByTagName("script")[0];    s.parentNode.insertBefore(hm, s);   })(); },0);} );

这里只是简单粗暴的进行一个最简单的 demo 展现

亲测这类数据统计问题，放在很多项目中都是需要处理的。

总结：

React 和 Vue 的方法相似， 在路由跳转前先做阻拦操作。加上需要在页面中加入的方法和统计代码就可。