vue声明式埋点实践

本文介绍了针对vue的声明式埋点，如何做vue的声明式埋点，使用方便，与脚本逻辑解耦，目前应用在斑马和捕手等众多平台

埋点方案的尝试

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

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

本埋点应用在电商平台，要埋的点比较繁多善变，使用声明式埋点是比较合适的

声明式埋点

vue中提供了自定义指令，在模版元素中插入自定义指令，可以跟踪元素的结构变化，跟踪数据变化，比DOM的data属性更加方便抓取跟踪

按照官方文档一个指令定义对象提供如下几个钩子函数：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作DOM。
• binding：一个对象，包含指令的指令名、绑定值、表达式等。

其中bind和update是比较重要的两个钩子函数，它能跟踪DOM的出现和变化，获取数据并数据上报埋点，具体的代码如下：

Vue.directive('bury-click', {
  bind(el, binding) {
    _ga.buryClick(el, binding)
  },
  update(el, binding) {
    _ga.buryClickUpdate(el, binding)
  },
  unbind(el) {
    _ga.cancelBuryClick(el)
  }
})
复制代码

整个指令的生命周期以及埋点的数据收集方式如下图所示

实现方式

根据现有的埋点需求，主要实现了页面曝光、坑位曝光、坑位点击三种形式

• 页面曝光：对于vue的单页应用来说，页面的切换跟踪就是路由的变化，但是在统一的路由钩子放置每个页面不同的数据不太现实，于是就考虑在每个view页面根部埋下页面曝光数据，只要用户一访问该页面，就触发页面曝光
• 坑位曝光：坑位的曝光实际就是一个DOM出现在用户视野范围内进行抓取，需要借助全局滚动（scroll）事件，使用节流的方式检测目标坑位是否在可视范围内，在的话就触发坑位曝光
• 坑位点击：坑位的点击需要对目标坑位进行点击事件绑定，在不影响目标坑位原有事件基础上，绑定点击的埋点上报，在元素unbind的时候解除对应点击事件

针对以上三种情况，不入侵业务的脚本逻辑，制定了三个自定义指令v-page-exposure、v-exposure、v-bury-click

• v-page-exposure

<div class="root" v-page-exposure="'1.1.0.0'"></div>
复制代码

如代码指令所示，a.b.c.d分别为应用代码.页面代码.模块代码.坑位代码，就是埋点统计需要的代码信息，把信息收集上报即可。需要注意的是指令信息是一个js表达式，如果不加引号会默认执行js变成一个对象取值报错。

• v-exposure

<div v-exposure="{gcms:[{type:1, uri:22},{type:2, uri:41}],seq:[1],spm:'1.0.0.0'}"></div>
复制代码

坑位曝光收集的是一个js对象，包含一些坑位的代码信息、位置信息、商品信息、跳转信息等。坑位曝光采用实时上报，且曝光一次就不再曝光，所以每次bind的时候把所有曝光坑位收集在一个数组，坑位出现在用户可视范围内一次就上报弹出数组，具体的代码如下：

buryExposure(el, binding) {
  this.exposureList.push({
    el,
    binding: binding.value
  })
}

exposure() {
  if (this.exposureList.length !== 0) {
    for (let i = 0; i < this.exposureList.length; i++) {
      let item = this.exposureList[i]
      const currTop = item.el.getBoundingClientRect().top + window.pageYOffset
      const scrollTop = document.documentElement.scrollTop
      // 修正5像素的偏差
      if (currTop + 5 >= scrollTop && currTop < (scrollTop + window.innerHeight)) {
        // 发送曝光事件
        if (isWebview) {
          this.appAction()
        } else {
          this.action()
        }
        this.exposureList.splice(i, 1)
        i--
      }
    }
  }
}
复制代码

• v-bury-click

<div v-bury-click="JSON.stringify({gcms:[{type:1, uri:22},{type:2, uri:41}],spm:'1.0.0.0'})"></div>
复制代码

坑位点击也是一个js对象，包含坑位的各种信息，在页面加载的时候绑定点击事件，用户点击的时候上报埋点。在实际使用过程中埋点需要跟踪最新的数据信息，比如在加入购物车的环节中，加入购物车的按钮是同一个不变，但下一次选择商品的信息可能发生改变，所以每次点击按钮需要传递最新的埋点信息。由于指令信息是一个js表达式，对象是一个引用类型，改变对象的值不会触发update钩子函数，所以需要JSON字符串化一下。具体的代码如下：

buryClick(el, binding) {
  el.addEventListener('click', this.click.bind(this, el))
}

click(el) {
  ...
  this.gaData.ext = encodeURIComponent(JSON.stringify({ eventId: '2', ...value }))
  if (isWebview) {
    this.appAction()
  } else {
    this.action()
  }
}
复制代码

附加信息

除了埋点点位信息之外，还需要一些常用的基础信息，比如用户信息、系统信息、会话信息、端信息等等，都是可以通过页面初次加载的时候收集。另外还需要验证埋点请求，要在业务请求头中埋入埋点的信息，这些信息只存在于埋点的缓存中，于是就重写XHR和fetch请求，在每次发送请求前加入需要的埋点信息，与业务解耦。

转载于:https://juejin.im/post/5cac4bdc5188251b2616f776