最近有朋友又提起了前端数据采集。想到了之前开源的数据采集插件dataAcquisition，因为没有重视前端的数据分析，所以项目运行的不是很好，但是整个项目还是很不错的，功能也比较齐全.向下。并做了相应的demo借此机会再次向大家介绍并推荐下一款。为什么需要数据采集？我们问了几个问题：新产品上线过程中如何获取转化率？添加一个按钮，如何找出有多少人点击了？scheme为AB时如何得到两个scheme的转换？在日常开发中，我们经常可以听到后台同学用日志来定位问题，但是如何定位前端生产问题呢？用户产生的问题如何反馈给开发者？我们之前的项目需要用户反馈给客服，然后通过工单反馈给开发。不过这个流程周期比较长，大部分用户觉得麻烦，也懒得反馈。是否有一个主动收集机制来收集一些客户？异常的？有没有收集用户数据的页面行为收集工具？本文为大家介绍的是前端主动异常数据采集工具——dataAcquisition2、我们可以采集哪些数据？说到数据收集，我们需要知道可以收集哪些数据。1、用户的点击数据，通过事件代理，可以采集页面发生的所有点击事件，得到点击元素2、用户的输入操作，通过input、focus、blur事件获取内容输入框，以及用户的操作3.页面访问数据，通过记录页面url并上报，可以实现PV统计，使用uuid可以实现UV统计4.页面中的代码Exceptions，收集发生在代码通过window.onerror5.页面出现故障，接口数据异常，通过代理ajax方法，报错方法执行前的请求参数和结果6.页面性能数据，通过性能接口计算DNS解析，TCP连接时间、白屏时间、dom解析耗时等。通过以上数据，我们可以重现用户的操作过程，及时收集用户端发生的异常情况。通过对用户行为的分析，我们可以得出用户的习惯和偏好。以优化产品方案，优化业务流程，实现数据驱动产品。3.收集数据的方式有哪些？常见的数据采集方式：1.自动点埋，通过大规模的数据采集，从数据中筛选出特定元素。这样做的缺点是数据量太大，优点是上线前不需要自定义采集方案。2、主动埋点。通过为元素添加特定的id或class属性，收集工具可以准确收集到需要的数据。缺点是侵占页面。优点是数据准确。3、圈出埋点，点击选择页面元素，比自动采集更准确，比手动埋点更方便。但是圈选的兼容性问题很头疼。市面上有付费项目有圈点和埋点，报价基本都是10W+。我们今天介绍的dataAcquisition可以完美支持自动主动埋点。圈出的功能也在开发计划中。作为一个开源工具，能解决眼前的问题，何乐而不为呢？4.关于dataAcquisitiondataAcquisition插件是2017年开发的，迭代时间比较短。自发布到生产以来，一年内没有出现任何错误。当然，由于场景不同，还有很多问题没有暴露出来。目前已经实现的功能点：1、前端PV、UV数据采集上报2、用户点击、输入行为采集上报3、实现页面性能采集4、实现代码异常采集5、实现接口异常采集项目已经在GitHub上开源，地址：https://github.com/adminV/dataAcquisition包含采集插件源码，演示demo需要的同学可以下载使用这五个。demo示例插件提供了一个简单的demo，包括数据采集页面、数据分析页面1.数据采集页面：http://open.isjs.cn/demo-jquery/index.html在这个页面会采集所有的行为并报道。需要注意的是，只有在页面刷新或点击上报按钮时，采集到的数据才会发送到后台PC。截图：2.数据分析页面：http://open.isjs.cn/admin/index.html上报的数据会显示在该页面。在这个页面可以观察到之前的所有操作和异常PC截图对应的详细数据：6.邀请参与一个人的精力是有限的，开源项目的维护需要一些小伙伴的共同努力，欢迎大家提交pr到我。所有参与者都将记录在作者目录中，大家共享项目成果。个人公众号：
