JavaScript利用img實現(xiàn)前端頁面埋點功能
做數(shù)據(jù)分析的時候,可能會遇到一個問題:如何獲取足量的有效數(shù)據(jù)。簡單記錄用戶登錄IP肯定是不能滿足要求的,這個時候就需要我們在前端頁面埋點,也就是數(shù)據(jù)采集點。如何來實現(xiàn)一個前端埋點功能,本文就帶你上手試試。
數(shù)據(jù)類型
首先,我們需要明確埋點需要哪些數(shù)據(jù),這個和具體的業(yè)務(wù)需求有關(guān)。但是我們設(shè)計的時候,還是應(yīng)該盡量考慮:
- pv:頁面訪問量
- uv:用戶訪問量
- 自定義事件
- 頁面性能加載數(shù)據(jù)
- 報錯信息
埋點數(shù)據(jù)范圍清晰了,那么怎么來實現(xiàn)埋點呢?
技術(shù)方案
首先我們不建議使用ajax發(fā)送http的方式將埋點數(shù)據(jù)發(fā)送到服務(wù)端,原因主要有兩個:
- 可能存在跨域的風(fēng)險,例如使用第三方的接口
- 可能存在兼容性問題,例如使用fetch來發(fā)送請求就不兼容IE
其他原因也有,但不是主要的。這里,我們建議使用<img>
或者<script>
來實現(xiàn)埋點數(shù)據(jù)的發(fā)送,這兩個屬于原生的HTML屬性,兼容性比ajax要好很多,而且支持跨域。img和script如果要細(xì)分的話,還是有差異的,感興趣的朋友可以移步:詳解JavaScript發(fā)送埋點請求的兩種方式,本文將選擇img來實現(xiàn)埋點。
如何設(shè)計
在寫代碼前,可以先設(shè)計出代碼大概的結(jié)構(gòu),這樣在寫的時候才會思路清晰。在埋點數(shù)據(jù)中,性能分析和錯誤監(jiān)聽可能會復(fù)雜一點。性能分析可以使用performance.timing
performance
的每一個屬性的作用節(jié)點可參考下圖:
錯誤監(jiān)聽可參考文章:如何監(jiān)聽Vue項目報錯的4種方式
完整代碼
class StatisticsSDK { constructor() { this.initPerformance(); // 性能分析 this.initError(); // 錯誤監(jiān)聽 } // 初始化性能分析 initPerformance() { const url = 'xxx'; this.send(url, performance.timing) } // 初始化錯誤監(jiān)聽 initError() { window.addEventListener('error', event => { const {error, lineno, colno} = event; this.error(error, {lineno, colno}) }) // Promise 未catch的錯誤 window.addEventListener('unhandledrejection', event => { this.error(new Error(event.reason), {type: 'unhandledrejection'}) }) } // 發(fā)送埋點數(shù)據(jù),作為公共方法被調(diào)用 send(url, params = {}) { params.id = Date.now(); // 當(dāng)前時間戳 const arr = []; for (let key in params) { arr.push(`${key}=${params[key]}`); } const newUrl = `${url}?${arr.join('&')}`; // 參數(shù)拼接在請求地址上 // 使用img發(fā)送埋點數(shù)據(jù) // const img = new Image(); // img.src = newUrl; const img = document.createElement('img'); img.src = newUrl; } // 頁面訪問量 pv() { const url = 'xxxx' // 調(diào)用send發(fā)送 this.send(url, {key: 'pv', value: location.href}) } // 自定義事件 event(key, value) { const url = 'xxxx'; // 服務(wù)端地址 // 調(diào)用send發(fā)送 this.send(url, {key, value}) } // 未捕獲的錯誤,或者用戶自行發(fā)送錯誤埋點數(shù)據(jù)時 error(error, info = {}) { const url = 'xxx'; const {message, stack} = error; this.send(url, {message, stack, ...info}) } } const s = new StatisticsSDK();
總結(jié)
本文主要使用img來實現(xiàn)埋點數(shù)據(jù)的發(fā)送,考慮了跨域、兼容性,但是也存在比較大的缺陷:如果用戶禁用網(wǎng)頁加載圖片,那么將無法正常發(fā)送埋點數(shù)據(jù)。這種情況下,可以使用script實現(xiàn)本案例,兩者的差異可以參考詳解JavaScript發(fā)送埋點請求的兩種方式,可以使用script實現(xiàn)本案例。
到此這篇關(guān)于JavaScript利用img實現(xiàn)前端頁面埋點功能的文章就介紹到這了,更多相關(guān)JavaScript埋點功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript實現(xiàn)Array和String互轉(zhuǎn)換的方法
這篇文章主要介紹了Javascript實現(xiàn)Array和String互轉(zhuǎn)換的方法,涉及JavaScript中toString方法與split方法的使用技巧,需要的朋友可以參考下2015-12-12JS生成不重復(fù)的隨機(jī)數(shù)組的簡單實例
下面小編就為大家?guī)硪黄狫S生成不重復(fù)的隨機(jī)數(shù)組的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07HTML5+Canvas調(diào)用手機(jī)拍照功能實現(xiàn)圖片上傳(上)
這篇文章主要為大家詳細(xì)介紹了HTML5+Canvas,和jquery技術(shù),調(diào)用手機(jī)拍照功能實現(xiàn)圖片上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04