# Vue 框架下埋点方案&实现

1,720 阅读2分钟

业务场景:

为了解决用户在浏览应用时产生的各种需要上报的行为。包括:页面进入/退出上报、元素曝光、元素点击。通过底层的上报库提供的基础上报能力,结合业务的特性,在上层进行更近一步的封装。

总体框架:

基础上报 report 库:

基于 bencon 封装的基础上报库,上层的所有上报方法调用的都是此基础库的 report 方法。也可以设置上报的基础参数和用户信息。

上报的数据结构:

  1. spmArr 是页面进入和退出的关键。它维护的是一个页面栈,每个页面的进入都会在其中压入新的页面元素。注意:页面栈只入栈,不退栈。
  2. spmTimer 是页面停留时间的计时器。页面进入重置时间为当前时间,页面离开统计时长并上报。

埋点上报的公共方法:

  1. pageEnterEvent 页面的进入上报
  2. mixinPageEnterEvent 页面的进入上报
  1. pageLeaveEnter 页面的退出上报

注意:

(1)pageEnterEvent 和 mixinPageEnterEvent 的区分: mixinPageEnterEvent 会在页面栈中新增一个页面元素;pageEnterEvent 会把页面栈的第一个元素的 spm 改为传入的值。原因是有些页面可能是同一个组件复用的(如:登录和注册页面会复用同一个组件,只在样式上进行区分),页面的 spm 需要进入后进行一定的逻辑判断才能确定,提供 pageEnterEvent 就可以在确定 spm 后手动进行一次上报,而不会破坏全局维护的页面栈中元素的顺序。

全局的页面进入和退出上报流程图:

全局监听 wxshow 、 wxhide 、 wxunload 生命周期钩子函数。

页面中使用的指令符方法:

  1. click 点击事件的上报。使用方法:v-report.click。
  2. exposure 曝光事件的上报。使用方法:v-report.exposure。不仅会进行单点曝光,即元素一出现就进行一次曝光上报,还会在元素隐藏后进行一次曝光时长的上报。
  3. goto 点击元素页面跳转的上报。