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

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

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

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

代码如下

main.js

1.自定义指令监听发送

2.页面切换监听

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 import store from './store'
 5 // import axios from 'axios'
 6 import ElementUI from 'element-ui';
 7 import 'element-ui/lib/theme-chalk/index.css';
 8 import JsonExcel from 'vue-json-excel'
 9 import { get, post } from '@/util/http'
10
11 Vue.config.productionTip = false
12 // Vue.prototype.$axios = axios
13 Vue.prototype.$post = post;
14 Vue.prototype.$get = get;
15 Vue.use(ElementUI)
16 Vue.component('downloadExcel', JsonExcel)
17
18 new Vue({
19   router,
20   store,
21   render: h => h(App)
22 }).$mount('#app')
23
24 /**
25  * 自定义埋点指令
26  */
27 Vue.directive('log', {
28   bind(el, binding, vNode) {
29     // 当前页面的vue对象
30     const ts = vNode.context
31     el.addEventListener('click', () => {
32       console.log('v-log指令', binding.value)
33       const text = binding.value.text
34       store.dispatch('dealLogger', {
35         type: '点击操作',
36         text,
37         curPage: ts.$route.name,
38         timeStamp: '事件发生的时间戳' + new Date().getTime() // 时间戳
39       })
40     })
41
42   }
43
44 })
45
46 let currentTime = null
47 let startTime = Date.now()
48
49 router.beforeEach((to, from, next) => {
50   console.log('beforeEach')
51   if (to) {
52     // 第一步：页面跳转后记录一下当前的时间 currentTime
53     currentTime = Date.now()
54     // 第二步：计算 currentTime - startTime 的 差值
55     console.log('用户由 ', from.name, ' 页面 跳转到 ', to.name, ' 页面，在 ', from.name, ' 页面停留了 ', currentTime - startTime, '毫秒。转换成秒数约为：', parseInt((currentTime - startTime) / 1000))
56     // 通过计算currentTime - startTime 的 差值 之后，再上报数据
57     const sed = parseInt((currentTime - startTime) / 1000)
58     store.dispatch('dealLogger', {
59       type: '页面切换',
60       prePage: from.name, // 上一个页面
61       curPage: to.name, // 当前页面
62       timeStay: '停留了' + sed + 's', // 停留时间
63     })
64
65     // 第三步：每次都要初始化一下 startTime
66     startTime = Date.now()
67   }
68   next()
69 })
70
71 // Vue.config.errorHandler = (err, vm, info) => {
72 //   console.log('*************************************************************************************addEventListener errorHandler')
73 //   console.log(err)
74 //   console.log(vm)
75 //   console.log(info)
76 //   }
77
78 // window.addEventListener('error', (evt) => {
79 //   console.log('*************************************************************************************addEventListener error')
80 //   console.log(evt)
81 // })
82
83 // // 监听promise的报错
84 // window.addEventListener('unhandledrejection', (evt) => {
85 //   console.log('*************************************************************************************addEventListener unhandledrejection')
86 //   console.log(evt)
87 // })

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>