美文网首页技术干货前端攻城狮程序员
vue中教你用decorator实现无痕埋点

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

作者: Victor细节 | 来源:发表于2018-02-23 17:22 被阅读0次
    什么是埋点?

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

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

    • 初级:在产品、服务转化关键点植入统计代码,据其独立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');
      };
    }
    

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

    相关文章

      网友评论

        本文标题:vue中教你用decorator实现无痕埋点

        本文链接:https://www.haomeiwen.com/subject/xjsxxftx.html