前端埋点方案分析

代码埋点

命令式埋点

• 常规方案
• 手动在需要埋点的节点处进行埋点
• 工作量较大,入侵业务代码后续代码会愈加膨胀，难以维护。

声明式埋点

• 例：统计某 dom 点击事件
  • 首先封装一个 vue 指令(directive);

    // 注册一个全局自定义指令 `v-tracking`
    Vue.directive("tracking", {
      // 只调用一次，指令第一次绑定到元素时调用。
      bind: (el, binding) => {
        // 给元素绑定事件
        el.addEventListener(
          "click", _ => {
            // 默认参数设置
            let def = {
              url:'/url',
            }
            let data =  Object.assign(def,binding.value);
            //binding.value为传入的对象字面量，将其转为字符串再通过RSA加密来压缩埋点内容
            console.log(RSA.encrypt(JSON.stringify(data)));
            // 发送埋点数据
          },
          false
        );
      }
    });
    复制代码

  • html

      <button v-tracking="{ tag: '1', remake:'1' }">按钮1</button>
      <button v-tracking="{ tag: '2', remake:'2' }">按钮2</button>
    复制代码

  • 目前埋点代码与业务代码混合再一起的，声明式埋点可以再一定程度上解耦业务代码
  • 一些复杂场景依然需要命令式埋点

无埋点(全埋点)

• 由于采集的是全量数据，所以产品迭代过程中是不需要关注埋点逻辑的，也不会出现漏埋、误埋等现象
• 无埋点采集全量数据，给数据传输和服务器增加压力
• 无法灵活的定制各个事件所需要上传的数据

可视化埋点

• 使用可视化工具进行配置化的埋点，即所谓的「无痕埋点」，前端在页面加载时，可以读取配置数据，自动调用接口进行埋点。如开源的Mixpanel;
• demo