前端 SPA 單頁應用數據統計解決方案 (ReactJS / VueJS)
阿新 • • 發佈:2018-11-11
情況下 tee 移除 簡單的 tag function vue each 簡單
前端 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 的方法類似, 在路由跳轉前先做攔截操作。加上需要在頁面中加入的方法和統計代碼即可。
原文鏈接:https://www.jianshu.com/p/d5d...
原文地址:https://segmentfault.com/a/1190000016942625
前端 SPA 單頁應用數據統計解決方案 (ReactJS / VueJS)