1.0.0 • Published 7 months ago

@shencom/monitor v1.0.0

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
7 months ago

@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 指令实现页面元素曝光次数统计，如下：

        <div v-exposure="{
         id: 'textExposureDom3',
         delay: 6,
         data: {}
     }"></div>

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

         <view class="v-exposure" :data-exposure="{
         id: 'textExposureDom3',
         delay: 6,
         data: {}
     }"></view>

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

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

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

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

shencomscmonitor
1.0.0

7 months ago