之前开源的数据采集工具-dataAcquisition时间重构了下！

　　之前开源的数据采集工具-dataAcquisition时间重构了下！

　　最近朋友又提到了前端数据采集。

　　想想之前的开源数据采集plugin dataAcquisition

　　因为不注重前端数据分析，项目运行得不好

　　但是整个项目还是很不错的，功能也比较齐全，所以我不甘心就这样放弃

　　所以我花了一些时间重构它。并做了相应的demo

　　借此机会再次介绍和推荐给大家

　　一.为什么需要data采集？

　　我们问几个问题：

　　一个新产品流程上线了，如何获取流程的转化率？

　　有多少人通过添加按钮点击了？

　　在AB计划中，如何得到两个计划的转换？

　　在日常开发中，我们经常可以听到和看到后台的同学用日志来定位问题

　　但如何定位前端生产问题？

　　如何将用户产生的问题反馈给开发者？

　　我们之前的项目需要用户反馈给客服，然后通过工单反馈给开发

　　但是这个流程周期比较长，大部分用户觉得麻烦，懒得反馈

　　是否有主动采集机制来采集 来自客户端的一些异常？

　　有没有采集user 数据的页面行为采集工具？

　　本文文章介绍前端活跃异常数据采集tool-dataAcquisition

　　二.我们可以采集什么数据？

　　说到数据采集，首先要知道采集可以是什么数据

　　1.user的点击数据，通过事件代理，可以采集去页面上发生的所有点击事件，获取点击元素

　　2.User的输入操作，通过input、focus、blur事件获取输入框的内容，以及用户的操作

　　3.页面访问数据，通过记录页面url并上报，实现PV统计，用uuid实现UV统计

　　4. 页面代码异常。使用window.onerror采集代码中的异常

　　5.页面失败，接口数据异常，通过代理ajax方法，在错误方法执行前上报请求参数和结果

　　6.page 性能数据，通过性能接口计算出DNS解析、TCP链接时间、白屏时间、dom解析时间等

　　有了上面的数据，我们就可以重现用户的操作过程

　　你也可以及时采集客户端发生的异常

　　通过对用户行为的分析，可以推导出用户的习惯和偏好。

　　从而优化产品方案，优化业务流程，实现数据驱动的产品。

　　三.采集数据有哪些方法？

　　常用数据采集方法：

　　1.自动埋点，通过大面积数据采集过滤掉数据中的特定元素，这样做的缺点是数据量太大，优点是你不上线前无需自定义采集方案。

　　2. 积极嵌入积分。通过给元素添加特定的id或class属性，采集工具可以准确获取采集需要的数据。缺点是会侵入页面。优点是数据准确。

　　3.Circle选择埋点，通过点击选择页面元素，比自动采集更准确，比手动埋点更方便。但是圈起来的兼容性问题很头疼。

　　市场上有带圈埋点的付费项目，报价基本在10W+

　　我们今天介绍的dataAcquisition可以完美支持自动和主动埋藏。

　　圈出的功能也在开发中。

　　作为一个可以解决眼前问题的开源工具，还有什么理由不去尝试？

　　四.关于数据获取

　　dataAcquisition插件是2017年开发的，迭代时间比较短。

　　上线生产以来一年内未出现任何BUG

　　当然，由于场景不同，还有很多问题没有暴露

　　目前实现的功能点：

　　1.前端PV、UV数据采集Report

　　2.用户点击，输入行为采集Report

　　3.实现页面性能采集

　　4.实现代码异常采集

　　5.实现接口异常采集

　　项目已在GitHub开源，地址：

　　内含采集插件源码，示例demo

　　有需要的同学可以下载使用

　　五.demo 示例

　　插件提供了一个简单的demo，包括数据采集页面、数据分析页面

　　1.数据采集page:

　　此页面上的所有操作将由采集报告，

　　需要注意的是采集的数据只有在页面刷新或点击报告按钮时才会发送到后台

　　电脑截图：

　　

　　2.数据分析页面：

　　上报的数据会显示在这个页面上，在这个页面上可以观察到之前的所有操作

　　以及异常对应的详细数据

　　电脑截图：

　　

　　六.邀请参与

　　一个人的精力有限，开源项目的维护需要一些合作伙伴共同努力，

　　欢迎提交pr给我

　　所有参与者都将被记录在作者目录中，每个人都会分享项目的成果。