埋點

1 什麼是埋點

首先咱們來講說什麼是數據處理？

數據處理的過程每每追隨下面的流程：收據採集—數據傳輸—數據存儲/建模—數據統計/分析/挖掘—數據可視化/反饋。

在這裏咱們要明確的一點是，數據處理的整個過程當中，「數據收集」 是第一步，它是咱們進行數據分析的大前提，收集的數據將會直接影響最後的分析結果。因此，咱們應重點考慮到收集數據的可靠性

• 接下來咱們再說說什麼是埋點？

簡單的說，埋點就是定時、定點的採集數據，而後上報。

• 埋點方案有哪些？

方案一：代碼埋點。就是在須要數據採集的地方抓取數據，而後上傳。其優勢在於它的準確性和針對性，指哪兒打哪兒，不浪費一顆子彈。

本文章所說的埋點指的是代碼埋點

方案二：可視化埋點

方案三：無埋點

2 爲何要作埋點

咱們統計每一位用戶地圖加載時長，附近單車出現時間，開鎖耗時等關鍵性指標，以便對用戶行爲進一步分析優化。

3 埋點小工具 track.js 的使用方法

（1）引入

在當前文件中引入track

const { track } = require('../../utils/util')

（2）使用

track({
   action: {
      type: 'REQUEST',
      entityInfo: {
         entityType: 'BANNER',
         entityName: 1
      }
   },
   entityInfo: {
      entityBizType: 9
   },
   atPage: {
       pageName: 'MAIN_PAGE'
   }
})

4 埋點小工具實現原理

整體思路：

實現一個埋點小工具 track.js，在項目裏須要進行埋點的位置均可以引入、調用，而後就能夠自動發送埋點請求了

（1）設計 log 日誌內容和數據格式

以下截圖是一張

（2）收集日誌，併發送給後端

注：下面寫了一個最簡單的收集日誌小工具（track.js精簡版），主要是爲了凸顯原理

let timer
var _track = {
  tasks: [], //任務隊列，用於收集多個日誌
  log(data) {
    _track.tasks.push(data)
    this.send()
  },
  send() {
    if(!timer) {
      timer = setInterval(function() { //定時器，控制日誌延遲發送，不影響業務請求順利發出
         _track.tasks.forEach(data => {
            // 在這裏發送 log 日誌
            request({
                url: 'https://XXX/x.gif' //請求一個空gif,目的是攜帶要發送的 log 日誌
                data: {
                  client_id: 'html5',
                  log: JSON.stringify(data)
                }
            })
         })
         _track.tasks = []
         clearInterval(timer)
         timer = null
      }, 2000)
    }
  }
}
 
function track(data) {
    return _track.log(data)
}
  
// 縮短暴露出的方法名
function fn() {
  return track.log.apply(track, [].slice.call(arguments))
}
 
for (var name in track) {
  fn[name] = track[name]
}
 
module.exports = fn

（3）track.js 使用方法

在須要埋點的文件裏面引入，直接調用track（）傳遞參數便可，在第 3 節使用方式裏面已經說明

（4）調用 track() 以後發生了什麼

track({params}) 被調用以後，日誌內容以參數形式發送到 「空 gif」 請求裏，這也是通用的日誌統計方式

4 結合小程序業務埋點須要考慮的因素

（1）每次埋點內容都包括：用戶信息，城市信息，地理位置。考慮如何實現？

• 思路：

在用戶打開小程序的時候，一次性獲取到用戶的用戶信息userId，城市信息location，地理位置citycode ，這三個值一般會被緩存在 storage 裏面。而後在小程序運行過程當中每一次須要發送 log 日誌的時候，把其餘值追加到這三個值後面

注意，這裏應用緩存能夠提高性能哦

• 代碼實現：

track 小工具裏面實現一個方法 getCommon()，並將這個方法暴露出去。在小程序啓動的時候調用 getCommon() 收集用戶信息，城市信息，地理位置這三個指標值

（2）每次埋點內容都包括：網絡狀態。考慮如何實現？

網絡狀態networkType

和上邊同樣作了緩存，而且會和其餘日誌內容一塊兒被髮送，具體緩存到哪裏去了呢，待解答

（3）前端向後端發送數據統計請求埋點，怎麼發送？

• 思路：

log 內容以參數形式發送到 「空 gif」 請求裏，這也是通用的日誌統計方式

• 代碼實現：

wx.request({
  url: 'https://log.mobike.com/log/x.gif',
  data: {
    log: '{startTime: 1530179125563, endTime: 1530179138793, ...}'
  }
})

（4）初次進入小程序，會有多個統計指標要發送，同時業務上也要發出多個數據請求。如何協調這二者之間的發送順序？

• 思路：

優先發送業務上的數據請求，統計指標 log 延後發送。如何作到延後呢？選定一個節點表示業務請求發送完成，好比附近的車出現，再統一發送全部埋點請求。這裏要注意的一點是，log 的請求和業務的請求是獨立的，沒有封裝到一塊兒。

• 代碼實現：

setInterval(function() { // 延遲兩秒發送
  if (!wx.isRequestBusy) { // 若是如今沒有發送業務請求，那就能夠發送埋點請求咯
      // 在這裏發送埋點請求
  }
}, 2000)

wx.isRequestBusy 是在 utils/request 裏面自定義的方法，不是 wx 原生自帶的方法。它用於標識當前業務是否處於 busy 狀態，而不是用於標示 log 是否處於 busy 狀態。