如何实现vue项目中的前端埋点功能？

本文共计1825个文字，预计阅读时间需要8分钟。

埋点方案的确立。行业领域的埋点方案主要分为以下三类：代码埋点：在需要埋点的节点调用接口，携带数据上传；可视化埋点：利用可视化工具进行配置化的埋点；即所‘即点即用’。

埋点方案的确定。业界的埋点方案主要分为以下三类：

• 代码埋点：在需要埋点的节点调用接口，携带数据上传。如百度统计等；
• 可视化埋点：使用可视化工具进行配置化的埋点，即所谓的「无痕埋点」，前端在页面加载时，可以读取配置数据，自动调用接口进行埋点。如开源的Mixpanel;
• 无埋点：前端自动采集全部事件并上报埋点数据。如国内的神策数据等；

在当时排期紧凑，人力紧缺的情况下，显然不允许我们去开发可视化埋点方案和无埋点方案，所以只能采取代码埋点方案。

命令式埋点

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

// 页面加载时发送埋点请求 $(document).ready(function(){ // ... 这里存在一些业务逻辑 sendRequest(params); }); // 按钮点击时发送埋点请求 $('button').click(function(){ // ... 这里存在一些业务逻辑 sendRequest(params); });

可以很容易发现，这样的做法很有可能会将埋点代码侵入业务代码，这使整体业务代码变得繁琐，容易出错，且后续代码会愈加膨胀，难以维护。