基于Vue的数据埋点统计

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

一、准备工作

这部分比较简单，就是定义埋点数据上报相关的工作，首先和你的后端小伙伴定义好数据格式和数据库表，其次就是前端上报流程设计。假设你们已经定义好埋点数据表和埋点数据上报接口，这时候前端就要认真思考如何设计上报流程了，因为前端不可能每触发一次就上报一次，这样用户多的情况下，接口压力很大，这就需要考虑如何存储操作数据了，一般来说，存储不可能放到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()
  // 判断token
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      const hasRoles = store.getters.roles
      if (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)
          }
          break
        case 'other':
          console.log('other')
          break
      }
    }
  }
}

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

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