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