埋点上报接口

埋点上报默认使用 sendBeacon 如果浏览器不支持则使用 ajax

使用

import { hexSend, toPage, leavePage, extendBaseInfo, hexDataTrack  } from 'hex-event-track'

插件内部默认携带信息

此处需要注意的是 appVersion: window.hexAppInfo.appVersion, terminalCode: window.hexAppInfo.terminalCode, 需要在项目中给window对象挂载 hexAppInfo

window.hexAppInfo = {
  terminalCode: 1,
  appVersion: '1.0.0',
  appName: 'STUREPORT'
}

  constructor() {
    const deviceinfo = getBrowserVersion();

    this._url = '/routeapi/buryingpoint/DataCollect/Common?ssotoken=';
    this.request = ajax();
    this._baseInfo = {
      deviceDetail: deviceinfo[0],
      deviceVersion: deviceinfo[1],
      os: navigator.userAgent.indexOf('Mac OS') >= 0 ? 3 : 1,
      systemVersion: navigator.userAgent.indexOf('Mac OS') >= 0 ? 3 : 1,
      appVersion: window.hexAppInfo.appVersion,
      terminalCode: window.hexAppInfo.terminalCode,
    };
    this.pageStack = [];
  }

扩展基础信息, 比如扩展用户id, 此后的所有上报都会带上此信息

extendBaseInfo({
  userId: 'xxxx'
})

设置token

import { hexDataTrack } from 'hex-event-track'
hexDataTrack.token = 'xxxx'

方法

点击上报

hexSend({
  eventCode: 'viewStuReportAllMon',
  eventName: '浏览学生全学科月报',
})

页面停留时间上报

此处的path是为了区分不同页面的停留时间

router.beforeEach((to, from, next) => {
  toPage({
    path: to.path,
    eventCode: 'viewStuReportAllMon',
    eventName: '浏览学生全学科月报',
    eventType: 3,
    optionalParam: [{
      name: 'viewStuReportAllMon',
    }]
  })
  next()
})

router.afterEach((to, from) => {
  // 过滤首页首次进入
  if (from.fullPath === '/') return
  leavePage()
})

基于插件使用vue指令上报

指令文件

import { hexSend } from 'hex-event-track'
export default {
  mounted(el, binding) {
    el.onclick = () => {
      const trackData = binding.value;
      hexSend(trackData)
    }
  },
}

main.js

import VEvent from '@/utils/eventTrack/v-track.js'

...
app.directive('track', VEvent);

vue使用

<div v-track="{
            eventCode: 'changeDate',
            eventName: '切换年月'
          }" class="flex items-center justify-end w-252px">
</div>

打包

iiffe 打包注入变量