数据埋点已经不是什么新鲜事儿了，最近刚好做到，记录一下，话不多说，进入正题。

一、准备工作

这部分比较简单，就是定义埋点数据上报相关的工作，首先和你的后端小伙伴定义好数据格式和数据库表，其次就是前端上报流程设计。假设你们已经定义好埋点数据表和埋点数据上报接口，这时候前端就要认真思考如何设计上报流程了，因为前端不可能每触发一次就上报一次，这样用户多的情况下，接口压力很大，这就需要考虑如何存储操作数据了，一般来说，存储不可能放到storage里面去，老油条们可以从浏览器中看到你收集了什么数据，因此我们选用vuex来管理操作数据。存储的问题解决了，然后就是上报频率的问题，一般来说，可以设置1-5分钟的定时器去轮询上报，同时设置刷新或关闭页面立即上报就可以了，设置刷新或关闭页面上报的代码如下：

// 监听浏览器刷新或关闭
window.addEventListener('beforeunload', () => {const actions = store.getters.actions // 从vuex中获取操作saveAction(actions).then(res => { console.log(res) }) // 上报
})

ok，准备工作做完，下一步开始埋点。

二、使用Vue Router埋点页面级操作

我们经常看到，很多埋点统计报表里面统计了用户点击量最多的页面、模块之类的，这个功能我们可以通过Vue Router做到，大家应该都知道路由守卫，利用它我们可以在进入下一个页面之前，加上存储埋点数据的操作，这样就完成了页面级埋点数据的收集，代码如下：

router.beforeEach(async(to, from, next) => {const hasToken = getToken()// 判断tokenif (hasToken) {if (to.path === '/login') {next({ path: '/' })} else {const hasRoles = store.getters.rolesif (hasRoles) {// 触发收集埋点数据triggerAction(to.path, to.meta.title)next()} else {try {......  // 用户无角色信息时一系列操作// 触发收集埋点数据triggerAction(to.path, to.meta.title)next({ ...to, replace: true })} catch (error) {Message.error(error || 'Has Error')}}}} else {if (whiteList.indexOf(to.path) !== -1) {next()} else {next(`/login`)}}
})

这样我们就能完成页面级操作数据的收集，当然还可以灵活设置白名单之类的，比如首页和登陆页的路由跳转数据不收集等等操作，因为默认就会跳到这些页面，数据意义不大。好了，介绍完页面级的，下面介绍页面元素级的埋点操作。

三、基于指令的页面元素埋点操作

除了页面级埋点外，重要页面中元素的操作数据也非常重要，它能一定程度上反应用户最喜欢点击页面上的哪一块儿内容，比如用户喜欢点官网首页的广告栏（图片图片图片）之类的。但是我们不可能将上面的触发收集埋点数据的函数放到业务代码中去，所以我们需要使用Vue的自定义指令来完成收集操作，代码如下：

// 将此文件导入main.js中
import Vue from 'vue'
import store from './store'// 埋点指令
Vue.directive('track', {bind: (el, binding, vnode) => {if (binding.value) {switch (binding.value.act) {case 'click':el.onclick = function() {// 触发埋点操作store.dispatch('user/setActions', actions)}breakcase 'other':console.log('other')break}}}
}

 <!-- 埋点元素 --><el-button type="primary" @click="click" v-track="{ act: 'click' }">查询</el-button>

这样当点击按钮时就会触发收集元素操作数据的函数，从而收集了操作数据，以上两种收集方式再配合每1-5分钟的数据上报和刷新关闭立即上报，就完成了Vue的数据埋点操作。上面的代码只展示了关键部分，具体的数据上报格式需自行设计，还是那句话，作为coder要多写代码才是正道，记录到此为止，喜欢的可以关注下微信公众号：Js之美，不定期更新相关知识

基于Vue的数据埋点统计相关推荐

毕业设计之基于Vue的数据可视化平台
真正的大师,永远都怀着一颗学徒的心! 一.项目简介今天说的这个软件是一款基于Vue的数据可视化平台,后端采用的是go语言. 二.实现功能布局与缩放拖拽旋转刻度尺吸附图表(柱状图.折线图. ...
基于Vue的数据可视化设计框架，数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器简介 ...
基于vue 通过数据过滤实现表格合并
基于vue 通过数据过滤实现表格合并需求基于vue渲染的数据表格需要对相同的列进行合并思路自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到row ...
基于vue大数据可视化（大屏展示）案例
项目地址: vue-big-screen 点击这里一.项目描述 1,一个基于 vue.datav.Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新 ...
数据埋点统计页面使用时长
Android应用中的页面,也就Activity,Fragment两种.对于Activity,系统了全局的生命周期监听的方法,只需要在onResume中记录页面显示时的时间,在onPause中计算显示 ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
微信小程序开发之数据埋点统计
在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间在对小程序api进行了一番研究之后,发现获取这些数据其实并不难当前页面: let pages = getC ...
页面数据埋点统计方案
需要采集的数据访问设备: navigator 环境信息(地理位置): navigator.geolocation 会话信息:登录接口返回代码信息:项目设置相关配置文件访问页面信息: load.h ...
vue 大数据渲染_技术专栏 | DMap——实战Vue百万条数据渲染表格组件开发
作者:TalkingData 李志刚本文由TalkingData原创,转载请获取授权. 李志刚:近几个月在开发一个基于Vue的数据可视化分析辅助应用---DMap(谛听),一套为数据分析师和数据科学 ...
关于数字化营销技术实现之【数据埋点】
1.如何实现数据埋点? 小程序数据埋点是指在小程序中收集用户行为数据和业务数据的一种技术手段,以便对用户行为和业务运营进行分析和优化.下面是一些实现小程序数据埋点的方法: 使用小程序统计分析工具:小程 ...

基于Vue的数据埋点统计

一、准备工作

二、使用Vue Router埋点页面级操作

三、基于指令的页面元素埋点操作

基于Vue的数据埋点统计相关推荐

最新文章

热门文章