Vue埋点初探 | 前端埋点 | PV埋点| 交互埋点-一一网

这是我参与更文挑战的第26天，活动详情查看：更文挑战

因为最近的业务需要, 准备开始搞前端埋点~

埋点简介

埋点分类

埋点按照数据获取的方式一般分为一下3种:

页面埋点：统计用户进入或离开页面的各种维度信息，如页面浏览次数（PV）、浏览页面人数（UV）、页面停留时间、浏览器信息等。
点击埋点：统计用户在应用内的每一次点击事件，如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。
曝光埋点：统计具体区域是否被用户浏览到，如活动的引流入口的显示、投放广告的显示等。

因为业务中不需要曝光埋点, 所以本文的重点放在页面埋点和点击埋点.

埋点方案

目前现有的埋点方案有命令式埋点、声明式埋点、可视化埋点、无痕埋点

命令式埋点是用比较常见的方式，在用户产生行为的地方使用js方法进行数据上报，优点是埋点方式比较简单，缺点是与业务耦合度较高
声明式埋点是在具体DOM元素上进行数据绑定，只需组件开发人员在sdk上制定埋点方案，业务开发人员设置数据即可，优点是埋点代码与具体的交互和业务逻辑解耦
可视化埋点是通过可视化工具配置埋点，需要另外配套一个平台控制埋点的埋入，优点是自动生成埋点代码嵌入到页面中，减轻业务开发人员的埋点负担，目前做得好得例如Mixpanel
无埋点是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据，优点是完全无需业务参与，完全与业务解耦，目前比较流行的例如GrowingIO

由此, 决定页面交互埋点使用Vue自定义指令(声明式埋点)完成, PV埋点使用路由守卫完成

关于Vue指令, 可以看下我之前的文章:

Vue自定义指令基础学习与简单使用~ 指令实战之滚动条自适应指令

埋点实战

交互埋点

utils/index.js

export class Click {
  add(entry) {
    const tp = entry.el.attributes['track-params'].value
    entry.el.addEventListener('click', function() {
      console.log('add一次, tp: ', tp);
      console.log('tpJSON: ', JSON.stringify(tp));
    })
  }
}
复制代码

directives/track.js

import { Click } from './utils/index'
const cli = new Click()
export default {
  bind(el, binding) {
    const { arg } = binding
    arg.split('|').forEach(item => {
      if (item == 'click') {
        cli.add({ el })
      } else if (item == 'exposure') {
        // 曝光埋点
      }
    })
  }
}
复制代码

使用:

<button v-track:click :track-params="12455">点击测试</button>
复制代码

PV埋点

utils/track.js

export const trackPage = (id, data = {}, query = {}) => {
  console.log('id: ',id);
  console.log('data: ',data);
  console.log('query: ',query);
}
复制代码

config/track.js

export const PVInfoMap = {
  '/share-doc': {
    id: 'share_doc_page.pv',
    query: {},
    data: {}
  }
}
复制代码

permission.js

import router from '@/router'
import { trackPage } from '@/utils/track.js'
import { PVInfoMap } from '@/plugins/config/track.js'
...
router.beforeResolve((to, from, next) => {
  const { id, query, data } = PVInfoMap[to.path] || {}
  if(id) {
    if(query && Object.keys(query).length) {
      const isMatch = (route) => {
        if(!route) return false
        return Object.keys(query).every(key => {
          return query[key] == route.query[key]
        })
      }
      if(isMatch(to) && !isMatch(from)) {
        trackPage(id,data || {})
      }
    } else {
      if(from.path !== to.path) {
        trackPage(id, data || {})
      }
    }
  }
  next()
})
复制代码