前端埋點方案分析

代碼埋點

命令式埋點

• 常規方案
• 手動在須要埋點的節點處進行埋點
• 工做量較大,入侵業務代碼後續代碼會越發膨脹，難以維護。

聲明式埋點

• 例：統計某 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