代码之家  ›  专栏  ›  技术社区  ›  Nishant Bajracharya

如何创建类似hotjar的应用程序?[关闭]

  •  0
  • Nishant Bajracharya  · 技术社区  · 7 年前

    是否有任何教程或文档解释如何创建类似hotjar的应用程序?有人对此有什么见解吗? 我想创建分析用户行为的应用程序。喜欢

    • 达到用户滚动页面的百分比
    • 在DOM的哪个部分中,用户单击了

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

    我用静态数据和热图制作了报告 现在我只想跟踪用户活动,如滚动点、鼠标悬停/单击点,这些点对于不同的屏幕大小或设备可能有所不同… 有什么API或JS框架可以帮助吗?

    1 回复  |  直到 7 年前
        1
  •  3
  •   jannis Anjali    7 年前

    你不会找到一个单一的教程,因为你不会找到一个“建立一个网页搜索引擎自己”的教程。网站用户跟踪是一个非常复杂的话题。开发这样的解决方案需要付出巨大的努力和投资。它还需要昂贵的基础设施(服务器从用户那里收集数据并进行处理)。

    此外,它还存在一些风险和问题。由于用户跟踪的道德问题,用户隐私问题已成为当前的热门话题。网络用户的意识一直在增长,许多用户选择退出网络跟踪。行业遵循并扩展了用户实现这一点的可能性(技术和法律)。

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

    然后,在实施方面:

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

      • 实施个人用户识别,以便对他们在网站/多个网站上的行为进行分类。
      • 实现用户的视区捕获,以了解用户在给定时间点在浏览器窗口中看到的内容。
      • 实现用户的交互捕获-点击、滚动、拖动、页面间导航、输入(注意敏感数据-密码、地址)等。
      • 实现将这些信息安全地发送到服务器进行分析。
      • 找出一个方法把你的跟踪应用程序放在网站上(在所有流行的浏览器中-不要忘记旧的浏览器!)在大多数情况下,它要求网站所有者在其网站的每个页面上放置一小块JS。下面是Hotjar架构师对该脚本的外观和原因的解释: https://stackoverflow.com/a/45900133/4494577 .
    2. 在服务器上(相对容易的部分)

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

    也可以看到这个问题: How does HotJar generate their recordings?

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

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