1.2.1 • Published 2 years ago
hz-tracker v1.2.1
背景
海致通用埋点组件，支持dom点击埋点、pv/uv上报、曝光时长、批量上报、无网络延时上报
项目说明
|.
├── src
├── index.js // 埋点组件主入口
├── utils.js // 埋点组件工具函数埋点组件使用
简单使用
import hzTracker from 'hz-tracker'
const $tracker = new hzTracker({
maxLogNum: 1, // 存储日志的最大数量，达到最大数量才会上报
requestUrl: 'localhost:3000/test' // 埋点请求后端接口
})
onClickBtn() {
$tracker.sendTracker('click', 'test_click_btn_tracker')
}参数说明
- 初始化配置项
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| appid | 应用标识，用来区分埋点数据中的应用 | string | 'default' |
| maxLogNum | 批量上报的最大数量 | number | 5 |
| enableTrackerKey | 是否开启约定拥有属性值为'tracker-key'的dom的点击事件自动上报 | boolean | false |
| enableHeatMapTracker | 是否开启热力图自动上报 | boolean | false |
| enableLoadTracker | 是否开启页面加载自动上报，适合多页面应用的pv/uv上报 | boolean | false |
| enableHistoryTracker | 是否开启页面history变化pv/uv上报，适合单页面应用的history路由 | boolean | false |
| enableHashTracker | 是否开启页面hash变化pv/uv上报，适合单页面应用的hash路由 | boolean | false |
| enableExposureTimeTracker | 是否开启页面曝光时长上报 | boolean | false |
| requestUrl | 埋点请求后端接口 | string | http://localhost:3000 |
| requestMethod | 埋点请求方式，上报方案：POST为navigator.sendBeacon，GET为image。采用xmlHttpRequest兼容 | 'POST','GET' | 'POST' |
| extra | 用户自定义上传字段对象 | object | {} |
| replaceFields | 自定义上报接口的字段名 {eventId:'eventId', uuid:'uuid', userId:'userId' } | object | {} |
| stayTime | 单位ms, 停留有效时长，用于优化曝光时长。只有时长大于stayTime才算做一次有效的曝光时长 | number | 2000 |
- tracker.method()
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| sendTracker | 手动触发上报函数，参数为分别为(事件类型，事件id，额外参数) | function | 无 |
| setExtra | 设置埋点上报额外数据，用于更新配置中的extra | function | 无 |
| setUserId | 设置用户id，可用于UV上报 | function | 无 |
| setOptions | 用于更新配置项(options) | function | 无 |
上报接口格式
- POST
[{
"appid": "default",
"eventType": "click",
"uuid": "26399770-8fd4-11ec-a1b0-97f4769244f2",
"eventId": "front_home",
"title": "atlas",
"url": "http://localhost:8080/#/home/graph/analysis",
"eventTime": 1645672242611,
"browserType": "Chrome",
"browserVersion": "98.0.4758.102",
"browserEngine": "Blink",
"osType": "OS X",
"osVersion": "10.14.6",
"language": "zh-CN"
},{
"appid": "default",
"eventType": "click",
"uuid": "26399770-8fd4-11ec-a1b0-97f4769244f2",
"eventId": "graph_analysis",
"title": "atlas",
"url": "http://localhost:8080/#/home/graph/analysis",
"eventTime": 1645672242611,
"browserType": "Chrome",
"browserVersion": "98.0.4758.102",
"browserEngine": "Blink",
"osType": "OS X",
"osVersion": "10.14.6",
"language": "zh-CN"
}]- GET
let data = [{
"appid": "default",
"eventType": "click",
"uuid": "26399770-8fd4-11ec-a1b0-97f4769244f2",
"eventId": "front_home",
"title": "atlas",
"url": "http://localhost:8080/#/home/graph/analysis",
"eventTime": 1645672242611,
"browserType": "Chrome",
"browserVersion": "98.0.4758.102",
"browserEngine": "Blink",
"osType": "OS X",
"osVersion": "10.14.6",
"language": "zh-CN"
},{
"appid": "default",
"eventType": "click",
"uuid": "26399770-8fd4-11ec-a1b0-97f4769244f2",
"eventId": "graph_analysis",
"title": "atlas",
"url": "http://localhost:8080/#/home/graph/analysis",
"eventTime": 1645672242611,
"browserType": "Chrome",
"browserVersion": "98.0.4758.102",
"browserEngine": "Blink",
"osType": "OS X",
"osVersion": "10.14.6",
"language": "zh-CN"
}]
let reportData = encodeURIComponent(JSON.stringify(data));
axios(`localhost:3000/test?logs=${reportData}`)