前端用户行为数据异常数据采集插件(附 demo)

[isjscn]

最近有朋友又重新提起了前端的数据采集。

想到了之前开源的数据采集插件 dataAcquisition

因为不重视前端数据分析，导致项目没有很好的运行起来

但是整个项目还是很不错的，功能也比较齐全，不舍得就这么放弃掉

于是花点时间重构了下。并做了对应的 demo

借这个机会再次向大家介绍推荐下

一.为什么需要数据采集？

我们问几个问题：

1. 一个新的产品流程上线，如何得出该流程的转化率呢？

2. 一个按钮的加入，如何得出有多少人点击？

3. AB 方案时，如何得出两种方案的转化？

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

1. 但是前端的生产问题如何定位呢？

2. 用户产生的问题如何能反馈到开发手中呢？

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

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

有没有一种主动的收集机制，来采集客户端的一些异常？

有没有一个页面行为的收集工具，用于采集用户数据？

本篇文章就是要向大家介绍前端的主动异常数据采集工具 - dataAcquisition

二.我们可以采集哪些数据？

说到数据采集，我们要先清楚可采集的数据有哪些

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

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

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

4.页面中代码异常，通过 window.onerror 来采集代码中发生的异常

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

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

有了以上的数据，我们可以复现用户的操作流程

也可以及时采集到用户端发生的异常

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

从而优化产品方案，优化业务流程，做到数据驱动产品。

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

常见的数据采集方式：

1.自动埋点，通过大面积的数据采集，从数据中过滤出特定元素，这样做的缺点是数据量过大，优点是不需要在上线前定制采集方案。

2.主动埋点，通过对元素增加特定的 id 或 class 属性，使得采集工具准确的采集需要的数据，缺点的侵入了页面，优点是数据准确。

3.圈选埋点，通过点击的方式，对页面元素进行选定，比自动采集更精确，比手动埋点更方便。但是圈选的兼容性问题令人头疼。

市面上具备圈选埋点的付费项目，报价基本在 10W+

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

圈选的功能也在开发计划中。

作为一个开源的工具，能解决眼前的问题，有什么理由不试一下呢？

四.关于 dataAcquisition

dataAcquisition 插件在 17 年开发完成，迭代的时间比较短。

上线到生产后一年的时间没有出现过 bug

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

目前已实现的功能点：

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 截图：

六.邀请参与

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

欢迎大家提交 pr 给我

所有参与者会被记录到作者目录，大家共享项目成果。

个人公众号：