@shencom/monitor

目前支持浏览器、uni 小程序。
功能包括：埋点方法注入、统计元素曝光次数、统计页面路径停留时长、统计页面路径日 PV、统计用户日 UV。

1. 初始化
在 vue 入口文件 main 中 app 挂载前初始化插件

``
import { scMonitor } from "@shencom/monitor";

app.use(
scMonitor({
platform: 'web'|'mini',
mini?: {
appid: 'wxxxx',
scid: 'scxxx'
}
web?: {
scid: "scxxx",
}
config: {
server: "http://192.168.20.248:4000",
track?: {} | false,
exposure?: {} | false,
uniqueVisitor?: { include?: string[], ignore?: string[] } | false,
pageView?: { include?: string[], ignore?: string[] } | false,
pageStay?: { include?: string[], ignore?: string[] } | false,
},
})
);
`

参数详情：
| 属性 | 说明 | 类型 |可选项| 默认 |
|-----|----|---|---|---|
|platform|当前平台表示网页端或者小程序|"web","mini"|必填|-|
|web|当前平台相关配置|{ scid: string }|当 platform 为 web 时必填|-|
|mini|当前平台相关配置|{ scid: string, appid: string }|当 platform 为 mini 时必填|-|
|config.server|数据接收地址|String|必填|-|
|config.track|手动埋点配置||非必填|-|
|config.exposure|元素曝光配置||非必填|-|
|config.uniqueVisitor|页面 UV 配置||非必填|-|
|config.pageView|页面 PV 配置||非必填|-|
|config.pageStay|页面停留时长配置||非必填|-|
|include|只触发包含在内的路径|String[]|非必填|-|
|ignore|不触发包含在内的路径|String[]|非必填|-|

include/ignore 使用如下，例子表示，页面停留时长、PV、UV 等功能，只会在 include 内、ignore 外触发。

`
web: include: ['/stayTimePage/**'] ignore: ['/stayTimePage/ignorePage']
mini: include: ['/pages/**'] ignore: ['/pages/work']
`

登录系统时, 将 sc_monitor_user 保存到对应环境的 localStorage：

`
sc_monitor_user = JSON.stringify({
userId: 10086, // 身份标识，可以是：身份证号、手机号、userId
})
`

2. 手动埋点
插件实现使用发送 gif 图片的方式发送埋点数据，用法如下：code 为点位唯一识别码，data 的参数和类型具体由该点位设置的字段参数决定

$track 挂载在全局属性下:

浏览器:

`
const handleTestTrack = () => {
window.$track({
code: 'c22cc12b-6f07-408e-9e20-b213356b0eff',
data: {
testLabel1: 123,
testLabel2: 'asdsadsa',
}
})
}
或者
const _this = getCurrentInstance()?.appContext.config.globalProperties;
const handleTestTrack = () => {
_this.$track({
code: 'c22cc12b-6f07-408e-9e20-b213356b0eff',
data: {
testLabel1: 123,
testLabel2: 'asdsadsa',
}
})
}
`

小程序:

`
const handleTestTrack = () => {
uni.$track({
code: 'c22cc12b-6f07-408e-9e20-b213356b0eff',
data: {
testLabel1: 123,
testLabel2: 'asdsadsa',
}
})
}
`

3. 元素曝光次数
浏览器，使用 v-exposure 指令实现页面元素曝光次数统计，如下：

`

`

小程序，如下:
注意：移动端 uni 开发中 nvue 组件异步渲染的元素暂不支持曝光，可在 vue 文件中进行 view 包裹 nvue 组件

`

``

参数如下：
| 属性 | 说明 | 类型 |可选项| 默认 |
|-----|----|---|---|---|
|id|该元素所在页面路径下的唯一指定 id|String|必填|-|
|delay|元素需曝光时长|Number|非必填|2|
|data|曝光上报接口携带额外数据|Object|非必填|{}|

4. 统计页面路径停留时长
插件会自动在页面刷新、退出、切换路由前使用 navigator.sendBeacon 发送数据。规则为：停留时间超过 2 秒认定为有效停留

5. 统计页面路径日 PV
根据日期维度统计系统页面到达次数，每刷新一次都会使次数加 1

6. 统计用户日 UV
系统为登录态时才会发送，根据日期维度统计系统用户到达状况，并记录该用户最新的 10 条系统访问路径