一、項目背景

在數(shù)字產(chǎn)品的數(shù)據(jù)分析實踐中，手動代碼埋點方式因其精確性和定制化的優(yōu)勢長期被許多組織采用，但隨著業(yè)務快速發(fā)展和迭代需求的增加，傳統(tǒng)手動埋點方法的時間消耗、一定的技術門檻和較高的維護成本成為研發(fā)角色的負擔。另外，全埋點的埋點方式提供了全面數(shù)據(jù)捕捉的解決方案，但其帶來的海量數(shù)據(jù)處理難題和潛在的隱私風險也不容忽視。

原有商家后臺通過手動埋點方式實現(xiàn)業(yè)務埋點的收集。

圖片

埋點流程從明確需求到上線&驗證共計上圖 5 個步驟，手動代碼埋點經(jīng)歷 v1.0 到 v2.0，減少了研發(fā)熟悉埋點流程、平臺建節(jié)點、埋點 coding 成本，從前期產(chǎn)品隨需求提出埋點訴求，到進入迭代進行需求開發(fā)，再到需求正式上線，并生效查看數(shù)據(jù)。

在偏 B 類產(chǎn)品系統(tǒng)中，前期更關注產(chǎn)品功能實現(xiàn)，手動代碼埋點的流程周期和成本的問題易導致埋點的覆蓋率不足，在長期功能交互迭代試錯或者精細化優(yōu)化產(chǎn)品體驗時，往往存在缺少及時和豐富的數(shù)據(jù)支撐來為決策優(yōu)化方向提供保障。導致階段性的體驗較差，甚至極端研發(fā)資源浪費等問題。

可視化埋點相對手動埋點流程上得到明顯減少，且具有以下價值：

埋點實時生效，數(shù)據(jù) T+1 可查、加速數(shù)據(jù)驅動決策，業(yè)務埋點及時率高達 90%+。

提升鏈路整體效率，大部分場景下研發(fā)手動埋點開發(fā) 0 投入，0 溝通。

能夠可視化的看到全量埋點，及時發(fā)現(xiàn)差異變更，及時調整，埋點丟失率 0%。

二、可視化埋點方案

產(chǎn)品定位

圖片

對比神策等埋點：

可視化埋點重點針對適配國內，國際，B 端，C 端等不同場景，最大程度兼容現(xiàn)有埋點能力，支持多種埋點上報。

SDK 和數(shù)據(jù)采集，支持通過判斷 Query 參數(shù)或 UA 信息，動態(tài)引入依賴，如 Facebook、神策、Google、BaseSdk 依賴，加載對應 CDN 的 JS 來進行底層數(shù)據(jù)上報。

本身可視化能力重點關注簡化埋點編碼過程，同時提供公共埋點能力，如提供數(shù)據(jù)劫持，加載自定義參數(shù)，埋點統(tǒng)一有效性驗證等。

需求埋點整體流程圖

埋點操作流程

如下為可視化埋點功能流程：

圖片

• 開啟可視化埋點配置可移動配置面板，針對需要埋點的元素進行圈選。
• 頁面圈選指定元素，配置相關名稱、事件、自定義業(yè)務屬性、維護人等，保存至管理后臺數(shù)據(jù)庫。
• 埋點 SDK 監(jiān)聽點擊、曝光事件，讀取配置信息，針對指定配置元素進行埋點上報。

圖片

圖片

三、商家可視化埋點的實踐

技術實現(xiàn)流程

圖片

埋點定位&圈選方案

標識結構設計

常規(guī)的 Xpath 設計，在針對外部結構變更時，很容易導致失效，需要進一步降低外部影響，因此唯一標識方面整體采用自定義 Data-Trackid + 相對路徑的 Xpath 路徑。

圖片

標志生成&匹配流程

• 首先研發(fā)人員在研發(fā)時，需提前安裝 VScode 插件 AddTrackId 埋點插件『用于生成 Data-Trackid 的 Data-Set 屬性』。
• 安裝完成后，在開發(fā)JS、TS、TSX、JSX、Vue 等格式文件中任意位置，右鍵生成埋點所需 Data-Trackid，即可掃描當前文件，針對指定 Dom 標簽加上 Data-Trackid 屬性，每個標簽使用新生成 TrackId【控制長度】，第二次保存時，已有 TrackId 不變，沒有的新增 + 路徑的拼接，轉 MD5。
• 用戶在頁面圈選元素時，會尋找最近的帶 Data-Trackid 的標簽，如果沒有則繼續(xù)向上找，最終拼接一個相對的 Xpath 路徑。

元素圈選方案

獲取用戶鼠標移動和鼠標移動處的元素，在 Body 上監(jiān)聽 MouseMove 事件并取其 Target 即可獲取目標元素，接下來只需要獲取元素的 content 大小、padding、margin 大小及元素的位置，然后根據(jù)其位置掛載浮層。

圖片

數(shù)據(jù)采集SDK容器

圖片

依賴加載

• 可視化埋點為適配國內，國際，B 端，C 端等不同場景，最大程度兼容現(xiàn)有埋點能力，支持多種埋點上報 SDK 和數(shù)據(jù)采集，通過判斷 Query 參數(shù)或 UA 信息，來通過動態(tài)引入依賴，如 Facebook、神策、Google、BaseSdk 依賴，加載對應 CDN 的 JS。

配置讀取&數(shù)據(jù)上報

• 讀取配置：可視化埋點是通用型埋點，不依賴具體埋點代碼，根據(jù)當前產(chǎn)品所做埋點配置信息，通過匹配當前系統(tǒng)和頁面 URL，按照對應規(guī)則，獲取到當前頁面的配置 JSON，進行加載。
• 數(shù)據(jù)劫持：通過劫持 Fetch 等對象，獲取頁面請求數(shù)據(jù)，支持用戶自定義配置上報的業(yè)務參數(shù)。
• 頁面級別通用業(yè)務參數(shù)維護：研發(fā)在管理后臺維護頁面級別通用業(yè)務參數(shù)，通過 InjectCommon 方法將如訂單 ID、類目 ID 等埋點需要關注的業(yè)務參數(shù)注入至 JSON 中，產(chǎn)品、運營通過選擇業(yè)務參數(shù)即可進行埋點。

埋點上報

• 通過監(jiān)聽頁面級別事件，判斷是否為對應埋點元素，命中后，進行使用對應加載的 SDK 進行數(shù)據(jù)上報。

埋點驗證更新

手動埋點驗證，埋點數(shù)據(jù)異常告警，埋點巡檢任務。

手動埋點驗證

圖片

埋點數(shù)據(jù)異常告警

可視化埋點管理平臺，通過 CronJob 定時任務檢查節(jié)點數(shù)據(jù)是否正常同步，若有節(jié)點異常則發(fā)消息給相關創(chuàng)建人。

圖片

埋點巡檢任務

通過 Pupptter 記錄用戶行為，每天定時執(zhí)行用戶行為記錄，檢驗節(jié)點是否丟失，若有丟失則發(fā)消息給相關創(chuàng)建人。

圖片

四、總結&規(guī)劃

• 埋點 SDK 存在一定耦合，未來功能粒度將拆的更細，做到各司其職。
• 監(jiān)控體系的可配置化能力，將支持針對特定人群和數(shù)據(jù)維度進行指定配置化等。
• 優(yōu)化 C 端可視化能力，提升 C 端可視化埋點體驗。

平臺的重點都是為業(yè)務服務，助力業(yè)務各類指標能力是平臺價值最大化的最佳實踐。