前端埋点
在線上項(xiàng)目中，需要統(tǒng)計(jì)產(chǎn)品中用戶行為和使用情況，從而可以從用戶和產(chǎn)品的角度去了解用戶群體，從而升級(jí)和迭代產(chǎn)品，使其更加貼近用戶。用戶行為數(shù)據(jù)可以通過(guò)前端數(shù)據(jù)監(jiān)控的方式獲得，除此之外，前端還需要實(shí)現(xiàn)性能監(jiān)控和異常監(jiān)控。性能監(jiān)控包括首屏加載時(shí)間、白屏?xí)r間、http請(qǐng)求時(shí)間和http相應(yīng)時(shí)間。異常監(jiān)控包括前端腳本執(zhí)行報(bào)錯(cuò)等。
實(shí)現(xiàn)前端監(jiān)控有三個(gè)步驟：前端埋點(diǎn)和上報(bào)、數(shù)據(jù)處理和數(shù)據(jù)分析。
1、為什么需要前端監(jiān)控
2、常用前端埋點(diǎn)方案總結(jié)
3、前端埋點(diǎn)方案選型和前端上報(bào)方案統(tǒng)計(jì)
4、前端監(jiān)控結(jié)果可視化展示系統(tǒng)的設(shè)計(jì)
為什么需要前端監(jiān)控
前端監(jiān)控的目的是：獲取用戶行為以及跟蹤產(chǎn)品在用戶端的使用情況，并以監(jiān)控?cái)?shù)據(jù)為基礎(chǔ)，指明產(chǎn)品優(yōu)化的方向。
前端監(jiān)控可以分為三類：數(shù)據(jù)監(jiān)控、性能監(jiān)控和異常監(jiān)控
數(shù)據(jù)監(jiān)控：
監(jiān)聽(tīng)用戶的行為，常見(jiàn)的數(shù)據(jù)監(jiān)控包括：
PV/UV：PV（pageview）即頁(yè)面瀏覽量或點(diǎn)擊量。UV：指訪問(wèn)某個(gè)站點(diǎn)或點(diǎn)擊某條新聞的不同ip地址的人數(shù)
用戶在每一個(gè)頁(yè)面的停留時(shí)間
用戶通過(guò)什么入口來(lái)訪問(wèn)該頁(yè)面
用戶在相應(yīng)的頁(yè)面中出發(fā)的行為
統(tǒng)計(jì)這些數(shù)據(jù)是有意義的，比如我們知道了用戶來(lái)源的渠道，可以促進(jìn)產(chǎn)品的推廣，知道用戶在每一個(gè)頁(yè)面停留的時(shí)間，可以針對(duì)停留較長(zhǎng)的頁(yè)面，增加廣告推送等
性能監(jiān)控：監(jiān)聽(tīng)前端的性能，只要包括監(jiān)聽(tīng)網(wǎng)頁(yè)或者說(shuō)產(chǎn)品在用戶端的體驗(yàn)。常見(jiàn)的性能監(jiān)控?cái)?shù)據(jù)包括：
不同用戶，不用機(jī)型和不同系統(tǒng)下的運(yùn)行時(shí)間
白屏?xí)r間，
http等請(qǐng)求的響應(yīng)時(shí)間
頁(yè)面渲染時(shí)間
頁(yè)面交互動(dòng)畫(huà)完成時(shí)間
這些性能監(jiān)控的結(jié)果，可以展示前端性能的好壞，根據(jù)性能檢測(cè)的結(jié)果可以進(jìn)一步的去優(yōu)化前端性能，比如兼容低版本瀏覽器的動(dòng)畫(huà)效果，加快首屏加載等
異常監(jiān)控
此外，產(chǎn)品的前端代碼在執(zhí)行過(guò)程中也會(huì)發(fā)生異常，因此需要引入異常監(jiān)控。及時(shí)的上報(bào)異常情況，可以避免線上故障的發(fā)生。雖然發(fā)部分的異常可以通過(guò)trycatch的方式捕獲，但是比如內(nèi)存泄漏以及其他偶現(xiàn)的異常難以捕獲。
常見(jiàn)的需要監(jiān)控的異常：
JavaScript的異常監(jiān)控
樣式丟失的異常監(jiān)控
常用前端埋點(diǎn)方案總結(jié)
實(shí)現(xiàn)前端監(jiān)控的步驟為：前端埋點(diǎn)和上報(bào)、數(shù)據(jù)數(shù)據(jù)和數(shù)據(jù)分析
首要的步驟就是前端埋點(diǎn)和上報(bào)，也就是數(shù)據(jù)的收集階段。數(shù)據(jù)收集的豐富性和準(zhǔn)確性會(huì)影響對(duì)產(chǎn)品線上效果的判別結(jié)果
目前常見(jiàn)的前端埋點(diǎn)方法分為三種：代碼埋點(diǎn)、可視化埋點(diǎn)、無(wú)痕埋點(diǎn)
代碼埋點(diǎn)：
以嵌入代碼的形式進(jìn)行埋點(diǎn)，比如需要監(jiān)控用戶的點(diǎn)擊事件，會(huì)選擇在用戶點(diǎn)擊時(shí)，插入一段代碼，保存這個(gè)監(jiān)聽(tīng)行為或者直接將監(jiān)聽(tīng)行為以某一種數(shù)據(jù)格式直接傳遞給server端。此外如果需要統(tǒng)計(jì)產(chǎn)品的PV和UV的時(shí)候，需要在網(wǎng)頁(yè)初始化時(shí)，發(fā)送用戶的訪問(wèn)信息等
代碼埋點(diǎn)的優(yōu)點(diǎn)和缺點(diǎn)：
優(yōu)點(diǎn)：可以在任意時(shí)刻，精確的發(fā)送或保存所需要的數(shù)據(jù)信息
缺點(diǎn)：工作量較大，每一個(gè)組件的埋點(diǎn)都需要添加相應(yīng)的代碼
可視化埋點(diǎn)：
通過(guò)可視化交互的手段，代替代碼埋點(diǎn)。將業(yè)務(wù)代碼和埋點(diǎn)代碼分離，提供一個(gè)可視化交互的頁(yè)面，輸入為業(yè)務(wù)代碼，通過(guò)這個(gè)可視化系統(tǒng)，可以在業(yè)務(wù)代碼中自定義的增加埋點(diǎn)事件等，最后輸出的代碼耦合了業(yè)務(wù)代碼和埋點(diǎn)代碼
可視化埋點(diǎn)聽(tīng)起來(lái)比較高大上實(shí)際上和代碼埋點(diǎn)還是區(qū)別不大，也就是用一個(gè)系統(tǒng)來(lái)實(shí)現(xiàn)手動(dòng)插入代碼埋點(diǎn)的過(guò)程
缺點(diǎn)：可以埋點(diǎn)的控件有限，不能手動(dòng)定制
無(wú)埋點(diǎn)：
無(wú)埋點(diǎn)并不是不需要埋點(diǎn)，而是全部埋點(diǎn)，前端的任意一個(gè)事件都被綁定一個(gè)標(biāo)識(shí)，所有的事件都被記錄下來(lái)，通過(guò)定期上傳記錄文件，配合文件解析，解析出來(lái)我們想要的數(shù)據(jù)，并生成可視化報(bào)告供專業(yè)人員分析因此實(shí)現(xiàn)“無(wú)埋點(diǎn)”統(tǒng)計(jì)
從語(yǔ)言層面實(shí)現(xiàn)無(wú)埋點(diǎn)也很簡(jiǎn)單，比如從頁(yè)面的js代碼中，找出dom上被綁定的事件，然后進(jìn)行全埋點(diǎn)。
優(yōu)點(diǎn)：
由于采集的是全量數(shù)據(jù)，所以產(chǎn)品迭代過(guò)程中是不需要關(guān)注埋點(diǎn)邏輯的，也不會(huì)出現(xiàn)漏埋、誤埋等現(xiàn)象
缺點(diǎn)：
無(wú)埋點(diǎn)采集全量數(shù)據(jù)，給數(shù)據(jù)傳輸和服務(wù)器增加壓力
無(wú)法靈活的定制各個(gè)事件所要上傳的數(shù)據(jù)
前端埋點(diǎn)方案選型和前端上報(bào)方案設(shè)計(jì)
監(jiān)控?cái)?shù)據(jù)：
首先我們需要明確一個(gè)產(chǎn)品或網(wǎng)頁(yè)，普遍需要監(jiān)控和上報(bào)的數(shù)據(jù)。監(jiān)控的分為三個(gè)階段：用戶進(jìn)入網(wǎng)頁(yè)，用戶在網(wǎng)頁(yè)中交互和交互中報(bào)錯(cuò)。每一個(gè)階段需要監(jiān)控和上報(bào)的數(shù)據(jù)如下圖所示：
埋點(diǎn)方案：
在實(shí)際項(xiàng)目中考慮到上報(bào)數(shù)據(jù)的靈活控制，以及減少數(shù)據(jù)傳輸和服務(wù)器的壓力，在所需要埋點(diǎn)處不多的情況下，常用的方式是代碼埋點(diǎn)
以用戶進(jìn)入首頁(yè)為例，我們?cè)谑醉?yè)渲染完成后會(huì)發(fā)送事件類型和類型相關(guān)的數(shù)據(jù)給server端，告知首頁(yè)的監(jiān)控信息。
上報(bào)周期和上報(bào)數(shù)據(jù)類型
如果埋點(diǎn)的事件不是很多，上報(bào)可以實(shí)時(shí)進(jìn)行，比如監(jiān)控用戶的交互事件，可以在用戶觸發(fā)事件后，立刻上報(bào)用戶所觸發(fā)的事件類型。如果埋點(diǎn)的事件較多，或者說(shuō)網(wǎng)頁(yè)內(nèi)部交互頻繁，可以通過(guò)本地存儲(chǔ)的方式先緩存上報(bào)信息，然后定期上報(bào)
接著來(lái)確定需要埋點(diǎn)上報(bào)的數(shù)據(jù)，上報(bào)的信息包括用戶個(gè)人信息以及用戶行為，主要數(shù)據(jù)可以分為：
who：appid（系統(tǒng)或應(yīng)用的id），useragent（用戶的系統(tǒng)、網(wǎng)絡(luò)等信息）
when：timestamp（上報(bào)的時(shí)間戳）
fromwhere：currentUrl（用戶當(dāng)前url），fromUrl（從哪一個(gè)頁(yè)面跳轉(zhuǎn)到當(dāng)前頁(yè)面），type（上報(bào)的事件類型），element（觸發(fā)上報(bào)事件的元素）
what：上報(bào)的自定義擴(kuò)展數(shù)據(jù)data:{}，擴(kuò)展數(shù)據(jù)中可以按需求定制，比如包含uid等信息
上報(bào)數(shù)據(jù)的對(duì)象為：
{
//上報(bào)接口本身提供
currentUrl,
fromUrl,
timestamp,
userAgent:{os, netWork}
//業(yè)務(wù)代碼配置和自定義上報(bào)數(shù)據(jù)
type,
aooid,
element,
data:{uid, uname}
}
埋點(diǎn)和上報(bào)舉例：
以上報(bào)首屏加載時(shí)間為例，DOM提供了document的DOMContentLoaded事件來(lái)監(jiān)聽(tīng)dom掛載，提供了window的load事件來(lái)監(jiān)聽(tīng)頁(yè)面所有資源加載渲染完畢
前端埋點(diǎn)系統(tǒng)的前后端通信加密：
在上報(bào)數(shù)據(jù)的前后端通信中，需要和server端協(xié)商加密機(jī)制，利用OpenSSL庫(kù)來(lái)實(shí)現(xiàn)的加密，OpenSSL已經(jīng)是一個(gè)廣泛的加密算法，前端采用node的crypto模塊
首先來(lái)看hash算法，crypto.createHash()來(lái)創(chuàng)建一個(gè)Hash實(shí)例，可以利用的hash算法如下：
md5
sha1
sha256
sha512
ripemd160
以sha256算法為例：
const str='12345' 需要加密的字段
const hash=crypto.createHash('sha256') 指定加密算法
hash.update(str) 通過(guò)算法價(jià)目相應(yīng)的字段
const result=hash.digest('hex')轉(zhuǎn)化成十六進(jìn)制
前端監(jiān)控結(jié)果可視化展示系統(tǒng)的設(shè)計(jì)
當(dāng)后端得知上報(bào)的信息后，經(jīng)過(guò)數(shù)據(jù)分析和處理，需要前端可視化的展示數(shù)據(jù)分析后的結(jié)果
可以在開(kāi)源系統(tǒng)ant-design-pro的基礎(chǔ)上進(jìn)行二次開(kāi)發(fā)，首先要明確展示信息。展示的信息包括單個(gè)用戶的整體應(yīng)用
對(duì)于單個(gè)用戶來(lái)說(shuō)需要展示的監(jiān)控信息為：
單個(gè)用戶，在交互過(guò)程中觸發(fā)各個(gè)埋點(diǎn)事件的次數(shù)
單個(gè)用戶，在某個(gè)時(shí)間周期內(nèi)，訪問(wèn)本網(wǎng)頁(yè)的入口來(lái)源
單個(gè)用戶，在每個(gè)子頁(yè)面的停留時(shí)間
對(duì)于全體用戶需要展示的信息為：
某一個(gè)時(shí)間段內(nèi)網(wǎng)頁(yè)的PV和UV
全體用戶訪問(wèn)網(wǎng)頁(yè)的設(shè)備和操作系統(tǒng)分析
某一個(gè)時(shí)間段內(nèi)訪問(wèn)本網(wǎng)頁(yè)的入口來(lái)源分析
全體用戶在訪問(wèn)本網(wǎng)頁(yè)時(shí)，在交互過(guò)程中觸發(fā)各個(gè)埋點(diǎn)事件的總次數(shù)
全體用戶在訪問(wèn)本網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)上報(bào)異常的集合
篩選功能集合：
時(shí)間篩選：提供今日（0點(diǎn)到當(dāng)前時(shí)間），本周，本月，本年
用戶篩選：提供根據(jù)用戶id篩選出用戶行為的統(tǒng)計(jì)信息
設(shè)備篩選：篩選不同系統(tǒng)的整體展示信息
總結(jié)
- 上一篇： mongodb官方gui连接工具mong
- 下一篇： jasypt-spring-boot