前端工程實踐之數據埋點分析系統（一）

• 2020 年 2 月 25 日
• 筆記

本文首發於政采雲前端團隊博客：前端工程實踐之數據埋點分析系統（一） https://www.zoo.team/article/data-analysis-one

背景

隨着公司業務的不斷增長，平台業務的不斷增加，場景複雜度也對應的有所增加。這對平台產品的用戶體驗，商業場景的深化運營，及過程中對平台用戶的使用便捷性，都帶來了不小的影響和挑戰。為更精準的觸達用戶痛點，定位轉化低點，提升業務賦能，基於數據分析的優化策略勢在必行。

政采雲前端團隊（ZooTeam），從去年年底開始，主動主導推進公司業務層面的 Web 數據埋點及分析量化的能力建設（內部產品化命名「渾儀系統」）。希望基於我們過去一段時間的事件和經驗，能為正有意實踐此方向從 0 到 1 建設的小夥伴們，提供一些思路和幫助。

系統概覽

數據埋點分析系統都做了些什麼？採集了哪些數據？這些數據我們將如何運用和分析？最終又將如何展示呢？

首先我們看下系統結構。整個系統由以下 4 個部分組成，期望能提供一套完整的用戶行為分析的解決方案：

1. 埋點採集 JSSDK：收集用戶行為數據，並進行上報；
2. 數據處理服務：接收上報數據並存儲；篩取所需數據，進行數據處理並透出；
3. 數據可視化平台：匯總展示詳細數據，支持自定義，打通業務；
4. Chrome插件工具：在頁面上直觀展示坑位數據，提供場景更友好的數據可視化服務；

其基本協作流程是，用戶進入平台任意一個已埋點的 Web 頁面，進行的一系列（進入、點擊、滾屏等）操作，都會由 JSSDK 進行分類並將數據上報至服務端進行存儲，再由站點 / 插件發起查詢，服務端將處理後的數據返回，再通過數據可視化平台進行透出展示。

系統概覽.png

數據採集

數據採集一般分為以下三種：

1. 無埋點（全埋點）：零埋點成本，抓取用戶行為全量數據，任何操作行為都會被上傳。數據量大，「噪音」多；
2. 可視化埋點：在頁面中操作，選擇埋點位置/模塊，非開發人員也可以進行埋點；
3. 侵入式埋點：埋點時需要將數據採集代碼寫入業務代碼中，埋點成本較高，但準確度也更高；

由於對數據的準確度要求較高，同時希望前期只投入較少的開發資源就可以進行快速試錯，並為了滿足重點的用戶行為數據的採集需求，因此，我們優先採用代碼侵入式埋點方案。

同時針對其接入成本較高的劣勢，我們也將埋點在搭建系統及組件中採用了自動化的植入方式，這點將不在此詳述。為降低接入成本並且更加靈活的捕獲數據，我們採用了 DOM 節點掛載特殊屬性後自動發送和手動自定義發送兩種方式結合，以滿足不同場景的需要。

//自動發送埋點方式，舉例：  <button data-utm-click="${did}" data-utm-data="${業務數據}">  //手動發送埋點方式，舉例：  const utmCnt = g_UTM.batchSend('觸發類型（click/browse）等',[{      utmCD:['區塊信息','位置信息'],      bdata:{key:'其他業務數據'}    },{      utmCD:['001','008'],      bdata:{key:'value'}    }  ]);  

基於用戶行為分析這個大目標，我們所採集數據緊緊圍繞着兩個主題，即：Event（事件/行為）和 User（用戶）。

圍繞「事件「我們採集了：事件的類型、發生時間、頁面位置等信息，組成事件唯一標識。

圍繞」用戶「我們採集了：用戶 IP、操作系統、瀏覽器信息、屏幕分辨率等，並生成用戶唯一標識植入 Cookie 中。

