vue中教你用decorator实现无痕埋点

什么是埋点？

埋点分析，是网站分析的一种常用的数据采集方法。数据埋点分为初级、中级、高级三种方式。数据埋点是一种良好的私有化部署数据采集方式。

埋点技术如何采集数据，有何优缺点？
数据埋点分为初级、中级、高级三种方式，分别为：

• 初级：在产品、服务转化关键点植入统计代码，据其独立ID确保数据采集不重复（如购买按钮点击率）；
• 中级：植入多段代码，追踪用户在平台每个界面上的系列行为，事件之间相互独立（如打开商品详情页——选择商品型号——加入购物车——下订单——购买完成）；
• 高级：联合公司工程、ETL采集分析用户全量行为，建立用户画像，还原用户行为模型，作为产品分析、优化的基础。

无疑，数据埋点是一种良好的私有化部署数据采集方式。数据采集准确，满足了企业去粗取精，实现产品、服务快速优化迭代的需求。

但，因手动埋点工程量极大，且一不小心容易出错，成为很多工程师的痛。且其开发周期长，耗时费力。无痕埋点成为市场新宠。

什么是无痕埋点

首先介绍一下传统埋点存在的问题

• 数据质量（埋错、漏埋）
• 开发成本 （需要统计每个事件的点击，页面的展现pv uv）

无痕埋点就是为了解决这两个问题，一行代码完成统计，无遗漏。

下面先介绍一下本公司vue实现埋点插件

   function leStatic(actiontype, pagetype='',backup = {}){
      ...
      ...
   }；

   Vue.prototype.$log = leStatic;

将埋点方法注册到vue实例下；我们就可以使用 this.$log()来调用这个方法了，每调用一次这个方法就会埋上一个埋点；

铺垫完成，接下来该开始我们的表演了

1、我们的无痕埋点能做什么？

* 统计所有页面内事件的点击量
* 统计页面的展现量pv uv

2、怎么应用？

应用很简单，只需要引入封装的方法（Buried），并应用在methods即可

import { Buried } from '@/libs/decorators';

@Buried
methods: {
   ...
}

3、需要注意什么？

• 此方法不局限在methods上是使用，只要是在单文件导出对象一级子对象下均可;

  @Buried
  components: {}

但是考虑到语义更加清晰建议在methods上使用此方法。

• 考虑到并不是所有的方法都需要设置埋点，所以如果某方法不想设置埋点 可以 return 'noBuried' 即可忽略此方法不设埋点。

• 页面展现量统计在钩子函数中 (activated - created - mounted) 这三个钩子内，所以页面内至少有这个三个钩子之一才可统计页面展现量。

4、话不多说，先上代码？

/**
 * @description 全埋点 
 *  1.在所有methods方法中埋点为函数名
 *  2.在钩子函数中 (activated - created - mounted) 依次寻找这三个钩子
 *    如果存在就会增加埋点 VIEW
 * 
 * 用法： 
 *   @Buried
 *   在单文件导出对象一级子对象下;
 *   如果某方法不想设置埋点 可以 return 'noBuried' 即可
 */
export function Buried(target, funcName, descriptor) {
  let oriMethods = Object.assign({},target.methods),
      oriTarget = Object.assign({},target);
  // methods方法中
  if(target.methods) {
    for(let name in target.methods) {
      target.methods[name] = function () {
        let result = oriMethods[name].call(this,...arguments);
        // 如果方法中返回 noBuried 则不添加埋点
        if(typeof result === 'string' && result.includes('noBuried')) {
          console.log(name + '方法设置不添加埋点');
        } else if(result instanceof Promise) {
          result.then(res => {
            if(typeof res === 'string' && res.includes('noBuried')) { console.log(name + '方法设置不添加埋点'); return; };
            console.log('添加埋点在methods方法中：' , name.toUpperCase ());
            this.$log(name);
          });
        }else{
          console.log('添加埋点在methods方法中：' , name.toUpperCase ());
          this.$log(name);
        };
        return result;
      }
    }
  }
  // 钩子函数中
  const hookFun = (funName) => {
    target[funName] = function() {
      let result =  oriTarget[funName].call(this,...arguments);
      console.log('添加埋点，在钩子函数' + funName + '中：', 'VIEW');
      this.$log('VIEW');
      return result;
    }
  }
  // 钩子函数中 view
  if (target.activated) {
    return hookFun('activated');
  } else if (target.created) {
    return hookFun('created');
  } else if (target.mounted) {
    return hookFun('mounted');
  };
}

简单的实现了无痕埋点的实现方案，目前在项目中运转正常。大大减少了开发者的工作量，预防了卖错、漏埋导致上线后无数据统计情况发生。如果有更好的建议，请联系我哦~