javascript - 如何创建Hotjar之类的应用程序？

Question

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

• 最多用户滚动页面的百分比

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

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

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

Answer 1

您找不到这方面的任何教程，就像您找不到“自己构建网络搜索引擎”教程一样。网站用户跟踪是一个非常复杂的主题。开发这样的解决方案需要巨大的努力和投资。它还需要昂贵的基础设施(从用户收集数据并处理它们的服务器)。

此外，它也存在一些风险和问题。由于用户跟踪的道德问题，用户隐私现在成为一个热门话题。网络用户的意识不断增强，许多用户选择退出网络跟踪。该行业遵循并扩展用户这样做的可能性(技术和法律方面)。

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

然后在实现时:

1. 在浏览器中(客户端)

   • 实现个人用户身份识别，以便对他们在网站/多个网站上的行为进行分类(指纹识别)。事实上，这可能也需要在服务器上进行一些工作。
   • 记录尽可能多的用户交互 - 单击、滚动、拖动、按键、页面之间的导航、输入内容(注意敏感数据 - 密码、地址)等。这些数据将成为用户行为的基础稍后在服务器上进行分析。此外，结合捕获的 DOM 状态(初始和后来的突变)，这使我们能够创建用户浏览 session 的“记录”。我将“录音”一词放在引号中，因为与许多人的想法相反，这些视频通常不是通过录制用户的屏幕创建的。这将过于复杂且占用大量带宽。相反，它们是由我之前提到的收集的数据组成的。在 this answer 中阅读有关此(恕我直言，最有趣)主题的更多信息。至"How does HotJar generate their recordings?" .
   • 实现将上述信息安全发送到服务器进行分析。
   • 再次强调:确保您的解决方案安全。您将收集的数据高度敏感，为了您和网站用户的利益，不应落入坏人之手。您可能需要资助 Bug Bounty 计划(我警告过您这会很昂贵!)like HotJar did .
   • 找出一种将跟踪应用程序注入(inject)网站代码的方法(在所有流行的浏览器中 - 不要忘记旧版浏览器!)。在大多数情况下，它要求网站所有者在其网站的每个页面上放置一小段 JS。阅读 Erik Näslund's (HotJar architect) answer至"Why do websites like Hotjar and Google Analytics use complex tracking code instead of just a tag?"详细了解此脚本的外观及其原因。

2. 在服务器上(相对简单的部分)

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

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

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