如何创建类似 Hotjar 的应用程序？

Question

是否有任何教程或文档解释创建类似 hotjar 的应用程序？任何人都可以提供这方面的任何见解吗？我想创建分析用户行为的应用程序..喜欢

• 用户滚动页面的百分比

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

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

我已经使用静态数据和热图制作了报告现在我只想跟踪用户活动，如滚动点、鼠标悬停/点击点，这些活动可能因不同的屏幕尺寸或设备而异......是否有任何 api 或 js 框架可以帮助？

Answer 1

您不会找到有关此的单个教程，因为您不会找到“自己构建网络搜索引擎”教程。网站用户跟踪是一个非常复杂的话题。开发这样的解决方案需要巨大的努力和投资。它还需要昂贵的基础设施（从用户那里收集数据并处理它们的服务器）。

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

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

然后说到实现：

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

   • 实施个人用户识别，以便对他们跨网站/多个网站的行为进行分类（指纹识别）。事实上，这也可能需要在服务器上进行一些工作。
   • 记录尽可能多的用户交互 - 单击、滚动、拖动、按键、页面之间导航、输入输入（注意敏感数据 - 密码、地址）等。这些数据将成为用户行为分析的基础服务器稍后。此外，结合捕获的 DOM 状态（初始和以后的突变），这允许我们创建用户浏览会话的“记录”。我将“录制”一词放在引号中，因为与许多人的想法相反，这些视频通常不是通过录制用户的屏幕创建的。这将过于复杂和繁重。相反，它们由我之前提到的收集的数据组成。了解更多关于这个（恕我直言，最有趣）的话题在这个答案来“HotJar 如何生成他们的录音？” .
   • 实现将上述信息安全发送到服务器进行分析。
   • 再次：使您的解决方案安全。您将收集的数据高度敏感，不应该为了您和站点用户的利益而落入坏人之手。您可能需要像 HotJar 一样资助一个 Bug Bounty 计划（我警告过您它会很贵！）。
   • 找出一种将您的跟踪应用程序注入网站代码的方法（在所有流行的浏览器中 - 也不要忘记旧版浏览器！）。在大多数情况下，它需要网站所有者在其网站的每个页面上放置一小段 JS。阅读Erik Näslund（HotJar 架构师）对“为什么像 Hotjar 和 Google Analytics 这样的网站使用复杂的跟踪代码而不仅仅是标签？”的回答。了解更多关于这个脚本的外观和原因。

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

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

前段时间我做了一个非常简单的POC，涵盖了上面提到的一些客户端的东西。这是一个简单的脚本，用于监视 DOM 更改和用户事件（其中一些），并在注入到网页时将它们记录到控制台。在成熟的解决方案中，这将发送到服务器进行处理（而不是写入控制台）。

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