Vue项目代码埋点

栏目: 编程语言 · 发布时间: 6年前

内容简介:目前主流的埋点方案包括​ 在需要埋点的节点调用接口,携带数据上传。如百度统计等;​

主流埋点方案

目前主流的埋点方案包括

  1. 代码埋点
  2. 可视化埋点
  3. 无埋点

一、代码埋点

​ 在需要埋点的节点调用接口,携带数据上传。如百度统计等;

缺点

​ 工作量较大,每一个组件的埋点都需要添加相应的代码,入侵业务代码,增加项目复杂度。

二、可视化埋点

​ 通过可视化交互的手段,代替代码埋点。将业务代码和埋点代码分离,提供一个可视化交互的页面,输入为业务代码,通过这个可视化系统,可以在业务代码中自定义的增加埋点事件等等,最后输出的代码耦合了业务代码和埋点代码。

​ 可视化埋点听起来比较高大上,实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。

缺点:

​ 业务属性数据,例如,订单号、金额、商品数据量等,通常要调用后台的接口,可视化埋点在这方面的支持有限;

​ 需要借助第三方 工具 实现。

三、无埋点

无埋点并不是说不需要埋点,而是全部埋点,前端的任意一个事件都被绑定一个标识,所有的事件都别记录下来。通过定期上传记录文件,配合文件解析,解析出来我们想要的数据,并生成可视化报告供专业人员分析因此实现“无埋点”统计。

缺点

​ 无法灵活的定制各个事件所需要上传的数据

​ 无埋点采集全量数据,给数据传输和服务器增加压力

代码埋点分类

​ 代码埋点分为 命令式埋点和声明式埋点

命令式埋点

​ 顾名思义,开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。大家肯定都很熟悉这样的代码:

// 页面加载时发送埋点请求 

$(document).ready(function(){    

    // ... 这里存在一些业务逻辑    

    sendRequest(params); 

});

 // 按钮点击时发送埋点请求

 $('button').click(function(){    

    // ... 这里存在一些业务逻辑    

    sendRequest(params); 

});

声明式埋点

​ 声明式埋点对命令式埋点做了改进,将埋点的代码与具体的业务逻辑解耦。从而提高埋点的效率和代码的可维护性。代码如下:

// key表示埋点的唯一标识;act表示埋点方式
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>

​ 因为项目采用Vue框架,所以使用Vue中的 自定义指令 完成声明式埋点。

Vue.directive('log', {

    bind( el, binding ){


        el.addEventListener('click', ()=>{

            Axios.post

        })

    }

});

​ 只需要在需要记录的组件中配置使用v-log指令,加上详情参数就可以完成用户轨迹记录。如下:

// caption表示埋点的模块;paras表示用户的行为
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>

以上所述就是小编给大家介绍的《Vue项目代码埋点》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

More Effective C++(中文版)

More Effective C++(中文版)

梅耶(Scott Meyers) / 侯捷 / 电子工业出版社 / 2011-1-1 / 59.00元

《More Effective C++:35个改善编程与设计的有效方法(中文版)》是梅耶尔大师Effective三部曲之一。继Effective C++之后,Scott Meyers于1996推出这本《More Effective C++(35个改善编程与设计的有效方法)》“续集”。条款变得比较少,页数倒是多了一些,原因是这次选材比“一集”更高阶,尤其是第5章。Meyers将此章命名为技术(tec......一起来看看 《More Effective C++(中文版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具