小程式前端埋點專案竟然如此重要,你知道嗎?

游客2024-06-29 10:30:01

最近在公司做個小程式相關的前端埋點項目,之前也只是聽說過這個名詞,卻沒有深入的研究過,總結一下最近一周學到的東西。

目的

取得使用者基本資訊、行為以及追蹤產品在使用者端的使用情況,並以監控資料為基礎,指明產品最佳化的方向。

前端監控類別

前端監控可分為三類:資料監控、效能監控、異常監控。

數據監控

資料監控,就是監聽使用者資訊和行為,常見的監控項目有:

效能監控

效能監控指的是監聽前端的效能,主要包括監聽網頁或說產品在使用者端的體驗。常見的效能監控項包括:

這些效能監控的結果,可以展示前端效能的好壞,根據效能監測的結果可以進一步的去優化前端效能,例如相容低版瀏覽器的動畫效果,加快首頁載入等等。

異常監控

由於產品的前端程式碼在執行過程中也會發生異常,因此需要引入異常監控。及時的上報異常情況,可避免線上故障的發上。雖然大部分的異常可以透過try catch 方式捕獲,但是例如記憶體洩漏以及其他偶現的異常難以捕獲。常見的需要監控的異常包括:

我們說完了前端監控的三個分類,現在就來聊聊怎麼實現前端監控。實現前端監控,第一步肯定是將我們要監控的事項(資料)給收集起來,再提交給後台,最後進行資料分析。資料收集的豐富性和準確性會直接影響我們做前端監控的質量,因為我們會以此為基礎,為產品的未來發展指引方向。

收集監控資料我們是透過前端埋點來實現的,目前常見的前端埋點方法有三種:手動埋點、視覺化埋點和無埋點。

前端埋點分類

我們說完了前端監控的三個分類,現在就來聊聊怎麼實現前端監控。實現前端監控,第一步肯定是將我們要監控的事項(資料)給收集起來,再提交給後台,最後進行資料分析。資料收集的豐富性和準確性會直接影響我們做前端監控的質量,因為我們會以此為基礎,為產品的未來發展指引方向。

收集監控資料我們是透過前端埋點來實現的,目前常見的前端埋點方法有三種:手動埋點、視覺化埋點和無埋點。

手動埋點

手動埋點,也叫代碼埋點,即純手動寫代碼,調用埋點SDK 的函數,在需要埋點的業務邏輯功能位置調用接口,上報埋點數據,像友盟、百度統計等第三方數據統計服務商大都採用此方案。

優勢:

可自訂屬性,自訂事件可以細化需求相比其他埋點方式減少伺服器壓力

缺陷:

工程量大的話,手動埋點會出現疏漏,不方便審查。需求變更要重新埋點,成本高。每次需求變更都要重新發布版本,對線上系統穩定性有一定危害可視化埋點(這個有點複雜,先不討論,有興趣的伙伴可以和我討論)

透過可視化互動的手段,取代上述的程式碼埋點。將業務代碼和埋點代碼分離,提供一個可視化交互的頁面,輸入為業務代碼,透過這個可視化系統,可以在業務代碼中自訂的增加埋點事件等等,最後輸出的代碼耦合了業務代碼和埋點代碼。缺點就是可以埋點的控制有限,不能手動自訂。

視覺化埋點聽起來比較高大上,實際上跟程式碼埋點還是差別不大。也就是用一個系統來實現手動插入程式碼埋點的過程。例如國外比較早做可視化的是,國內較早支持可視化埋點的有、諸葛IO,2017年騰訊的MTA 也宣布支持可視化埋點;相比於手動埋點更新困難,埋點成本高的問題,視覺化埋點優化了行動營運中資料擷取的流程,能夠支援產品營運隨時調整埋點,無需再走發版流程,直接把配置結果推入到前端,資料擷取流程更簡化,也更方便產品的迭代。

視覺化埋點中多數基於Xpath的方案,XPath 是一門在XML 文件中尋找資訊的語言,XPath 可用於在XML 文件中對元素和屬性進行遍歷。

無埋點

無埋點則是前端自動採集全部事件,上報埋點數據,由後端過濾計算出有用的數據。

優點:

前端只要一次載入埋點腳本

缺點:

伺服器效能壓力山大

採用無埋點技術的有主流的、神策。

總結

我們需要根據不同場景選擇不同的埋點方案。本人比較傾向於無埋點和手動埋點結合。主要用無埋點獲取設備的基礎訊息,用手動埋點來讓開發者獲取自訂事件。例如對於簡單的獲取用戶信息,基本事件,可以使用無埋點解決;而對於需要攜帶大量運行時才可獲知的業務字段的埋點需求,就需要手動埋點來解決。

參考: