How Hotjar Records User Interactions

Hotjar provides a powerful tool for tracking user behavior through screen recordings. Understanding how it captures and synchronizes these recordings can help you optimize your implementation.

Recording Mechanism

Hotjar does not record traditional video footage. Instead, it captures the HTML and CSS of the page along with user interactions such as mouse movements, clicks, and scrolls. This data is then re-rendered to create a seamless playback experience.

Performance Considerations

When recording at a resolution of 1920x1080 and a frame rate of 23 frames per second, the bandwidth usage can be significant. Estimates suggest that such a recording may require around 2 Mbps of bandwidth. However, if recordings are triggered only by user interactions, the average bandwidth consumption could drop to approximately 300-500 Kbps.

Syncing Challenges

Maintaining synchronization between the recorded events and the visual representation is crucial for an accurate playback experience. Hotjar employs websockets to transmit DOM changes and user events in real-time, ensuring that the playback remains in sync with user actions.

Conclusion

By leveraging a combination of HTML, CSS, and event tracking, Hotjar effectively captures user interactions without the overhead of traditional video recording. This approach not only enhances performance but also provides valuable insights into user behavior on your site.