一、為什么需要埋點(diǎn)&監(jiān)控

在開始正文之前，我們先想想為什么需要埋點(diǎn)&監(jiān)控？

當(dāng)我們?cè)诜治鰪?fù)盤一個(gè)產(chǎn)品是否成功的時(shí)候，不同的角色考慮的方向是不同的。

站在產(chǎn)品的視角，經(jīng)常會(huì)問如下幾個(gè)問題：

• 1.產(chǎn)品有沒有用戶使用
• 2.用戶用得怎么樣
• 3.系統(tǒng)會(huì)不會(huì)經(jīng)常出現(xiàn)異常
• 4.如何更好地滿足用戶需求服務(wù)用戶

當(dāng)站在技術(shù)視角時(shí)，經(jīng)常會(huì)問如下幾個(gè)問題：

• 1.系統(tǒng)出現(xiàn)異常的頻率如何
• 2.異常出現(xiàn)后如何快速進(jìn)行定位追蹤
• 3.如何分析解決問題

而當(dāng)站在老板的視角時(shí)，問題可能又會(huì)變?yōu)椋?/p>

• 1.我的存量用戶多少，未來還有多少潛力
• 2.多少用戶在系統(tǒng)內(nèi)進(jìn)行了消費(fèi)

當(dāng)在回答了上述問題之后，埋點(diǎn)&監(jiān)控便躍然紙上。因?yàn)橐卮鹨陨蠁栴}，只有通過對(duì)系統(tǒng)進(jìn)行數(shù)據(jù)分析的方式才能弄清楚。

其實(shí)無論是埋點(diǎn)亦或是監(jiān)控，二者并不是獨(dú)立存在，而是相互依存的關(guān)系。

二、埋點(diǎn)&監(jiān)控能做什么

從單個(gè)頁面的常規(guī)數(shù)據(jù)角度出發(fā)我們可以通過埋點(diǎn)獲?。涸L問次數(shù)（UV/PV）、地域數(shù)據(jù)（IP）、在線時(shí)長、區(qū)域點(diǎn)擊次數(shù)等數(shù)據(jù)。

當(dāng)我們將這些單點(diǎn)數(shù)據(jù)按照特定的緯度進(jìn)行數(shù)據(jù)聚合，就可以獲得全流程視角下的數(shù)據(jù)如：用戶留存率/流轉(zhuǎn)率、用戶轉(zhuǎn)化率、用戶訪問深度等數(shù)據(jù)。

而在埋點(diǎn)數(shù)據(jù)進(jìn)行上報(bào)的同時(shí)，我們也可以同步收集頁面基礎(chǔ)數(shù)據(jù)/接口相關(guān)數(shù)據(jù)如：頁面加載/渲染時(shí)長、頁面異常、請(qǐng)求接口等數(shù)據(jù)。

同時(shí)對(duì)于前端監(jiān)控來說，大致可以分成三個(gè)方向：數(shù)據(jù)監(jiān)控、性能監(jiān)控、異常監(jiān)控。

數(shù)據(jù)監(jiān)控

數(shù)據(jù)監(jiān)控即通過數(shù)據(jù)分析用戶行為，常見的監(jiān)控?cái)?shù)據(jù)包括：PV/UV、頁面停留時(shí)長、通過什么入口進(jìn)入、在頁面觸發(fā)了什么行為等。統(tǒng)計(jì)這些數(shù)據(jù)就是為了清楚用戶來源，拓寬產(chǎn)品的推廣渠道；了解用戶在頁面停留的時(shí)間情況，針對(duì)停留較短的頁面進(jìn)行分析改進(jìn)。也就是我們常說的：who(uuid)、when(time)、from where(referrer)、where(x,y)、what(自定義拓展數(shù)據(jù))串成的用戶行為路徑。

性能監(jiān)控

性能監(jiān)控主要是針對(duì)前端進(jìn)行監(jiān)控，比如不同用戶在不同地區(qū)使用不同機(jī)型下的首屏加載時(shí)間、頁面的白屏?xí)r間、靜態(tài)資源下載時(shí)間等數(shù)據(jù)。通過針對(duì)這些性能數(shù)據(jù)進(jìn)行監(jiān)控，可以大概反映前端性能的好壞，根據(jù)性能監(jiān)測(cè)的結(jié)果可以進(jìn)一步的去優(yōu)化前端性能。

異常監(jiān)控

前端代碼在執(zhí)行過程中也可能會(huì)發(fā)生異常，因此需要引入異常監(jiān)控例如 sentry 等工具及時(shí)的上報(bào)異常情況，可以避免線上故障的發(fā)上。常見的異常包括：Javascript 的異常監(jiān)控、css 的異常監(jiān)控等。

三、目前埋點(diǎn)方案&后續(xù)演進(jìn)方向

現(xiàn)有方案

目前公司已經(jīng)存在一套埋點(diǎn) SDK 在運(yùn)行，使用的是代碼埋點(diǎn)方案，其埋點(diǎn)上報(bào)數(shù)據(jù)可大致分為三類：頁面進(jìn)入、事件觸發(fā)、頁面離開。

(1) 頁面進(jìn)入(pageIn)

