vue-trackjs 自定义指令轻松实现前端埋点

vue-trackjs 是一个基于vue自定义指令开发的声明式自动埋点方案，压缩后只有2.5K，对业务代码没有侵入影响。使用localStorage对统计数据进行缓存，默认每60s轮询上报一次数据。入手毫无难度，插件也预留了自定义扩展API，给你充分的发挥空间。

前言

埋点技术，即在正常的功能逻辑中添加统计逻辑，进行数据收集，后续经过各种自定义的数据整理，为对应的产品提供数据分析，实现数据可视化。

常见的前端埋点技术有：代码埋点、可视化埋点、无埋点。

代码埋点：手动在需要埋点的节点调用接口发送数据。
优点：发送数据时间可控，可自定义属性，自定义事件。
缺点：时间、人力成本大。

可视化埋点：利用可视化交互手段，通过可视化界面配置控件操作与事件操作发生关系。
优点：成本低，速度快
缺点：行为记录信息少，支持的分析方式少

无埋点：前端自动采集全部事件并上报埋点数据。
优点：无需埋点，方便快捷
缺点：行为记录信息少，传输压力大

vue-trackjs推荐用法

插件安装

// npm
npm i --save vue-trackjs
// yarn
yarn add vue-trackjs

插件引入

import TrackDirective from 'vue-trackjs'
import { options } from './track.config.js'

// vue 3
createApp(App).use(TrackDirective, options)
// vue 2
Vue.use(TrackDirective, options)

新建track.config.js

import { setTrackBaseInfo, throttle } from 'vue-trackjs'

// 你的自定义通用埋点信息， vue-trackjs集成的通用信息下面会有介绍
const trackBaseInfo = {
  ip: '127.23.112.3',
  version: '1.0.0',
  deviceId: 'vue-track',
  language: 'us',
  network: '3G',
}

// 存储到localstorage
setTrackBaseInfo(trackBaseInfo)

// 下面三个函数建议都是返回Promise
// 获取你的每个埋点配置信息函数，规范的埋点统计都是支持系统配置，从接口取埋点配置，例如：
function getTrackConfig() {
  // 该函数必须return如下结构，eventId和action字段固定不可更改，其他随意
  return {
    // 该key对应后续自定义指令里面的id
    "moduleName_xxx_show": {
      "eventId": "moduleName_xxx_show",
      "resourceModule": "",
      "action": "show"
    },
    "moduleName_xxx_click": {
      "eventId": "moduleName_xxx_click",
      "resourceModule": "12323",
      "action": "click"
    }
  }
}

// 获取埋点信息上传id函数，埋点批次上传前获取上传权限，根据业务需要，可不配置
export function getUploadId() {
  // vue-trackjs只接收下面两个字段
  return { liftTime, uploadKey }
}

// 轮询上传埋点信息回调函数, 会有3个入参  埋点信息数组  通用信息  getUploadId函数返回的uploadKey(可选)
export function uploadTracks(trackList, baseInfo, uploadKey) {
  return Promise<any>
}

export const options = {
  appId: 'projectName',
  getTrackConfig,
  getUploadId,
  uploadTracks
}

指令用法，自带的埋点类型有4种：

// click 点击事件
<div v-track="{ id: 'moduleName_xxx_click', eventResource: '{xxid: 12}' }">...</div>

// scoll_up 用户浏览滚动深度
<div v-track="{ id: 'moduleName_xxx_scoll_up' }">...</div>

// 为了数据准确性，下面两个注意不能绑定在v-if的元素上
// stay 用户停留时长
<div v-track="{ id: 'moduleName_xxx_stay' }">...</div>

// show 页面加载时间 
<div v-track="{ id: 'moduleName_xxx_show'  }" :data-track="getLoadingTime">...</div>

computed: {
    getLoadingTime() {
        // 注意自定义data属性里面只接收字符串，所以eventResource也建议为字符串
        return JSON.stringify({ loadingTime: xxx })
    }
}

注：因为vue自定义bind.value不是响应式的，如果你的eventResource是需要响应式时，需要像上面的show一样新增一个data-track，用来替换eventResource

自定义埋点事件

但集成的埋点类型不够满足你时，在options新增配置customActionFn，任你造。

function getTrackConfig() {
  return {
    "moduleName_xxx_mouseenter": {
      "eventId": "moduleName_xxx_mouseenter",
      "action": "mouseenter"
    },
  }
}

const options = {
  // ...
  getTrackConfig,
  customActionFn: {
    // key对应自定义事件里面的action
    // 入参会返回3个参数, callback函数必须调用传入trackInfo才会成功
    mouseenter: (trackInfo, callback, el) => {
      const fn = () => {
        trackInfo.haha = "guapi"
        callback(trackInfo)
      }
      el.addEventListener('mouseenter', throttle(fn, 300))
    }
  }
}

手动埋点

当你足够懒不想做过多配置或者以上不能满足你的需求时，可以尝试手动埋点

import { manualBurying } from 'vue-trackjs'

function clickHandler() {
  // manualBurying接收两个入参  埋点信息  另一个localstorage的key（可选，默认appId）
  const trackInfo = { //... }
  manualBurying(trackInfo)
}

最后说一下项目的缺点，首先就是需要手动声明和配置，其次呢就是基于localStorage，是容易被删除的，最后是由于60s轮询上报带来的问题，就是用户在下一上报周期前关闭tab或浏览器，该周期内的埋点是无法被上报的，只能等待再次打开应用，为此也增加了一个配置项options.immediate，设置为true时用户再次打开应用会直接上传上一周期的数据。

附上项目源码地址：https://github.com/hansonGong/vue-trackjs，如果有帮助到你就留个star，谢谢！！！