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>