前端項目接入埋點系統的優化

1、基本概述

   根據產品的需求，會針對一些頁面做PV/UV的統計。埋點的實質就是向埋點服務器發送請求，埋點服務器埋點的數據做統計。正常情況下，我們需要在埋點的頁面裏添加埋點代碼。而埋點的代碼與實際的業務代碼，是沒有任何關係，往往會造成大量噁心的代碼摻雜在業務代碼中。

   埋點接入時，首先通過script標籤，引入埋點的js文件，具體參考對應的埋點系統的api文檔。針對具體的場景加入埋單代碼，以我司自研埋點系統爲例，埋點代碼如下：

BossService.trace(moduleName , json字符串)；

   如果你接入的是百度統計等，也需要在埋點的地方添加如下代碼:

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

   其本質都是需要在需要埋點的地方添加與業務無關的埋點代碼。針對以上問題，在dva框架中按照如下方式改進，具體思路如下：

   1、構造一個需要埋點的頁面集合traceMapping，該集合中包含埋點頁面的路由，以及需要埋點的頁面數據（通常是對應埋點系統接口的moduleName）；

   2、通過全局的model，監聽頁面路由的變化，噹噹前路由在traceMapping中能找到時，則說明當前路由需要埋點。

   本質上來講，就是對比當前路由是否是埋點集合中的數據，如果是則添加埋點數據。該方法同樣適用於Vue、微信小程序。在Vue中，可以通過App.vue中的watch可以監聽路由變化；在微信小程序中也可以通過手動添加監聽器，在app.js中對路由的變化的做監聽（https://blog.csdn.net/weixin_30877181/article/details/101731135）

2、核心代碼分析

  埋點集合

// traceMapping.js
export const traceMapping = {
   '/about/version': { content: '關於傳化優化-版本記錄' },
   '/finance/billManage/list': { content: '賬單管理-頁面訪問情況' },
   '/finance/invoice/list': { content: '開票管理-頁面訪問情況' },
   '/': { content: '首頁-頁面訪問情況' },
   '/messageCenter/list': { content: '油品管理-頁面訪問情況' },
};

  在全局的Layout中添加如下代碼：：

//layout.js
componentDidMount() {
   this.props.history.listen(({ pathname }) => {
      if (traceMapping[pathname]){
         window.BossService && window.BossService.trace(traceMapping[pathname].content);
      }
   });
}

  優點：

  1、 解耦業務與埋點代碼，埋點代碼window.BossService.trace集中處理；

  2、 有利於後期擴展，當埋點頁面增加時，只需要添加對應的頁面路由和埋點的內容。

  當前方法只能優化PV/UV的埋點代碼，針對按鈕操作的埋點監聽，還是需要手動添加到具體的業務代碼中。