前端 SPA 單頁應用資料統計解決方案 (ReactJS / VueJS)

SmallW發表於2018-11-08
前端ReactJSVue

前端 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?xxx";
      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?xxx";
    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 的方法類似， 在路由跳轉前先做攔截操作。加上需要在頁面中加入的方法和統計程式碼即可。

關於 單頁應用資料統計 的文章就介紹到這裡了，歡迎一起來論道～

GitHub 地址：（歡迎 star 、歡迎推薦 : )

前端 SPA 單頁應用資料統計解決方案 (ReactJS / VueJS)

相關文章