一、項目背景

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

原有商家后臺通過手動埋點方式實現業務埋點的收集。

圖片

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

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

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

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

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

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

二、可視化埋點方案

產品定位

圖片

對比神策等埋點：

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

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

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

需求埋點整體流程圖

埋點操作流程

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

圖片

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

圖片

圖片

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

技術實現流程

圖片

埋點定位&圈選方案

標識結構設計

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

圖片

標志生成&匹配流程

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

元素圈選方案

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

圖片

數據采集SDK容器

圖片

依賴加載

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

配置讀取&數據上報

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

埋點上報

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

埋點驗證更新

手動埋點驗證，埋點數據異常告警，埋點巡檢任務。

手動埋點驗證

圖片

埋點數據異常告警

可視化埋點管理平臺，通過 CronJob 定時任務檢查節點數據是否正常同步，若有節點異常則發消息給相關創建人。

圖片

埋點巡檢任務

通過 Pupptter 記錄用戶行為，每天定時執行用戶行為記錄，檢驗節點是否丟失，若有丟失則發消息給相關創建人。

圖片

四、總結&規劃

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

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