只有了解用戶，我們才能服務(wù)好用戶，而最接近用戶的我們，自然要承擔(dān)起更多的責(zé)任。

那么在一個(gè)企業(yè)中，我們要如何去了解用戶呢？
最直接有效的方式就是了解用戶的行為，了解用戶在網(wǎng)站中做了什么，呆了多久。
而如何去實(shí)現(xiàn)這一操作，這就涉及到我們前端的埋點(diǎn)了。

埋點(diǎn)方式

在聊如何進(jìn)行埋點(diǎn)前，我們先介紹下什么是埋點(diǎn)？

所謂'埋點(diǎn)'是數(shù)據(jù)采集領(lǐng)域（尤其是用戶行為數(shù)據(jù)采集領(lǐng)域）的術(shù)語，指的是針對特定用戶行為或事件進(jìn)行捕獲、處理和發(fā)送的相關(guān)技術(shù)及其實(shí)施過程。. 比如用戶某個(gè)icon點(diǎn)擊次數(shù)、觀看某個(gè)視頻的時(shí)長等等。
從數(shù)據(jù)產(chǎn)品經(jīng)理視角，聊聊埋點(diǎn)的意義 | 人人都是產(chǎn)品經(jīng)理 (woshipm.com)[1]

基于此我們可以知道埋點(diǎn)是實(shí)際上是對特定事件或者行為的數(shù)據(jù)監(jiān)控和上報(bào)，常見的埋點(diǎn)上報(bào)方式有ajax，img，navigator.sendBeacon下面介紹下這三種埋點(diǎn)上報(bào)方式

基于ajax的埋點(diǎn)上報(bào)

介紹

因?yàn)槁顸c(diǎn)實(shí)際上是對關(guān)鍵節(jié)點(diǎn)的數(shù)據(jù)進(jìn)行上報(bào)是和服務(wù)端交互的一個(gè)過程，所以我們可以和后端約定一個(gè)接口通過ajax去進(jìn)行數(shù)據(jù)上報(bào)。

我們可以封裝一個(gè)方法，代碼如下：

使用時(shí)，直接調(diào)用即可

缺點(diǎn)

一般而言，埋點(diǎn)域名并不是當(dāng)前域名，因此請求會存在跨域風(fēng)險(xiǎn)，且如果ajax配置不正確可能會瀏覽器攔截。因此使用ajax這類請求并不是萬全之策。

基于img的埋點(diǎn)上報(bào)

上面可以看到如果使用ajax的話，會存在跨域的問題。而且數(shù)據(jù)上報(bào)前端主要是負(fù)責(zé)將數(shù)據(jù)傳遞到后端，并不過分強(qiáng)調(diào)前后端交互。
因此我們可以通過一些支持跨域的標(biāo)簽去實(shí)現(xiàn)數(shù)據(jù)上報(bào)功能。

script，link，img就是我們上報(bào)的數(shù)據(jù)的最好對象

先說結(jié)論，這里推薦使用img標(biāo)簽去實(shí)現(xiàn)。

script及l(fā)ink的缺陷

因?yàn)槁顸c(diǎn)涉及到請求，因此我們需要保證script和link標(biāo)簽的src可以正常請求。
如果需要請求script和link，我們需要將標(biāo)簽掛載到頁面上。

驗(yàn)證缺陷

不妨驗(yàn)證下，我們在管理臺中加入以下代碼：

創(chuàng)建一個(gè)script標(biāo)簽，未掛載中頁面上，并不會發(fā)起請求

書接上文，當(dāng)我們將這個(gè)標(biāo)簽掛載中頁面上時(shí)：

這時(shí)發(fā)起了請求

結(jié)論

當(dāng)我們使用script和link進(jìn)行埋點(diǎn)上報(bào)時(shí)，需要掛載到頁面上，而反復(fù)操作dom會造成頁面性能受影響，而且載入js/css資源還會阻塞頁面渲染，影響用戶體驗(yàn)，因此對于需要頻繁上報(bào)的埋點(diǎn)而言，script和link并不合適。

基于img做埋點(diǎn)上報(bào)

通常使用img標(biāo)簽去做埋點(diǎn)上報(bào)，img標(biāo)簽加載并不需要掛載到頁面上，基于js去new image()，設(shè)置其src之后就可以直接請求圖片。

