efe-data-collection-components-vue3

公司内部开发的基于vue3项目所使用的埋点组件，使用hooks写法 目前有监听页面活动，页面点击，监听页面错误三个埋点组件 在顶部组件(比如是在layout.vue内)进行全局监听；需要监听某个组件的话直接在组件上使用就可以了

安装环境

推荐node版本 >= 16 && <= 20

安装方法

npm install efe-data-collection-components-vue3 --save
<!--or-->
yarn add efe-data-collection-components-vue3 --save
<!--or-->
pnpm install efe-data-collection-components-vue3

使用例子

demo.vue
<template>
  <a-button data-track-id="1" :a1b2c3-name="JSON.stringify({ a: 1, b: 2 })">按钮</a-button>
  <a data-track-id="2">链接</a>
</template>

<script lang="ts" setup>
  import { useEfeWatchComponentStay, useEfeWatchComponentClick, useEfeWatchComponentError } from 'efe-data-collection-components-vue3'

  const { duration } = useEfeWatchComponentStay({
    enable: true,
    onAction: (t, route) => onPageStay(t, route),
    onLeave: (t, route) => onPageLeave(t, route)
  })

  useEfeWatchComponentClick({
    labels: [
      {
        label: 'a'
      },
      {
        label: 'button'
      }
    ],
    wildcard: 'a1b2c3',
    onClick: (t, route, track) => onPageClick(t, route, track)
  })

  useEfeWatchComponentError({
    type: ['page', 'interface', 'network'],
    onError: (t, route, errorData) => onPageError(t, route, errorData)
  })

  function onPageStay(t: number, route): void {
    //做点什么...
  }

  function onPageLeave(t: number, route): void {
    //做点什么...
  }

  function onPageClick(t: number, route, track): void {
    //NOTE: 前缀为a1b2c3的自定义属性才会被收集，默认收集前缀为data-track的自定义属性
    //做点什么...
  }

  function onPageError(t: string, route, errorData) {
    //做点什么...
  }
</script>

组件目录

useEfeWatchComponentStay: 监听页面停留时间
useEfeWatchComponentClick: 监听页面点击事件
useEfeWatchComponentError: 监听页面错误事件

hooks配置

const { duration } = useEfeWatchComponentStay: {
  //开启定时器
  enable?: boolean
  //延迟时间(ms)  默认2000
  delay?: number
  //事件 - 页面活动回调，返回页面停留时长的秒数、当前路由信息
  onAction?: (t: number, route) => void
  //事件 - 离开页面回调，返回页面停留时长的秒数、当前路由信息
  onLeave?: (t: number, route) => void
}
// 停留时间（秒）
duration: number


const { duration } = useEfeWatchComponentClick: {
  //标签白名单  默认[{ label: 'button' }, { label: 'a' }]
  labels?: { label?: string, id?: string, class?: string }[]
  //标签自定义属性通配符 默认data-track
  wildcard?: string
  //事件 - 点击回调，返回页面停留时长的秒数、当前路由信息、埋点数据
  onClick?: (t: number, route, track: { key: string, value: string }[]) => void
}
// 停留时间（秒）
duration: number


useEfeWatchComponentError: {
  //监听错误类型  page页面错误, interface接口错误, network网络错误; 默认['page', 'interface', 'network']
  type?: ('page' | 'interface' | 'network')[]
  //事件 - 错误回调，返回页面错误类型、当前路由信息、错误信息
  onError?: (t: string, route, errorData) => void
}