js前端埋點監控解析

一、為什麼需要埋點&監控

在開始正文之前，我們先想想為什麼需要埋點&監控？

當我們在分析覆盤一個產品是否成功的時候，不同的角色考慮的方向是不同的。

站在產品的視角，經常會問如下幾個問題：

1.產品有沒有使用者使用

2.使用者用得怎麼樣

3.系統會不會經常出現異常

4.如何更好地滿足使用者需求服務使用者

當站在技術視角時，經常會問如下幾個問題：

1.系統出現異常的頻率如何

2.異常出現後如何快速進行定位追蹤

3.如何分析解決問題

而當站在老闆的視角時，問題可能又會變為：

1.我的存量使用者多少，未來還有多少潛力

2.多少使用者在系統內進行了消費

當在回答了上述問題之後，埋點&監控便躍然紙上。因為要回答以上問題，只有通過對系統進行資料分析的方式才能弄清楚。

其實無論是埋點亦或是監控，二者並不是獨立存在，而是相互依存的關係。

二、埋點&監控能做什麼

從單個頁面的常規資料角度出發我們可以通過埋點獲取：存取次數（UV/PV）、地域資料（IP）、線上時長、區域點選次數等資料。

當我們將這些單點資料按照特定的緯度進行資料聚合，就可以獲得全流程視角下的資料如：使用者留存率/流轉率、使用者轉化率、使用者存取深度等資料。

而在埋點資料進行上報的同時，我們也可以同步收集頁面基礎資料/介面相關資料如：頁面載入/渲染時長、頁面異常、請求介面等資料。

同時對於前端監控來說，大致可以分成三個方向：資料監控、效能監控、異常監控。

資料監控

資料監控即通過資料分析使用者行為，常見的監控資料包括：PV/UV、頁面停留時長、通過什麼入口進入、在頁面觸發了什麼行為等。統計這些資料就是為了清楚使用者來源，拓寬產品的推廣渠道；瞭解使用者在頁面停留的時間情況，針對停留較短的頁面進行分析改進。也就是我們常說的：who(uuid)、when(time)、from where(referrer)、where(x,y)、what(自定義拓展資料)串成的使用者行為路徑。

效能監控

效能監控主要是針對前端進行監控，比如不同使用者在不同地區使用不同機型下的首屏載入時間、頁面的白屏時間、靜態資源下載時間等資料。通過針對這些效能資料進行監控，可以大概反映前端效能的好壞，根據效能監測的結果可以進一步的去優化前端效能。

異常監控

前端程式碼在執行過程中也可能會發生異常，因此需要引入異常監控例如 sentry 等工具及時的上報異常情況，可以避免線上故障的發上。常見的異常包括：Javascript 的異常監控、css 的異常監控等。

三、目前埋點方案&後續演進方向

現有方案

目前公司已經存在一套埋點 SDK 在執行，使用的是程式碼埋點方案，其埋點上報資料可大致分為三類：頁面進入、事件觸發、頁面離開。

(1) 頁面進入(pageIn)

進入頁面時，同步推播頁面基礎資訊如：當前頁面的來源頁面、作業系統、瀏覽器、頁面 url，發生時間等

(2) 事件觸發(Event)

觸發事件時，同步推播事件型別(click、hover等)、滑鼠位置、附加業務引數等

(3) 頁面離開(pageOut)

離開頁面時，同步推播發生時間、頁面 url 等

其埋點大致邏輯如下圖，通過生成獨有的四段值+pvid即可定位某個專案的某個頁面在某個區塊點選了某個按鈕，同時生成唯一的 pvid 記錄頁面的 pv 資料。具體說明可翻閱往期關於政採雲埋點分析系統的文章。

後續演進

在現有 SDK 的基礎上我們可以發現，目前的埋點 SDK 只上報了一些使用者的基礎資訊資料，在效能資料和異常資料的上報上還存在可拓展的空間。

(1) 效能資料上報

在獲取使用者基礎資料的同時，後續可以通過window.performanceAPI獲取前端效能資料，在第一次進入頁面時隨 pageIn 一起將頁面初始效能資料進行上報。

可進行上報的欄位包含如下：

(2) 介面資料上報

除了上報效能資料外，我們也可將頁面內所發的所有請求通過重寫XMLHttpRequest進行劫持打標上報，即在當前頁面下的所有請求 header 上預設加上當前頁面 ID，將各個請求與當前頁面的 pageId 進行繫結。

通過該類資料可以進行統計分析出某一頁面的請求量、請求異常等情況判斷出頁面級別的請求健康度；後期甚至可與 Yapi 介面系統打通，若出現異常情況可直接將實際請求引數與檔案上的請求引數進行對比，排除異常是由於請求引數錯誤造成的。

四、前端資料視覺化

對於已經採集上來的資料經由數倉清洗之後的視覺化玩法就千變萬化了。可以針對不同後設資料按不同指標緯度聚合，產生不同的資料分析側重點。再通過各類視覺化工具進行展示，例如：混儀系統、小採BI等。

混儀系統

混儀系統(內部系統)主要針對埋點進行後設資料後臺管理，推進埋點平臺的規範化建設。同時在此基礎上，優化資料分析功能，為公司內部使用者提供埋點資料自助分析平臺，提升資料利用率和日常工作效率。

小採BI

小採BI是視覺化團隊內部搭建系統，分為報表搭建、大屏搭建和看板搭建等模組。通過內部這些搭建工具直接對後設資料進行展示，組合成面向不同受眾、不同角色的自定義資料包表或監控大屏等。

五、結語

本文只是針對埋點系統和監控系統的融合的一點簡單的介紹與探索，實際操作落地上肯定會有各種問題。比如多端情況下的資料埋點&上報，比如手動埋點增加了工作量破壞了原有程式碼的可讀性等一系列實操上的問題，這些都需要逐步完善優化，同時我們也希望各位讀者提出自己意見和建議，一起完善埋點&監控的大生態。

以上就是js前端埋點監控解析的詳細內容，更多關於js前端埋點監控的資料請關注it145.com其它相關文章！