hz-tracker

背景

海致通用埋点组件，支持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}`)