How does HotJar generate their recordings?

拟墨画扇 提交于 2019-12-03 03:25:53

HTML content and DOM changes get pumped through a websocket and stored by Hotjar (minus sensitive information such as form inputs from the user, unless you've whitelisted them), the CSS isn't stored (it gets loaded by you when you watch the recording).

Because they're only recording user activity and DOM changes, there's a lot less data to record than if they were capturing a full video. The downside is that some Javascript driven widgets won't function correctly in the replay.

Relevant information from Hotjar docs:

  • When it comes to recordings, changes to the page are captured using the MutationObserver API which is built-in into every modern browser. This makes it efficient since the change itself is already happening on the page and the browser MutationObserver API allows us to record this change which we then parse and also send through the websocket.
  • At regular short intervals, every 100ms or 10 times per second, the cursor position and scroll position are recorded. Clicks are recorded when they happen, capturing the position of the cursor relative to the element being clicked. These are functions which in no way hinder a user's experience as they only capture the location of the pointer when a click happens or every 100ms. The events are sent to the Hotjar servers through frames within the websocket, which is more efficient than sending XHR requests at regular intervals.

Source: https://help.hotjar.com/hc/en-us/articles/115009335727-Will-Hotjar-Slow-Down-My-Site-

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!