前端用户行为数据异常数据采集插件（带有演示）

　　最近，一个朋友再次提到了前端数据采集.

　　想想以前的开源数据获取插件dataAcquisition

　　由于不关注前端数据分析，因此项目运行不佳

　　但是整个项目还是很不错的，功能比较齐全，我不愿意这样放弃

　　所以我花了一些时间进行重构. 并做了相应的演示

　　借此机会向大家再次介绍并推荐

　　1. 为什么我们需要数据采集？

　　我们问几个问题:

　　一个新产品流程在线，如何获得流程的转化率？您如何知道添加按钮后有多少人点击？在AB方案中，如何获得两种方案的转换？

　　在日常开发中，我们经常听到并看到在后台的学生使用日志来查找问题

　　但是如何定位前端生产问题？用户产生的问题如何反馈给开发人员？

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

　　但是，此过程周期相对较长，大多数用户发现它很麻烦且懒得提供反馈

　　是否存在一种主动采集机制来采集客户端的某些异常情况？

　　是否存在用于采集用户数据的页面行为采集工具？

　　本文旨在向您介绍前端主动异常数据采集工具-dataAcquisition

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

　　说到数据采集，我们必须首先知道可以采集哪些数据

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

　　2. 用户的输入操作，通过输入，聚焦，模糊事件来获取输入框的内容以及用户的操作

　　3. 页面访问数据，通过记录页面URL并报告，可以实现PV统计，而使用uuid可以实现UV统计

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

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

　　6. 页面性能数据，通过性能界面计算DNS解析度，TCP链接时间，白屏时间，dom解析时间等.

　　利用以上数据，我们可以重现用户的操作过程

　　它还可以及时采集用户端发生的异常

　　通过对用户行为的分析，可以得出用户的习惯和偏好.

　　以便优化产品计划，优化业务流程并获得数据驱动的产品.

　　3. 采集数据的方式有哪些？

　　常用数据采集方法:

　　1. 自动掩埋点，通过大范围的数据采集从数据中过滤出特定的元素，这样做的缺点是数据量太大，优点是无需事先定制采集计划上线.

　　2. 通过向元素添加特定的id或class属性来主动掩埋点，以便采集工具可以准确地采集所需的数据. 缺点侵入了页面. 优点是数据准确.

　　3. 圈出掩埋点并通过单击选择页面元素，这比自动采集更准确，比手动掩埋更方便. 但是圈出的兼容性问题令人头疼.

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

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

　　圈出的功能也在开发计划中.

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

　　四个. 关于dataAcquisition

　　dataAcquisition插件于2017年开发，迭代时间相对较短.

　　自从上线生产以来的一年中没有错误

　　当然，由于情况不同，仍有许多问题尚未解决

　　当前实现的功能:

　　1. 前端PV和UV数据采集和报告

　　2. 用户点击，输入行为采集和报告

　　3. 实现页面性能采集

　　4. 实现代码异常采集

　　5. 实现接口异常采集

　　该项目已在GitHub上开源，地址:

　　它收录采集插件的源代码，一个示例演示

　　需要它的学生可以下载和使用

　　5.demo示例

　　该插件提供了一个简单的演示，包括数据采集页面和数据分析页面

　　1. 数据采集页面:

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

　　请注意，仅在刷新页面或单击报告按钮时，采集的数据才会发送到后台

　　PC屏幕截图:

　　

　　2. 数据分析页面:

　　报告的数据将显示在此页面上，在此页面上，您可以观察到以前的所有操作

　　与异常对应的详细数据

　　PC屏幕截图:

　　

　　VI. 邀请参加

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

　　欢迎向我提交公关

　　所有参与者都将记录在作者目录中，并且每个人都将共享项目结果.

　　个人官方帐户: