如何创建像Hotjar这样的应用程序？

Question

是否有任何教程或文档说明如何创建类似hotjar的应用程序？谁能对此提供任何见解？ 我想创建分析用户行为的应用程序。

• 用户已滚动页面的百分比

• 用户单击了DOM的哪个部分

• ，并使用heatmap.js为我的一个静态网站/页面创建报告

我已经使用静态数据和热图制作了报告 现在我只想跟踪用户活动，例如滚动点，鼠标悬停/点击点，对于不同的屏幕尺寸或设备，它们可以是不同的。 有没有API或JS框架可以帮助您？

Answer 1

您将找不到与此相关的单个教程，因为您将找不到“自己构建Web搜索引擎”教程。网站用户跟踪是一个非常复杂的主题。开发这样的解决方案将需要巨大的努力和投资。这也将需要昂贵的基础架构（服务器从用户那里收集数据并对其进行处理）。

此外，它也存在一些风险和问题。由于用户跟踪的道德存在问题，因此用户隐私现在成为热门话题。网络用户的意识一直在增长，许多用户选择退出网络跟踪。该行业遵循并扩大了用户这样做的可能性（包括技术和法律方面）。

如果您仍要继续-尽可能多地了解网络用户跟踪。搜索“用户跟踪方法”，“用户跟踪技术”，“网络分析”流行语。

然后涉及实现：

1. 在浏览器（客户端）中

   • 对个人用户进行标识，以便对他们在整个网站/多个网站中的行为进行分类。
   • 实现用户的视口捕获，以了解用户在给定时间在浏览器窗口中看到的内容。
   • 实现用户的交互捕获-单击，滚动，拖动，在页面之间导航，键入输入（注意敏感数据-密码，地址）等。
   • 将这些信息安全地发送到服务器进行分析。
   • 找出一种将跟踪应用程序放置在网站中的方法（在所有流行的浏览器中-也不要忘记旧版浏览器！）。在大多数情况下，这要求网站所有者在其网站的每个页面上放置一小段JS。这是Hotjar架构师对此脚本的外观及其原因的解释：https://stackoverflow.com/a/45900133/4494577。

2. 在服务器上（相对容易的部分）

   • 实施数据处理并生成报告-热图，会话记录，点击流。

也请参见以下问题：How does HotJar generate their recordings?

前段时间，我做了a very simple POC的内容，涵盖了上述一些客户端方面的内容。这是一个简单的脚本，可以监视DOM更改和用户事件（其中一些），并在将其注入到网页时将其记录到控制台。在完善的解决方案中，它将被发送到服务器进行处理（而不是被写入控制台）。

这些记录的事件（DOM变化以及时间戳和用户输入/事件）可用于可靠地重现用户在浏览器窗口中看到的内容以及他们如何与之交互。