進(jìn)入頁面時(shí)，同步推送頁面基礎(chǔ)信息如：當(dāng)前頁面的來源頁面、操作系統(tǒng)、瀏覽器、頁面 url，發(fā)生時(shí)間等

(2) 事件觸發(fā)(Event)

觸發(fā)事件時(shí)，同步推送事件類型(click、hover等)、鼠標(biāo)位置、附加業(yè)務(wù)參數(shù)等

(3) 頁面離開(pageOut)

離開頁面時(shí)，同步推送發(fā)生時(shí)間、頁面 url 等

其埋點(diǎn)大致邏輯如下圖，通過生成獨(dú)有的四段值+pvid即可定位某個(gè)項(xiàng)目的某個(gè)頁面在某個(gè)區(qū)塊點(diǎn)擊了某個(gè)按鈕，同時(shí)生成唯一的 pvid 記錄頁面的 pv 數(shù)據(jù)。具體說明可翻閱往期關(guān)于政采云埋點(diǎn)分析系統(tǒng)的文章。

后續(xù)演進(jìn)

在現(xiàn)有 SDK 的基礎(chǔ)上我們可以發(fā)現(xiàn)，目前的埋點(diǎn) SDK 只上報(bào)了一些用戶的基礎(chǔ)信息數(shù)據(jù)，在性能數(shù)據(jù)和異常數(shù)據(jù)的上報(bào)上還存在可拓展的空間。

(1) 性能數(shù)據(jù)上報(bào)

在獲取用戶基礎(chǔ)數(shù)據(jù)的同時(shí)，后續(xù)可以通過window.performanceAPI獲取前端性能數(shù)據(jù)，在第一次進(jìn)入頁面時(shí)隨 pageIn 一起將頁面初始性能數(shù)據(jù)進(jìn)行上報(bào)。

可進(jìn)行上報(bào)的字段包含如下：

(2) 接口數(shù)據(jù)上報(bào)

除了上報(bào)性能數(shù)據(jù)外，我們也可將頁面內(nèi)所發(fā)的所有請(qǐng)求通過重寫XMLHttpRequest進(jìn)行劫持打標(biāo)上報(bào)，即在當(dāng)前頁面下的所有請(qǐng)求 header 上默認(rèn)加上當(dāng)前頁面 ID，將各個(gè)請(qǐng)求與當(dāng)前頁面的 pageId 進(jìn)行綁定。

通過該類數(shù)據(jù)可以進(jìn)行統(tǒng)計(jì)分析出某一頁面的請(qǐng)求量、請(qǐng)求異常等情況判斷出頁面級(jí)別的請(qǐng)求健康度；后期甚至可與 Yapi 接口系統(tǒng)打通，若出現(xiàn)異常情況可直接將實(shí)際請(qǐng)求參數(shù)與文檔上的請(qǐng)求參數(shù)進(jìn)行對(duì)比，排除異常是由于請(qǐng)求參數(shù)錯(cuò)誤造成的。

四、前端數(shù)據(jù)可視化

對(duì)于已經(jīng)采集上來的數(shù)據(jù)經(jīng)由數(shù)倉清洗之后的可視化玩法就千變?nèi)f化了?？梢葬槍?duì)不同元數(shù)據(jù)按不同指標(biāo)緯度聚合，產(chǎn)生不同的數(shù)據(jù)分析側(cè)重點(diǎn)。再通過各類可視化工具進(jìn)行展示，例如：混儀系統(tǒng)、小采BI等。

混儀系統(tǒng)

混儀系統(tǒng)(內(nèi)部系統(tǒng))主要針對(duì)埋點(diǎn)進(jìn)行元數(shù)據(jù)后臺(tái)管理，推進(jìn)埋點(diǎn)平臺(tái)的規(guī)范化建設(shè)。同時(shí)在此基礎(chǔ)上，優(yōu)化數(shù)據(jù)分析功能，為公司內(nèi)部用戶提供埋點(diǎn)數(shù)據(jù)自助分析平臺(tái)，提升數(shù)據(jù)利用率和日常工作效率。

小采BI

小采BI是可視化團(tuán)隊(duì)內(nèi)部搭建系統(tǒng)，分為報(bào)表搭建、大屏搭建和看板搭建等模塊。通過內(nèi)部這些搭建工具直接對(duì)元數(shù)據(jù)進(jìn)行展示，組合成面向不同受眾、不同角色的自定義數(shù)據(jù)報(bào)表或監(jiān)控大屏等。

結(jié)語

本文只是針對(duì)埋點(diǎn)系統(tǒng)和監(jiān)控系統(tǒng)的融合的一點(diǎn)簡單的介紹與探索，實(shí)際操作落地上肯定會(huì)有各種問題。比如多端情況下的數(shù)據(jù)埋點(diǎn)&上報(bào)，比如手動(dòng)埋點(diǎn)增加了工作量破壞了原有代碼的可讀性等一系列實(shí)操上的問題，這些都需要逐步完善優(yōu)化，同時(shí)我們也希望各位讀者提出自己意見和建議，一起完善埋點(diǎn)&監(jiān)控的大生態(tài)。

以上就是js前端埋點(diǎn)監(jiān)控解析的詳細(xì)內(nèi)容，更多關(guān)于js前端埋點(diǎn)監(jiān)控的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論