前端埋点框架（埋点前端vue）



vue-trackjs 是一个基于vue自定义指令开发的声明式自动埋点方案，压缩后只有2.5K，对业务代码没有侵入影响。使用localStorage对统计数据进行缓存，默认每60s轮询上报一次数据。入手毫无难度，插件也预留了自定义扩展API，给你充分的发挥空间。

前言

埋点技术，即在正常的功能逻辑中添加统计逻辑，进行数据收集，后续经过各种自定义的数据整理，为对应的产品提供数据分析，实现数据可视化。

常见的前端埋点技术有：代码埋点、可视化埋点、无埋点。

代码埋点：手动在需要埋点的节点调用接口发送数据。
优点：发送数据时间可控，可自定义属性，自定义事件。
缺点：时间、人力成本大。

可视化埋点：利用可视化交互手段，通过可视化界面配置控件操作与事件操作发生关系。
优点：成本低，速度快
缺点：行为记录信息少，支持的分析方式少

无埋点：前端自动采集全部事件并上报埋点数据。
优点：无需埋点，方便快捷
缺点：行为记录信息少，传输压力大

插件安装

插件引入

新建track.config.js

指令用法，自带的埋点类型有4种：

但集成的埋点类型不够满足你时，在options新增配置customActionFn，任你造。

当你足够懒不想做过多配置或者以上不能满足你的需求时，可以尝试手动埋点

最后说一下项目的缺点，首先就是需要手动声明和配置，其次呢就是基于localStorage，是容易被删除的，最后是由于60s轮询上报带来的问题，就是用户在下一上报周期前关闭tab或浏览器，该周期内的埋点是无法被上报的，只能等待再次打开应用，为此也增加了一个配置项options.immediate，设置为true时用户再次打开应用会直接上传上一周期的数据。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/17451.html