背景
对项目中统计一些用户行为、某些事件点击量、某些重要页面的曝光量等信息的统计；
统计信息
- 某些页面pv、页面停留时间
- 浏览器版本及操作系统信息
- 某些按钮的点击次数
- 操作用户的信息
- ...
埋点方案
- 页面pv，停留时间这些可以通过
url跳转及跳出时间进行统计 - 浏览器信息直接
window获取 - 可以全局监听
click事件，通过给Button、Link等添加data-id进行统计
在vue项目中可以通过监听vue-router 钩子和directive 自定义指令进行实现，项目为react项目，以下为react实现方式，其实实现思路都是一样的
实现方案
项目中使用的是 img 来实现埋点数据的发送，img属于原生的HTML属性，兼容性比ajax要好很多，而且支持跨域，但如果用户禁用网页加载图片，那么将无法正常发送埋点数据。
具体代码实现
- 公共类封装
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发送埋点数据
send(url: string, params = {} as any) {
const arr = []
for (let key in params) {
arr.push(`${key}=${params[key]}`)
}
const newUrl = `${url}?${arr.join('&')}`
// 使用img发送埋点数据
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')}`
// 存在用户信息则统计，反之不需要
value.userInfo && this.send(api, { ...client, ...value })
}
}
const pointSDK = new PointSDK();
const Point = {
event: (baseurl: string, value: IPointProps) => pointSDK.event(baseurl, value)
}
本文参考阿里开发者文档
