js前端埋點監控是什么

蝸牛 互聯網技術資訊 2022-07-02 37 0

這篇文章主要介紹“js前端埋點監控是什么”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“js前端埋點監控是什么”文章能幫助大家解決問題。

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

在開始正文之前,我們先想想為什么需要埋點&監控?

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

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

1.產品有沒有用戶使用

2.用戶用得怎么樣

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

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

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

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

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

3.如何分析解決問題

而當站在老板的視角時,問題可能又會變為:

1.我的存量用戶多少,未來還有多少潛力

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

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

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

二、埋點&監控能做什么

從單個頁面的常規數據角度出發我們可以通過埋點獲?。涸L問次數(UV/PV)、地域數據(IP)、在線時長、區域點擊次數等數據。

當我們將這些單點數據按照特定的緯度進行數據聚合,就可以獲得全流程視角下的數據如:用戶留存率/流轉率、用戶轉化率、用戶訪問深度等數據。

而在埋點數據進行上報的同時,我們也可以同步收集頁面基礎數據/接口相關數據如:頁面加載/渲染時長、頁面異常、請求接口等數據。

同時對于前端監控來說,大致可以分成三個方向:數據監控、性能監控、異常監控。

數據監控

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

性能監控

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

異常監控

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

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

現有方案

目前公司已經存在一套埋點 SDK 在運行,使用的是代碼埋點方案,其埋點上報數據可大致分為三類:頁面進入、事件觸發、頁面離開。

(1) 頁面進入(pageIn)

進入頁面時,同步推送頁面基礎信息如:當前頁面的來源頁面、操作系統、瀏覽器、頁面 url,發生時間等

js前端埋點監控是什么  js 第1張

(2) 事件觸發(Event)

觸發事件時,同步推送事件類型(click、hover等)、鼠標位置、附加業務參數等

js前端埋點監控是什么  js 第2張

(3) 頁面離開(pageOut)

離開頁面時,同步推送發生時間、頁面 url 等

js前端埋點監控是什么  js 第3張

其埋點大致邏輯如下圖,通過生成獨有的四段值+pvid即可定位某個項目的某個頁面在某個區塊點擊了某個按鈕,同時生成唯一的 pvid 記錄頁面的 pv 數據。具體說明可翻閱往期關于政采云埋點分析系統的文章。

js前端埋點監控是什么  js 第4張

后續演進

在現有 SDK 的基礎上我們可以發現,目前的埋點 SDK 只上報了一些用戶的基礎信息數據,在性能數據和異常數據的上報上還存在可拓展的空間。

(1) 性能數據上報

在獲取用戶基礎數據的同時,后續可以通過window.performanceAPI獲取前端性能數據,在第一次進入頁面時隨 pageIn 一起將頁面初始性能數據進行上報。

js前端埋點監控是什么  js 第5張

可進行上報的字段包含如下:

js前端埋點監控是什么  js 第6張

(2) 接口數據上報

除了上報性能數據外,我們也可將頁面內所發的所有請求通過重寫XMLHttpRequest進行劫持打標上報,即在當前頁面下的所有請求 header 上默認加上當前頁面 ID,將各個請求與當前頁面的 pageId 進行綁定。

通過該類數據可以進行統計分析出某一頁面的請求量、請求異常等情況判斷出頁面級別的請求健康度;后期甚至可與 Yapi 接口系統打通,若出現異常情況可直接將實際請求參數與文檔上的請求參數進行對比,排除異常是由于請求參數錯誤造成的。

js前端埋點監控是什么  js 第7張

四、前端數據可視化

對于已經采集上來的數據經由數倉清洗之后的可視化玩法就千變萬化了??梢葬槍Σ煌獢祿床煌笜司暥染酆?,產生不同的數據分析側重點。再通過各類可視化工具進行展示,例如:混儀系統、小采BI等。

混儀系統

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

小采BI

小采BI是可視化團隊內部搭建系統,分為報表搭建、大屏搭建和看板搭建等模塊。通過內部這些搭建工具直接對元數據進行展示,組合成面向不同受眾、不同角色的自定義數據報表或監控大屏等。

關于“js前端埋點監控是什么”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注蝸牛博客行業資訊頻道,小編每天都會為大家更新不同的知識點。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看