plugin monitor for shencom
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 组件
`
``