本文首發(fā)于政采云前端團隊博客：前端工程實踐之?dāng)?shù)據(jù)埋點分析系統(tǒng)（一）
https://www.zoo.team/article/data-analysis-one

背景

隨著公司業(yè)務(wù)的不斷增長，平臺業(yè)務(wù)的不斷增加，場景復(fù)雜度也對應(yīng)的有所增加。這對平臺產(chǎn)品的用戶體驗，商業(yè)場景的深化運營，及過程中對平臺用戶的使用便捷性，都帶來了不小的影響和挑戰(zhàn)。為更精準的觸達用戶痛點，定位轉(zhuǎn)化低點，提升業(yè)務(wù)賦能，基于數(shù)據(jù)分析的優(yōu)化策略勢在必行。

政采云前端團隊（ZooTeam），從去年年底開始，主動主導(dǎo)推進公司業(yè)務(wù)層面的 Web 數(shù)據(jù)埋點及分析量化的能力建設(shè)（內(nèi)部產(chǎn)品化命名“渾儀系統(tǒng)”）。希望基于我們過去一段時間的事件和經(jīng)驗，能為正有意實踐此方向從 0 到 1 建設(shè)的小伙伴們，提供一些思路和幫助。

系統(tǒng)概覽

數(shù)據(jù)埋點分析系統(tǒng)都做了些什么？采集了哪些數(shù)據(jù)？這些數(shù)據(jù)我們將如何運用和分析？最終又將如何展示呢？

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

埋點采集 JSSDK：收集用戶行為數(shù)據(jù)，并進行上報；
數(shù)據(jù)處理服務(wù)：接收上報數(shù)據(jù)并存儲；篩取所需數(shù)據(jù)，進行數(shù)據(jù)處理并透出；
數(shù)據(jù)可視化平臺：匯總展示詳細數(shù)據(jù)，支持自定義，打通業(yè)務(wù)；
Chrome插件工具：在頁面上直觀展示坑位數(shù)據(jù)，提供場景更友好的數(shù)據(jù)可視化服務(wù)；

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

數(shù)據(jù)采集

數(shù)據(jù)采集一般分為以下三種：

無埋點（全埋點）：零埋點成本，抓取用戶行為全量數(shù)據(jù)，任何操作行為都會被上傳。數(shù)據(jù)量大，“噪音”多；
可視化埋點：在頁面中操作，選擇埋點位置/模塊，非開發(fā)人員也可以進行埋點；
侵入式埋點：埋點時需要將數(shù)據(jù)采集代碼寫入業(yè)務(wù)代碼中，埋點成本較高，但準確度也更高；

由于對數(shù)據(jù)的準確度要求較高，同時希望前期只投入較少的開發(fā)資源就可以進行快速試錯，并為了滿足重點的用戶行為數(shù)據(jù)的采集需求，因此，我們優(yōu)先采用代碼侵入式埋點方案。

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

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

基于用戶行為分析這個大目標，我們所采集數(shù)據(jù)緊緊圍繞著兩個主題，即：Event（事件/行為）和 User（用戶）。

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

圍繞”用戶“我們采集了：用戶 IP、操作系統(tǒng)、瀏覽器信息、屏幕分辨率等，并生成用戶唯一標識植入 Cookie 中。

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

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

數(shù)據(jù)展示

目前前臺站點已經(jīng)提供了比較豐富的數(shù)據(jù)展示功能，比如：PV（瀏覽次數(shù)）/UV（瀏覽人數(shù)）排序或趨勢、漏斗分析、路徑分析、熱圖分析、用戶畫像、自定義看板等等，還有各種業(yè)務(wù)相關(guān)的數(shù)據(jù)統(tǒng)計及報表導(dǎo)出功能?？傮w菜單如下：

PV/UV 排序或趨勢（PV：PageView，頁面瀏覽次數(shù)，用戶每打開一次記錄一次，多次打開同一頁面將累計多次；UV：UserView，瀏覽頁面人數(shù)；下文中將直接用PV/UV；）

全站的PV/UV單日趨勢圖：分時段查看訪問量的高峰和低谷；
PV/UV排序：查看Top頁面的PV/UV
按頁面、時間區(qū)間查詢PV/UV

漏斗分析：按流程排序每個階段的人數(shù)，計算出轉(zhuǎn)化率；
路徑分析：查詢各個頁面的來源和去向；
熱圖分析

點擊熱圖：按鈕及鏈接點擊的熱圖；
滾屏熱圖（即將上線）：用戶頁面滾屏觸達率；

用戶畫像（即將上線）：針對重點用戶的回訪次數(shù)、瀏覽路徑、用戶身份、所在地、操作系統(tǒng)、瀏覽器等詳細信息查詢；
自定義看板：可選擇首頁看板的展示項；

賦能業(yè)務(wù)

采集和分析哪些數(shù)據(jù)才是對業(yè)務(wù)有價值的，我們參考了許多業(yè)界成熟的用戶行為分析解決方案，包括：

GrowingIO
神策數(shù)據(jù)
數(shù)極客

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

關(guān)鍵功能點	數(shù)極客	神策數(shù)據(jù)	GrowingIO	自研系統(tǒng)
表單分析	支持	支持	支持	不支持
頁面分析	支持	支持	支持	支持
路徑分析	支持	支持	支持	支持
漏斗分析	支持	支持	支持	支持
事件分析	支持	支持	支持	支持
事件分布分析	支持	支持	支持	支持
用戶分群	支持	支持	支持	支持
行為預(yù)測	不支持	支持	不支持	不支持
用戶行為序列	不支持	支持	不支持	不支持
熱圖	支持	支持	支持	支持
視頻回放	支持	不支持	不支持	不支持

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

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

基于公司當(dāng)前的業(yè)務(wù)發(fā)展，除了上述基礎(chǔ)功能模塊外，系統(tǒng)中還會對應(yīng)考慮一些定制化的業(yè)務(wù)能力模塊。依據(jù)目前系統(tǒng)的能力類型，可分為用戶行為分析、鏈路轉(zhuǎn)化分析、用戶體驗分析等：

搜索流程埋點案例

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

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

我們在上述的三個頁面中會采集的數(shù)據(jù)有以下三種：

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

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

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

PV：通過計算日志中所有進入頁面日志條數(shù)的總和我們可以得到 pv
UV：以唯一 uuid 將 pv 進行過濾后可以得到 uv ；
按鈕點擊數(shù)：直接通過統(tǒng)計按鈕點擊事件上報的日志條數(shù)可以得到按鈕的點擊量；
鏈接點擊數(shù)：與按鈕點擊有所不同，按鈕點擊是通過單獨發(fā)送的點擊事件上報來進行統(tǒng)計，而鏈接點擊往往導(dǎo)致的是一次頁面跳轉(zhuǎn)，此處即為從電子賣場首頁離開進入了搜索結(jié)果頁，此時我們所統(tǒng)計的就是搜索結(jié)果頁的頁面進入事件中的 utmUrl（即來源按鈕的唯一識別碼）值，判斷出該次搜索結(jié)果頁的進入是來源于首頁常見搜索關(guān)鍵詞的點擊，從而統(tǒng)計出該位置的的鏈接點擊量。