项目描述

基于vue的埋点事件，v-track指令上报点击等事件；PV、UV、监控页面停留时间、点击事件；支持定时批量上报，以及页面跳转批量上报功能

安装

npm i vue-track-report --save

参数

timeout = null // 计时器时间，用来定时传递页面的事件的，默认是null，最小值是5，单位为秒，
               // 传入即开启定时器，定时上报当前页面的事件集合。
               // 不传的时候默认是监听页面跳转的时候进行批量上传事件的

// 项目参数

projectName = null // 项目名称
projectCode = null // 项目唯一性code
interfaceUrl = null // 项目埋点上报接口

// 浏览器参数

appCodeName = null// 与浏览器相关的内部代码名 都为Mozilla
appName = null// 浏览器正式名称 均为Netscape
appVersion = null// 浏览器版本号
onLine = null// 是否连接互联网，均true(未断网)
platform = null// 所在平台，win32
product = null// 浏览器产品名，gecko
userAgent = null// 判断浏览器类型 

// uv 统计类型
uvType = null // IP、BF（浏览器指纹）
// 唯一标识
uniqueKey = null // 唯一标识 

// 页面参数

stayTime = null // 页面停留时间
eventList = [] // 页面事件集合
unitKey = null // 页面唯一性key值
routeTitle = null // 路由title
routeName = null // 路由名称
path = null // 路由path
fullPath = null // 路由fullPath
menuName = null // 页面对应菜单名称
menuId = null // 页面对应菜单Id

// 事件参数

eventType = null // 事件类型
eventName = null // 事件名称
eventMsg = null  // 事件描述

// 上报类型参数
reportType = null // event 事件 page 页面

用法

import Vue from "vue"
import {track,VTrack} from "v-track"

初始化埋点事件

track.init({
    projectName: 'ProjectName', // 项目名称
    projectCode: 'ProjectCode', // 项目唯一性Code
    interfaceUrl: 'http://localhost:3000/trackLogs/saveList', // 接口名称
    uvType: 'BF', // UV类型 目前只支持浏览器指纹
    timeout: 5 // 定时时间 用来批量上传当前页面的事件的
}, () => {
    new Vue({
        router,
        i18n,
        store,
        render: h => h(App)
    }).$mount('#app')
})

监听路由变化

router.beforeEach((to, from, next) => {
window.eventTrack.reportAll({ // 路由变化时批量上报
    unitKey:to.meta.menuId,
    routeTitle:to.meta.title,
    routeName:to.name,
    path:to.path,
    fullPath:to.fullPath,
    menuName:to.meta.menuName,
    menuId:to.meta.menuId
}, {
    unitKey:from.meta.menuId,
    routeTitle:from.meta.title,
    routeName:from.name,
    path:from.path,
    fullPath:from.fullPath,
    menuName:from.meta.menuName,
    menuId:from.meta.menuId
})
})

指令

Vue.use(VTrack)

指令用法

1、默认click事件 目前只支持click事件

<el-button v-track="'事件名称'" @click="getErrorLogs()" type="primary">查询</el-button>

2、支持对象传参

<el-button v-track="{name:'事件名称'}" @click="getErrorLogs()" type="primary">查询

3、label 触发点击事件触发两次问题 框架中 label 与 input 组合，可能会导致点击事件触发两次；关于这种情况请使用update方式

<el-radio-group v-model="searchForm.initType" v-track.update="{name: '事件名称'}" >
    <el-radio-button :label="error" v-for="error in ['1','2','3']" :key="error"></el-radio-button>
</el-radio-group>

4、目前指令上传均是页面缓存批量上传，如若想要立即上报，请使用immediate

<el-button v-track.immediate="'事件名称'" @click="getErrorLogs()" type="primary">立即上报</el-button>

方法

1、立即上报点击事件

const event = {eventName:'事件名称',eventType:'click',eventMsg:'事件描述'}
window.eventTrack.reportEvent(event)