{    bdata: {}, //業務數據    createTime: "1571038815128", // 創建時間    evt: "browse", // 事件類型    ipAddr: 122.226.174.195, //ip地址    logType: 2, // 觸發類型    lver: 1.1.0, //版本    mx: 0, // 頁面位置坐標x    my: 0, // 頁面位置坐標y    os: "Windows/7", // 操作系統    pre: "https://www.zcygov.cn/", // 來源地址    scr: "1920x1360", // 屏幕分辨率    url: "https://www.zcygov.cn/", // 頁面地址    userId: "001", // 用戶標識    utmCnt: "a0004.2ef5001f.0001.0001.d814bf60ee5511e99397b37fe9083257", // 觸發位置    utmUrl: "a0004.2ef5001f.0001.0001", // 來源位置    uuid: "d7fd8de0-ee55-11e9-9397-b37fe9083257", // 瀏覽器唯一標識  }  

上述一些收集的字段，會在下面案例中使用到。

點擊發送請求.gif

數據展示

目前前台站點已經提供了比較豐富的數據展示功能，比如：PV（瀏覽次數）/UV（瀏覽人數） 排序或趨勢、漏斗分析、路徑分析、熱圖分析、用戶畫像、自定義看板等等，還有各種業務相關的數據統計及報表導出功能。總體菜單如下：

數據展示.png

• PV/UV 排序或趨勢（PV：PageView，頁面瀏覽次數，用戶每打開一次記錄一次，多次打開同一頁面將累計多次；UV：UserView，瀏覽頁面人數；下文中將直接用PV/UV；）
  • 全站的PV/UV單日趨勢圖：分時段查看訪問量的高峰和低谷；
  • PV/UV排序：查看Top頁面的PV/UV
  • 按頁面、時間區間查詢PV/UV
• 漏斗分析：按流程排序每個階段的人數，計算出轉化率；
• 路徑分析：查詢各個頁面的來源和去向；
• 熱圖分析
  • 點擊熱圖：按鈕及鏈接點擊的熱圖；
  • 滾屏熱圖（即將上線）：用戶頁面滾屏觸達率；
• 用戶畫像（即將上線）：針對重點用戶的回訪次數、瀏覽路徑、用戶身份、所在地、操作系統、瀏覽器等詳細信息查詢；
• 自定義看板：可選擇首頁看板的展示項；

image.png

賦能業務

採集和分析哪些數據才是對業務有價值的，我們參考了許多業界成熟的用戶行為分析解決方案，包括：

1. GrowingIO
2. 神策數據
3. 數極客

這些產品在用戶行為分析側的功能可以說是做到了大而全。根據我們的實際需求可以篩選出以下一些重點功能模塊：

上面大部分已支持的功能都可以在【數據展示】模塊中查看，表單分析及用戶行為序列目前已在我們版本的規劃中。表單分析是分析一個用戶從進入一個表單填寫頁面到表單提交的過程中各個行為的分析，每個表單項的填寫率、重填率、填寫時長、放棄率等都是重要的分析指標，會直接影響到整體的轉化率。也能幫助開發人員及時發現和定位表單頁面中的交互問題，從而提升用戶體驗，和重要鏈路中的轉化率。

例如：常見的註冊表單的轉化，即 10 個用戶進入註冊頁面但最後只有 7 個用戶成功註冊，這個功能可以有效發掘剩餘 3 個註冊失敗的用戶流失的點，找到他們是在填寫哪個表單項前離開頁面或是找到重填率最高的表單項進行優化。用戶行為序列是從單一用戶的角度去查看在我們站點上的行為軌跡，從而去分析重點用戶的行為喜好。

基於公司當前的業務發展，除了上述基礎功能模塊外，系統中還會對應考慮一些定製化的業務能力模塊。依據目前系統的能力類型，可分為用戶行為分析、鏈路轉化分析、用戶體驗分析等：

渾儀系統.png

搜索流程埋點案例

那麼在一個頁面或者一個流程中我們可以採集到哪些有價值的數據呢？下面我們就以一個簡單的流程為例來說明。

這裡流程可以分為三步，首先，用戶進入政采雲電子賣場首頁，並在搜索框中輸入想要搜索的關鍵詞，其次，點擊搜索按鈕後進入搜索結果頁，最後，在結果頁中找到了目標商品並點擊進去了商品詳情頁查看。這是在一個電商平台中用戶操作行為中較為常見的一種流程，也是一個關鍵流程。

案例流程.png

我們在上述的三個頁面中會採集的數據有以下三種：

1. 頁面進入/離開自動埋點
2. 按鈕點擊埋點
3. 鏈接點擊埋點

gbjaorgWvUkrL8zz__thumbnail.png

如上圖所示，通過 Chrome 插件工具，可以在頁面上直觀的展示鏈接和按鈕的點擊次數（數據已脫敏）。

利用上面說到的三項埋點，我們在單個頁面中可以得到用戶行為相關的四種數據。

1. PV：通過計算日誌中所有進入頁面日誌條數的總和我們可以得到 pv
2. UV：以唯一 uuid 將 pv 進行過濾後可以得到 uv ；
3. 按鈕點擊數：直接通過統計按鈕點擊事件上報的日誌條數可以得到按鈕的點擊量；
4. 鏈接點擊數：與按鈕點擊有所不同，按鈕點擊是通過單獨發送的點擊事件上報來進行統計，而鏈接點擊往往導致的是一次頁面跳轉，此處即為從電子賣場首頁離開進入了搜索結果頁，此時我們所統計的就是搜索結果頁的頁面進入事件中的 utmUrl（即來源按鈕的唯一識別碼）值，判斷出該次搜索結果頁的進入是來源於首頁常見搜索關鍵詞的點擊，從而統計出該位置的的鏈接點擊量。

bVoH1OuCEtA66wys__thumbnail.png

再對這些數據進行加工，我們進一步可以得到：停留時長、轉化率、熱力圖；

• 熱力圖：用於反映圖中點的密集程度，在此處我們利用點擊的坐標（點擊的 x,y 坐標位置，再根據屏幕分辨率做一致性的換算）組合成點擊熱圖，如下圖所示（數據已脫敏）。

3Lq2AEjithQwS1JR__thumbnail.png

• 漏斗分析：由一個元事件/虛擬事件加一個或者多個篩選條件組成，表示一個轉化流程中的一個關鍵性的步驟；在我們平台上創建一個漏斗主要有以下幾步：

如下圖所示，在這個漏斗中定義了三個事件。

1.png

將這三個事件串聯起來，可以得到完整的漏斗分析圖（數據已脫敏）。

2.png

總結

本文只是對通用類型的數據埋點與分析系統做了下初步的能力項介紹，後續我們將針對每個踩過的坑和做過的優化產出一系列的文章，希望各位能給予意見。

1. 《如何高效完整的採集數據》
2. 《埋點數據分析模型設計》
3. 《Chrome 插件之數據可視化》