@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 条系统访问路径