一、項目背景

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

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

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

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

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

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

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

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

二、可視化埋點方案

產(chǎn)品定位

對比神策等埋點：

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

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

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

需求埋點整體流程圖

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

開啟可視化埋點配置可移動配置面板，針對需要埋點的元素進行圈選。

頁面圈選指定元素，配置相關(guān)名稱、事件、自定義業(yè)務(wù)屬性、維護人等，保存至管理后臺數(shù)據(jù)庫。

埋點SDK監(jiān)聽點擊、曝光事件，讀取配置信息，針對指定配置元素進行埋點上報。

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

技術(shù)實現(xiàn)流程

埋點定位&圈選方案

元素標(biāo)志需要全局唯一且不易受到產(chǎn)品交互變更影響，并在確認(rèn)受到影響后，需在功能迭代上線前，完成埋點變更。

標(biāo)識結(jié)構(gòu)設(shè)計

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

標(biāo)志生成&匹配流程

首先研發(fā)人員在研發(fā)時，需提前安裝 VScode 插件AddTrackId 埋點插件『用于生成Data-Trackid的 Data-Set 屬性』。

安裝完成后，在開發(fā)JS、TS、TSX、JSX、Vue等格式文件中任意位置，右鍵生成埋點所需 Data-Trackid，即可掃描當(dāng)前文件，針對指定 Dom 標(biāo)簽加上Data-Trackid屬性，每個標(biāo)簽使用新生成 TrackId【控制長度】，第二次保存時，已有 TrackId 不變，沒有的新增 + 路徑的拼接，轉(zhuǎn) MD5。

用戶在頁面圈選元素時，會尋找最近的帶Data-Trackid的標(biāo)簽，如果沒有則繼續(xù)向上找，最終拼接一個相對的 Xpath路徑。

元素圈選方案

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

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

依賴加載

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

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

讀取配置：可視化埋點是通用型埋點，不依賴具體埋點代碼，根據(jù)當(dāng)前產(chǎn)品所做埋點配置信息，通過匹配當(dāng)前系統(tǒng)和頁面 URL，按照對應(yīng)規(guī)則，獲取到當(dāng)前頁面的配置 JSON，進行加載。

數(shù)據(jù)劫持：通過劫持 Fetch 等對象，獲取頁面請求數(shù)據(jù)，支持用戶自定義配置上報的業(yè)務(wù)參數(shù)。

頁面級別通用業(yè)務(wù)參數(shù)維護：研發(fā)在管理后臺維護頁面級別通用業(yè)務(wù)參數(shù)，通過 InjectCommon 方法將如訂單 ID、類目 ID 等埋點需要關(guān)注的業(yè)務(wù)參數(shù)注入至 JSON 中，產(chǎn)品、運營通過選擇業(yè)務(wù)參數(shù)即可進行埋點。

埋點上報

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

埋點驗證更新

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

手動埋點驗證

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

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

埋點巡檢任務(wù)

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

四、總結(jié)&規(guī)劃

埋點SDK存在一定耦合，未來功能粒度將拆的更細(xì)，做到各司其職。

監(jiān)控體系的可配置化能力，將支持針對特定人群和數(shù)據(jù)維度進行指定配置化等。

優(yōu)化C端可視化能力，提升C端可視化埋點體驗。

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