驗(yàn)證img優(yōu)勢

控制臺去創(chuàng)建一個(gè)image標(biāo)簽，如下：

可以看到即便未被掛載到頁面上依舊發(fā)起了請求。

結(jié)論

因此當(dāng)我們做埋點(diǎn)上報(bào)時(shí)，使用img是一個(gè)不錯(cuò)的選擇。

1. img兼容性好

2. 無需掛載到頁面上，反復(fù)操作dom

3. img的加載不會阻塞html的解析，但img加載后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出來

注：通常埋點(diǎn)上報(bào)會使用gif圖，合法的 GIF?只需要 43 個(gè)字節(jié)

基于Navigator.sendBeacon的埋點(diǎn)上報(bào)

Navigator.sendBeacon是目前通用的埋點(diǎn)上報(bào)方案，Navigator.sendBeacon方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是目標(biāo)服務(wù)器的 URL，第二個(gè)參數(shù)是所要發(fā)送的數(shù)據(jù)（可選），可以是任意類型（字符串、表單對象、二進(jìn)制對象等等）。

介紹

navigator.sendBeacon()??方法可用于通過?HTTP POST[2]?將少量數(shù)據(jù)?異步[3]?傳輸?shù)?Web 服務(wù)器。

作用

它主要用于將統(tǒng)計(jì)數(shù)據(jù)發(fā)送到 Web 服務(wù)器，同時(shí)避免了用傳統(tǒng)技術(shù)（如：`XMLHttpRequest`[4]）發(fā)送分析數(shù)據(jù)的一些問題。

補(bǔ)充

sendBeacon 如果成功進(jìn)入瀏覽器的發(fā)送隊(duì)列后，會返回true；如果受到隊(duì)列總數(shù)、數(shù)據(jù)大小的限制后，會返回false。返回ture后，只是表示進(jìn)入了發(fā)送隊(duì)列，瀏覽器會盡力保證發(fā)送成功，但是否成功了，不會再有任何返回值。

例子

以掘金為例：

這里發(fā)了一個(gè)post請求，將小量的數(shù)據(jù)發(fā)到服務(wù)端，用于統(tǒng)計(jì)數(shù)據(jù)

優(yōu)勢

相較于img標(biāo)簽，使用navigator.sendBeacon會更規(guī)范，數(shù)據(jù)傳輸上可傳輸資源類型會更多。

對于ajax在頁面卸載時(shí)上報(bào)，ajax有可能沒上報(bào)完，頁面就卸載了導(dǎo)致請求中斷，因此ajax處理這種情況時(shí)必須作為同步操作.

sendBeacon是異步的，不會影響當(dāng)前頁到下一個(gè)頁面的跳轉(zhuǎn)速度，且不受同域限制。這個(gè)方法還是異步發(fā)出請求，但是請求與當(dāng)前頁面脫離關(guān)聯(lián)，作為瀏覽器的任務(wù)，因此可以保證會把數(shù)據(jù)發(fā)出去，不拖延卸載流程。

總結(jié)

前端埋點(diǎn)上報(bào)常使用ajax，img，navigator.sendBeacon。
不推薦使用ajax。
如果考慮兼容性的話，img是不二之選。
目前最合適的方案是navigator.sendBeacon，不僅是異步的，而且不受同域限制，而且作為瀏覽器的任務(wù)，因此可以保證會把數(shù)據(jù)發(fā)出去，不影響頁面卸載。

常見埋點(diǎn)行為

點(diǎn)擊觸發(fā)埋點(diǎn)

綁定點(diǎn)擊事件，當(dāng)點(diǎn)擊目標(biāo)元素時(shí)，觸發(fā)埋點(diǎn)上報(bào)。

頁面停留時(shí)間上報(bào)埋點(diǎn)

路由文件中，初始化一個(gè)startTime，當(dāng)頁面離開時(shí)通過路由守衛(wèi)計(jì)算停留時(shí)間。

錯(cuò)誤監(jiān)聽埋點(diǎn)

通過監(jiān)聽函數(shù)去接收錯(cuò)誤信息。

vue錯(cuò)誤捕獲

JS異常與靜態(tài)資源加載異常

請求錯(cuò)誤捕獲

內(nèi)容可見埋點(diǎn)

通過交叉觀察器去監(jiān)聽當(dāng)前元素是否出現(xiàn)在頁面