vue-tansun-track

vue-tansan-track通过 监听全局事件以及Vue 自定义指令的方式将埋点代码与业务代码完全解耦

安装

YARN

$ yarn add vue-tansun-track --save

NPM

$ npm install vue-tansun-track --save

用法

注册

import Vue from "vue"
import VTTrack from "vue-tansun-track"

Vue.use(VTTrack, {
  baseUrl: '', // 上报地址
  reportMethod: 'axios', // 上报方式（axios、beacon）
  historyTracker: true, // 是否开启页面访问量上报
  domTracker: false, // 是否开启全埋点上报
  jsErrorTracker: true, // 是否开启 js 和 promise 报错异常上报
  expoStayTime: 500, // 曝光停留时长（默认500ms）
  expoControlTime: 1000, // 曝光监控时长（默认1000ms）
})

声明式

<!-- 事件行为埋点（DOM） -->
<div v-track></div>
<div v-track="{ 参数1：值1 }"></div>
<div v-track.click="handleClick"></div>
<div v-track.click.delay="handleClick"></div>

<!-- 事件行为埋点（组件） -->
<cmp v-track></cmp>
<cmp v-track="{ 参数1：值1 }"></cmp>
<cmp v-track="handleClick"></cmp>
<cmp v-track.click="handleClick"></cmp>
<cmp v-track.click.[自定义事件名]="handleSearch"></cmp>
<cmp v-track.[自定义事件名]="handleSearch"></cmp>
<cmp v-track.[自定义事件名].delay="handleSearch"></cmp>

<!-- 区域曝光埋点（block 可以是 DOM 或者组件） -->
<block v-track:expo></block>
<block v-track:expo.once></block>

命令式

this.$vttrack.report({
  type: '', // 上报类型
  name: '', // 上报名称（路由、按钮、模块名称等）
  message: '', // 上报内容（功能描述、报错信息等）
  params: {
    [key]: value // 参数: 值
  }, // 业务参数（额外拓展对象）
  status: 'ok', // 上报状态（默认：ok-正常上报，error-报错上报）
})

指令修饰符

• .click 表示事件行为的埋点
• .[custom-event] 表示自定义事件行为的埋点
• .delay 表示埋点是否延迟执行，默认先执行埋点再执行回调
• .expo 表示区域曝光埋点
• .once 配合 .expo指令，只执行一次埋点

注意事项

• 添加delay修饰符为先执行回调后执行埋点，返回值Boolean为true，则继续自动上报，反之，则取消自动上报
• beacon 具有异步数据发送优势，同时也无法响应接受服务器返回信息，类似form表单提交