背景
對項目中統(tǒng)計一些用戶行為、某些事件點擊量、某些重要頁面的曝光量等信息的統(tǒng)計哪痰；
統(tǒng)計信息
- 某些頁面pv、頁面停留時間
- 瀏覽器版本及操作系統(tǒng)信息
- 某些按鈕的點擊次數(shù)
- 操作用戶的信息
- ...
埋點方案
- 頁面pv，停留時間這些可以通過
url跳轉及跳出時間進行統(tǒng)計 - 瀏覽器信息直接
window獲取 - 可以全局監(jiān)聽
click事件爹殊，通過給Button健盒、Link等添加data-id進行統(tǒng)計
在vue項目中可以通過監(jiān)聽vue-router 鉤子和directive 自定義指令進行實現(xiàn)，項目為react項目父虑，以下為react實現(xiàn)方式呜魄，其實實現(xiàn)思路都是一樣的
實現(xiàn)方案
項目中使用的是 img 來實現(xiàn)埋點數(shù)據(jù)的發(fā)送笨蚁，img屬于原生的HTML屬性伪很，兼容性比ajax要好很多，而且支持跨域，但如果用戶禁用網頁加載圖片絮短，那么將無法正常發(fā)送埋點數(shù)據(jù)邑贴。
具體代碼實現(xiàn)
- 公共類封裝
export interface IPointProps {
buttonType?: string // 按鈕類型
browerVersion?: string // 瀏覽器版本
userInfo?: string //用戶信息
referrer?: string //來源
currentUrl?: string // 當前url
}
// 公共類封裝
class PointSDK {
constructor() {
// 性能分析
this.initPerformance();
}
// 初始化性能分析
initPerformance() {
const url = 'xxx';
this.send(url, performance.timing)
}
// 獲取瀏覽器信息
getBrowerVersion() {
const navigator = window.navigator
return {
browerVersion: navigator.userAgent
}
}
// 通過img發(fā)送埋點數(shù)據(jù)
send(url: string, params = {} as any) {
const arr = []
for (let key in params) {
arr.push(`${key}=${params[key]}`)
}
const newUrl = `${url}?${arr.join('&')}`
// 使用img發(fā)送埋點數(shù)據(jù)
const img = new Image();
img.src = newUrl;
}
// 自定義事件
event(baseurl: string, value: IPointProps) {
const api = `${baseurl}${'/api/point'}`
const client = this.getClient()
// 處理url中的 特殊符號咖为，# & 等
// const url = `${window.location.href?.replace(/#/g, '%23').replace(/&/g, '%26')}`
// 存在用戶信息則統(tǒng)計架忌，反之不需要
value.userInfo && this.send(api, { ...client, ...value })
}
}
const pointSDK = new PointSDK();
const Point = {
event: (baseurl: string, value: IPointProps) => pointSDK.event(baseurl, value)
}
本文參考阿里開發(fā)者文檔
