前端埋點方案分析

範兒發表於2019-04-08
前端

程式碼埋點

命令式埋點

  • 常規方案
  • 手動在需要埋點的節點處進行埋點
  • 工作量較大,入侵業務程式碼後續程式碼會愈加膨脹，難以維護。

宣告式埋點

  • 例：統計某 dom 點選事件
    • 首先封裝一個 vue 指令(directive);
      // 註冊一個全域性自定義指令 `v-tracking`
Vue.directive("tracking", {
  // 只呼叫一次，指令第一次繫結到元素時呼叫。
  bind: (el, binding) => {
    // 給元素繫結事件
    el.addEventListener(
      "click", _ => {
        // 預設引數設定
        let def = {
          url:'/url',
        }
        let data =  Object.assign(def,binding.value);
        //binding.value為傳入的物件字面量，將其轉為字串再通過RSA加密來壓縮埋點內容
        console.log(RSA.encrypt(JSON.stringify(data)));
        // 傳送埋點資料
      },
      false
    );
  }
});
複製程式碼
    • html
        <button v-tracking="{ tag: '1', remake:'1' }">按鈕1</button>
  <button v-tracking="{ tag: '2', remake:'2' }">按鈕2</button>
複製程式碼
    • 目前埋點程式碼與業務程式碼混合再一起的，宣告式埋點可以再一定程度上解耦業務程式碼
    • 一些複雜場景依然需要命令式埋點

無埋點(全埋點)

  • 由於採集的是全量資料，所以產品迭代過程中是不需要關注埋點邏輯的，也不會出現漏埋、誤埋等現象
  • 無埋點採集全量資料，給資料傳輸和伺服器增加壓力
  • 無法靈活的定製各個事件所需要上傳的資料

視覺化埋點

  • 使用視覺化工具進行配置化的埋點，即所謂的「無痕埋點」，前端在頁面載入時，可以讀取配置資料，自動呼叫介面進行埋點。如開源的Mixpanel;
  • demo

相關文章