最近在公司做個小程式相關的前端埋點項目，之前也只是聽說過這個名詞，卻沒有深入的研究過，總結一下最近一周學到的東西。
目的
取得使用者基本資訊、行為以及追蹤產品在使用者端的使用情況，並以監控資料為基礎，指明產品最佳化的方向。
前端監控類別
前端監控可分為三類：資料監控、效能監控、異常監控。
數據監控
資料監控，就是監聽使用者資訊和行為，常見的監控項目有：
效能監控
效能監控指的是監聽前端的效能，主要包括監聽網頁或說產品在使用者端的體驗。常見的效能監控項包括：
這些效能監控的結果，可以展示前端效能的好壞，根據效能監測的結果可以進一步的去優化前端效能，例如相容低版瀏覽器的動畫效果，加快首頁載入等等。
異常監控
由於產品的前端程式碼在執行過程中也會發生異常，因此需要引入異常監控。及時的上報異常情況，可避免線上故障的發上。雖然大部分的異常可以透過try catch 方式捕獲，但是例如記憶體洩漏以及其他偶現的異常難以捕獲。常見的需要監控的異常包括：
我們說完了前端監控的三個分類，現在就來聊聊怎麼實現前端監控。實現前端監控，第一步肯定是將我們要監控的事項（資料）給收集起來，再提交給後台，最後進行資料分析。資料收集的豐富性和準確性會直接影響我們做前端監控的質量，因為我們會以此為基礎，為產品的未來發展指引方向。
收集監控資料我們是透過前端埋點來實現的，目前常見的前端埋點方法有三種：手動埋點、視覺化埋點和無埋點。
前端埋點分類
我們說完了前端監控的三個分類，現在就來聊聊怎麼實現前端監控。實現前端監控，第一步肯定是將我們要監控的事項（資料）給收集起來，再提交給後台，最後進行資料分析。資料收集的豐富性和準確性會直接影響我們做前端監控的質量，因為我們會以此為基礎，為產品的未來發展指引方向。
收集監控資料我們是透過前端埋點來實現的，目前常見的前端埋點方法有三種：手動埋點、視覺化埋點和無埋點。
手動埋點
手動埋點，也叫代碼埋點，即純手動寫代碼，調用埋點SDK 的函數，在需要埋點的業務邏輯功能位置調用接口，上報埋點數據，像友盟、百度統計等第三方數據統計服務商大都採用此方案。
優勢:
可自訂屬性，自訂事件可以細化需求相比其他埋點方式減少伺服器壓力
缺陷:
工程量大的話，手動埋點會出現疏漏，不方便審查。需求變更要重新埋點，成本高。每次需求變更都要重新發布版本，對線上系統穩定性有一定危害可視化埋點(這個有點複雜，先不討論，有興趣的伙伴可以和我討論)
透過可視化互動的手段，取代上述的程式碼埋點。將業務代碼和埋點代碼分離，提供一個可視化交互的頁面，輸入為業務代碼，透過這個可視化系統，可以在業務代碼中自訂的增加埋點事件等等，最後輸出的代碼耦合了業務代碼和埋點代碼。缺點就是可以埋點的控制有限，不能手動自訂。
視覺化埋點聽起來比較高大上，實際上跟程式碼埋點還是差別不大。也就是用一個系統來實現手動插入程式碼埋點的過程。例如國外比較早做可視化的是，國內較早支持可視化埋點的有、諸葛IO，2017年騰訊的MTA 也宣布支持可視化埋點；相比於手動埋點更新困難，埋點成本高的問題，視覺化埋點優化了行動營運中資料擷取的流程，能夠支援產品營運隨時調整埋點，無需再走發版流程，直接把配置結果推入到前端，資料擷取流程更簡化，也更方便產品的迭代。
視覺化埋點中多數基於Xpath的方案，XPath 是一門在XML 文件中尋找資訊的語言，XPath 可用於在XML 文件中對元素和屬性進行遍歷。
無埋點
無埋點則是前端自動採集全部事件，上報埋點數據，由後端過濾計算出有用的數據。
優點:
前端只要一次載入埋點腳本
缺點:
伺服器效能壓力山大
採用無埋點技術的有主流的、神策。
總結
我們需要根據不同場景選擇不同的埋點方案。本人比較傾向於無埋點和手動埋點結合。主要用無埋點獲取設備的基礎訊息，用手動埋點來讓開發者獲取自訂事件。例如對於簡單的獲取用戶信息，基本事件，可以使用無埋點解決；而對於需要攜帶大量運行時才可獲知的業務字段的埋點需求，就需要手動埋點來解決。
參考: