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

想獲取更多原創好文，請掃 👆上方二維碼關注咱們吧~

背景

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

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

系統概覽

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

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

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

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

數據採集

數據採集通常分爲如下三種：

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", // 瀏覽器惟一標識
}
複製代碼

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

數據展現

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

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

賦能業務

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

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

這些產品在用戶行爲分析側的功能能夠說是作到了大而全。根據咱們的實際需求能夠篩選出如下一些重點功能模塊：

關鍵功能點	數極客	神策數據	GrowingIO	自研系統
表單分析	支持	支持	支持	不支持
頁面分析	支持	支持	支持	支持
路徑分析	支持	支持	支持	支持
漏斗分析	支持	支持	支持	支持
事件分析	支持	支持	支持	支持
事件分佈分析	支持	支持	支持	支持
用戶分羣	支持	支持	支持	支持
行爲預測	不支持	支持	不支持	不支持
用戶行爲序列	不支持	支持	不支持	不支持
熱圖	支持	支持	支持	支持
視頻回放	支持	不支持	不支持	不支持

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

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

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

搜索流程埋點案例

那麼在一個頁面或者一個流程中咱們能夠採集到哪些有價值的數據呢？下面咱們就以一個簡單的流程爲例來講明。

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

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

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

如上圖所示，經過 Chrome 插件工具，能夠在頁面上直觀的展現連接和按鈕的點擊次數（數據已脫敏）。

利用上面說到的三項埋點，咱們在單個頁面中能夠獲得用戶行爲相關的四種數據。

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

再對這些數據進行加工，咱們進一步能夠獲得：停留時長、轉化率、熱力圖；

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

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

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

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

總結

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

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

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 50 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「 5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com

推薦閱讀

前端工程實踐之可視化搭建系統（一）

多是最全的 「文本溢出截斷省略」 方案合集

圖文並茂，爲你揭開「單點登陸「的神祕面紗