efe-data-collection-components-vue2

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

安装环境

推荐node版本 >= 10 && <= 14

安装方法

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

全局引入

main.js

import Vue from 'vue'
import efeDataCollection from 'efe-data-collection-components-vue2'

Vue.use(efeDataCollection)

局部引入 && 使用例子

demo.vue

import { EfeWatchComponentStay, useEfeWatchComponentClick, useEfeWatchComponentError } from 'efe-data-collection-components-vue2'
<template>
  <div>
    <a-button data-track-id="1" :a1b2c3-name="JSON.stringify({ a: 1, b: 2 })">按钮</a-button>
    <a data-track-id="2">链接</a>
  </div>
  

  <efe-watch-component-stay
    :enable="true"
    :delay="2000"
    v-on:onAction="onAction" />

  <efe-watch-component-click
    :wildcard="'a1b2c3'"
    @onClick="onClick" />

  <efe-watch-component-error
    @onError="onPageError" />
</template>

export default {
  components: {
    EfeWatchComponentStay, useEfeWatchComponentClick, EfeWatchComponentError
  },
  methods: {
    onAction({ t, route }) {
      //做点什么...
    },
    onClick({ t, route, track }) {
      //NOTE: 前缀为a1b2c3的自定义属性才会被收集，默认收集前缀为data-track的自定义属性
      //做点什么...
    },
    onPageError({ t, route, errorData }) {
      //做点什么...
    }
  }
}

组件目录

EfeWatchComponentStay: 监听页面停留时间
EfeWatchComponentClick: 监听页面点击事件
EfeWatchComponentError: 监听页面错误事件

组件配置

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

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

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