# client-stat

**Repository Path**: ireadercity/client-stat

## Basic Information

- **Project Name**: client-stat
- **Description**: 基于客户端的自主埋点
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2018-08-07
- **Last Updated**: 2022-01-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# client-stat

[旧版本文档](https://gitee.com/ireadercity/client-stat/blob/master/old/README.md)

> 简介

前端埋点，支持：

* 页面上报
* 节点在窗口内上报
* 点击上报
* 已上报记录（参数可选）
* 上报数据以pipe形式进行操作（添加数据、修改上报格式等）
* 可以添加插件控制pipe
* 监听上报页面路径并可修改数据

> 安装依赖
	
	npm install --save stat


> 初始化

```js
import Stat from 'stat'
	
const stat = new Stat(params)
```

> 参数(params)

| key | type | description | 
| :---: | :---: | :--- | 
| report | Function | 接收上报参数的方法 |
| url | String | 请求地址（未传上报方法时可以使用内置请求） |
| offset | Number | 路径偏移，用作节点存储的key。<br />如使用 vue 且有 router 并填写了 base url 则传1，如：/xxx/yyy/zzz -> 传 0 时取xxx，传 1 时取 yyy |
| showConsole | Boolean | 展示上报数据 |
| oncePageView | Boolean | 页面展示上报缓存 |
| onceNodeView | Boolean | 节点展示上报缓存 |
| closeAutoNodeReport | Boolean | 关闭自动节点展示上报 |
| plugins | Array&#60;Object &#124; Function&#62; | 插件，接收对象（对象时执行其中的apply方法）或函数，并传入当前stat实例 |

> API（Stat构造函数）

| name | description | use | params | 
| :---: | :--- | :--- | :--- |
| listen | 监听上报路径，添加默认参数，在获取默认值之前执行 | Stat.listen(reg, pipe) | reg 匹配路径 <br/> pipe 改变单个数据的方法，该方法接收单个上报数据 |
| pipe | 添加数据处理钩子，在获取默认值之后，在上报之前执行 | Stat.pipe(pipe) | pipe 改变整个上报数据的方法，该方法接收这次上报的所有数据 |
| on | 监听钩子 | Stat.on(type, callback) | type 监听类型 callback 回调函数 <br /> type类型支持： report -> 上报完成钩子，callback(error, successData, sourceData) |

> API（stat实例）

| name | description | use | params |
| :---: | :--- | :--- | :--- |
| setOptions | 设置参数 | stat.setOptions(options) | options 配置参数 | 
| setNextParams | 设置上报默认参数 | stat.setNextParams(params) | params 默认参数 |
| listen | 监听上报路径，添加默认参数，在获取默认值之前执行 | stat.listen(reg, pipe) | reg 匹配路径 <br/> pipe 改变单个数据的方法 |
| pipe | 添加数据处理钩子，在获取默认值之后，在上报之前执行 | stat.pipe(pipe) | pipe 改变整个上报数据的方法，该方法接收这次上报的所有数据 |
| on | 监听钩子 | stat.on(type, callback) | type 监听类型 callback 回调函数 <br /> type类型支持： report -> 上报完成钩子，callback(error, successData, sourceData) |
| addNode | 添加上报节点 | stat.addNode(el, { id, unView, unClick, ...params }) | el 需要绑定的dom节点 <br /> id 唯一id <br /> unView 该节点不需要展示上报 <br /> unClick 该节点不需要点击上报 <br /> params 需要绑定的数据 |
| removeNode | 移除上报节点 | stat.removeNode(id) | id 唯一id |
| nodeReport | 节点上报 | stat.nodeReport() | - |
| pageReport | 页面上报 | stat.pageReport(params) | params 上报所需参数 |
| clickReport | 点击上报 | stat.clickReport(params) | params 上报所需参数 |
| getCurrentData | 获取当前默认数据 | stat.getCurrentData(params) | params 上报所需参数 |


## 插件类（plugins）

> 初始化（个别插件有先后顺序）

```js
import Stat from 'stat'
import { VuePlugin, WatchRoutePlugin, NativePlugin, NativePlugin_3, H5_format } from 'stat/plugins'
// import Vue from 'vue'
// import hostSdk from 'host-sdk'
// import WatchRoute from 'watch-route'

const stat = new Stat({
	plugins: [
        // new VuePlugin(Vue),
        // new WatchRoutePlugin(WatchRoute),
		// new NativePlugin(hostSdk),
		// new NativePlugin_3(hostSdk), // 要求 host-sdk 3.x 版本及以上
        new H5_format(),
    ]
})
```

> 详情

* VuePlugin： 提供 v-stat 指令
	* 指令封装于 addNode 方法，参数一致

* WatchRoutePlugin： 提供 页面链（pageFrom）、父级信息（parentPage, parentParams）
	* 该插件需传入 WatchRoute 构造函数，并在stat实例上挂载route实例

* NativePlugin： 提供客户端埋点所需及上报，需和 WatchRoutePlugin 一同使用以获取页面链等上报所需数据
	* 该插件需传入 hostSdk 依赖

* H5_format： webapp上报格式化数据，转成上报需要的格式，
	* 该插件为stat实例提供 setClientDetail 方法，该方法用于设置：渠道（channel），平台（platform，该参数已内置判断），用户id（userId）

---

## 更新

> 4.3.0

> 插件中心库与vue解耦

---

> 4.2.1

> 节点上报行为与页面上报同步

---

> 4.2.0

> 更新 host-sdk plugin

> 兼容老 host-sdk

---

> 4.1.0

> 增加 API -> on 方法，可添加钩子

---

> 4.0.2

> 增加配置 closeAutoNodeReport ，可自动上报节点展示(nodeReport)

---

> 4.0.1

> 数据的完全可控

---

> 4.0.0

> 易用性、可扩展性重构

---