前端埋點

前端埋點主要是為了服務運營人員採集用戶行為數據，進行後續的數據分析工作。

前端監控和埋點能做什麼

• 數據監控（用戶行為）
• • pv，uv
  • 記錄操作系統
  • 用戶在每一個頁面的停留時間(離開頁面，進入頁面)
  • 用戶進入的入口
  • 用戶在相應頁面的觸發行為，點擊按鈕
• 性能監控 (js中的performance)
• • 用戶的首屏載入
  • http請求響應時間
  • 頁面渲染時間
  • 頁面交互動畫完成時間 關鍵代碼

let timing = performance.timing,
start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
//DNS解析時間
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
//TCP建立時間
tcpTime = timing.connectEnd - timing.connectStart;
//首屏時間
firstPaintTime = timing.responseStart - start;
//dom渲染完成時間
domRenderTime = timing.domContentLoadedEventEnd - start;
//頁面onload時間
loadTime = timing.loadEventEnd - start;

現有的前端埋點方案總結

• 手動埋點 1.命令埋點，前端代碼中需要監控的地方插入監控邏輯

  // 頁面載入時發送埋點請求
  $(document).ready(function(){
  // ... 這裡存在一些業務邏輯
  sendRequest(params);
  });
  // 按鈕點擊時發送埋點請求
  $('button').click(function(){
  // 這裡存在一些業務邏輯
  sendRequest(params);
  });

   

  2.聲明式埋點 聲明式埋點的思路是將埋點代碼和具體的交互和業務邏輯解耦，開發者只用關心需要埋點的控制項，並且為這些控制項聲明需要的埋點數據即可，從而降低埋點的成本 ，在dom元素上增添埋點信息，如下 // key表示埋點的唯一標識；act表示埋點方式 <button data-stat="{key:'111', act: 'click'}">埋點</button>
• 相比命令式埋點，不至於傻瓜式的在哪監控在哪埋點
• 遍歷dom樹，找到[data-stat]元素的節點，綁定click事件，將[data-stat]上的信息發送給伺服器
• 缺點： 1.遍歷DOM樹的時機問題，一個簡單的例子，一個表格的行數據是通過非同步載入，而表格行中的操作按鈕需要埋點，那麼在DOM ready的時候去遍歷，顯然是無法找到的 2.綁定埋點事件次數的問題，怎樣保證埋點事件不會被重覆綁定到元素上，一次操作發了N個埋點請求 重覆工作很多，還要處理冒泡。
• 可視化埋點 業內開源解決方案：Mixpanel 與配套的可視化頁面搭建和 運營通過可視化的界面拖拽配置實現，這些活動控制項元素都帶有唯一標識。通過埋點配置後臺，將元素與要採集事件關聯起來，可以自動生成埋點代碼嵌入到頁面中。
• 全埋點 無埋點則是前端自動採集全部事件，上報埋點數據，由後端來過濾和計算出有用的數據，優點是前端只要一次載入埋點腳本。缺點是流量和採集的數據過於龐大，伺服器性能壓力山大，主流的 GrowingIO 就是這種實現方案。

• 美團實現方案 70%全埋點 + 30%手動埋點

思考

前端路由

數據上傳方式

• img標簽上傳
• ajax
• • 帶來跨域問題

參考

• 掘金-前端監控和前端埋點方案設計
• web埋點實現原理
• github-前端數據採集collect.js
• 獲取web各個階段響應時間：伺服器響應時間、首頁白屏時間、dom渲染完成時間等 https://zhuanlan.zhihu.com/p/27659302 http://taobaofed.org/blog/2016/04/01/lose-statistics/ http://web.jobbole.com/94895/ 前端埋點和後端埋點
• 美團性能分析框架和性能監控平臺
• js埋點技術分析-Mixpanel 和神策sdk分析