一、項(xiàng)目背景

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

原有商家后臺(tái)通過手動(dòng)埋點(diǎn)方式實(shí)現(xiàn)業(yè)務(wù)埋點(diǎn)的收集。

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

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

可視化埋點(diǎn)相對手動(dòng)埋點(diǎn)流程上得到明顯減少，且具有以下價(jià)值：

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

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

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

二、可視化埋點(diǎn)方案

產(chǎn)品定位

對比神策等埋點(diǎn)：

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

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

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

需求埋點(diǎn)整體流程圖

如下為可視化埋點(diǎn)功能流程：

開啟可視化埋點(diǎn)配置可移動(dòng)配置面板，針對需要埋點(diǎn)的元素進(jìn)行圈選。

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

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

三、商家可視化埋點(diǎn)的實(shí)踐

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

埋點(diǎn)定位&圈選方案

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

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

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

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

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

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

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

元素圈選方案

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

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

依賴加載

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

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

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

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

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

埋點(diǎn)上報(bào)

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

埋點(diǎn)驗(yàn)證更新

手動(dòng)埋點(diǎn)驗(yàn)證，埋點(diǎn)數(shù)據(jù)異常告警，埋點(diǎn)巡檢任務(wù)。

手動(dòng)埋點(diǎn)驗(yàn)證

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

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

埋點(diǎn)巡檢任務(wù)

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

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

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

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

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

平臺(tái)的重點(diǎn)都是為業(yè)務(wù)服務(wù)，助力業(yè)務(wù)各類指標(biāo)能力是平臺(tái)價(jià)值最大化的最佳實(shí)踐。