# hz-tracker

> 海致通用埋点工具

Latest version **1.2.1** (published 2022-08-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install hz-tracker
pnpm add hz-tracker
yarn add hz-tracker
bun add hz-tracker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-08-29 |
| First published | 2022-02-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 49.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | aojingkuan |
| Maintainers | icodeajk, puiks, chaojidan7252, litchilychee, sweet_tooth |
| Keywords | haizhi, tracker |

## Links

- npm: https://www.npmjs.com/package/hz-tracker
- Repository: https://git.stargraph.cn/web/hz-tracker
- npm.io page: https://npm.io/package/hz-tracker

## Dependencies (6)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [extend](https://npm.io/package/extend.md) ^3.0.2
- [platform](https://npm.io/package/platform.md) ^1.3.6
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.8.3
- [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.14.5
- [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) ^7.14.5

## Recent versions

- 1.2.1 (latest) — 2022-08-29
- 1.2.0 — 2022-02-25
- 1.1.4 — 2022-02-24
- 1.1.3 — 2022-02-21
- 1.1.2 — 2022-02-21
- 1.1.1 — 2022-02-18
- 1.1.0 — 2022-02-18

## README

## 背景
海致通用埋点组件，支持dom点击埋点、pv/uv上报、曝光时长、批量上报、无网络延时上报

## 项目说明
```
|.
├── src
    ├── index.js  // 埋点组件主入口
    ├── utils.js    // 埋点组件工具函数
```

## 埋点组件使用
### 简单使用
```javascript
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

```json
[{
    "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

``` javascript
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}`)
```

---
_Source: https://npm.io/package/hz-tracker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._