vue项目埋点实践，使用img发送埋点数据

埋点数据种类：
1.按钮点击
2.页面切换
（具体数据内容根据实际需求再定义）

埋点数据交互：
采用img的默认下载功能，发送get请求，带上埋点数据（此处后期需要加上加密）

发送频率：
1.固定时间
2.固定数据量（根据get请求的限制和每条埋点的数据量制定最大的存储数据量）

 

代码如下

main.js

1.自定义指令监听发送

2.页面切换监听

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JsonExcel from 'vue-json-excel'
import { get, post } from '@/util/http'

Vue.config.productionTip = false
// Vue.prototype.$axios = axios
Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.use(ElementUI)
Vue.component('downloadExcel', JsonExcel)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

/**
 * 自定义埋点指令
 */
Vue.directive('log', {
  bind(el, binding, vNode) {
    // 当前页面的vue对象
    const ts = vNode.context
    el.addEventListener('click', () => {
      console.log('v-log指令', binding.value)
      const text = binding.value.text
      store.dispatch('dealLogger', {
        type: '点击操作',
        text,
        curPage: ts.$route.name,
        timeStamp: '事件发生的时间戳' + new Date().getTime() // 时间戳
      })
    })

  }

})

let currentTime = null
let startTime = Date.now()

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  if (to) {
    // 第一步：页面跳转后记录一下当前的时间 currentTime
    currentTime = Date.now()
    // 第二步：计算 currentTime - startTime 的 差值 
    console.log('用户由 ', from.name, ' 页面 跳转到 ', to.name, ' 页面，在 ', from.name, ' 页面停留了 ', currentTime - startTime, '毫秒。转换成秒数约为：', parseInt((currentTime - startTime) / 1000))
    // 通过计算currentTime - startTime 的 差值 之后，再上报数据
    const sed = parseInt((currentTime - startTime) / 1000)
    store.dispatch('dealLogger', {
      type: '页面切换',
      prePage: from.name, // 上一个页面
      curPage: to.name, // 当前页面
      timeStay: '停留了' + sed + 's', // 停留时间
    })

    // 第三步：每次都要初始化一下 startTime
    startTime = Date.now()
  }
  next()
})

// Vue.config.errorHandler = (err, vm, info) => {
//   console.log('*************************************************************************************addEventListener errorHandler')
//   console.log(err)
//   console.log(vm)
//   console.log(info)
//   }

// window.addEventListener('error', (evt) => {
//   console.log('*************************************************************************************addEventListener error')
//   console.log(evt)
// })

// // 监听promise的报错
// window.addEventListener('unhandledrejection', (evt) => {
//   console.log('*************************************************************************************addEventListener unhandledrejection')
//   console.log(evt)
// })

 

vuex文件

export default {
    state: {
        logUrl: 'https://kunpeng.csdn.net/ad/json/list', // 发送埋点的url
        loggerResult: [], // 埋点数据统计
        logLength: 5, // 最大存储埋点数量
        logTime: 60, //  发送埋点间隔时间
    },
    getters: {
        getLogTime: state => state.logTime,
        getLoggerResult: state => state.loggerResult
    },
    mutations: {
        /**
         * 添加埋点数据
         * @param {*} state 
         * @param {*} payload 
         */
        appendLogger: (state, payload) => {
            state.loggerResult.push(payload)
        },
        /**
         * 清空埋点数据
         * @param {*} state 
         * @param {*} payload 
         */
        resetLogger: (state) => state.loggerResult = [],
    },
    actions: {
        /**
         * 处理埋点数据
         * @param {*} param0 
         * @param {*} payload 
         */
        dealLogger({ state, commit, dispatch }, payload) {
            console.log('dealLogger****************', payload)
            commit('appendLogger', payload)
            const res = state.loggerResult
            // 当埋点数量超出定义的最大存储数量，发送一次
            if (res.length >= state.logLength) {
                dispatch('sendLogger')
            }
        },
        /**
         * 发送埋点数据
         * @param {*} param0 
         * @param {*} payload 
         */
        sendLogger({ state, commit }) {
            const res = state.loggerResult
            // 如果没有埋点数据，则不发送
            if (res.length === 0) {
                return
            }
            // 发送数据
            console.log('sendLogger loggerResult', res)
            const img = new Image()

            img.style.display = 'none'

            const removeImage = function () {
                img.parentNode.removeChild(img)
            }

            img.onload = removeImage
            img.onerror = removeImage

            img.src = `${state.logUrl}?params=${JSON.stringify(res)}`

            document.body.appendChild(img)
            // 清空
            commit('resetLogger')
        }
    },
    modules: {
    }
}

页面具体实现

v-log绑定相关信息

<div class="btn">
        <el-form-item>
          <el-button type="primary" @click="onSubmit" v-log="{text: '查询'}">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="onReset" v-log="{text: '重置'}">重置</el-button>
        </el-form-item>
      </div>