In this guide, we'll discuss the technical side behind Hotjar recordings, shedding light on how they capture, reconstruct, and playback user sessions. Understanding these processes will help you harness the full potential of Hotjar's insights into user behavior.
Technical Overview
Recordings serve as invaluable tools for understanding user behavior on websites. Visually capturing interactions such as clicks, mouse movements, scroll behavior, and keystrokes offers profound insights into user engagement, pain points, and preferences. This granular understanding enables website owners to optimize their user experience effectively.
Recordings are created in three steps: Hotjar first captures the data from your site during a user's session. After this, Hotjar reconstructs the session and then plays back the information to you, the viewer.
Data Capture
WebSocket Initialization: When a user opens a webpage where Hotjar is installed, a WebSocket connection is established. This connection is a real-time communication channel between the user's browser and Hotjar's servers.
You can see this connection being made in the network tab of your browser's dev tools.
You can also use Hotjar's Debug mode to check the WebSocket connection.
Data Transmission: After the WebSocket is opened, Hotjar captures the initial HTML content and DOM tree from the recorded user's session. As the user interacts with the webpage, the DOM captures various user actions, including clicks, mouse movements, scroll behavior, and keystrokes using the MutationObserver API, serializing the content so we know the order to stitch it back together. We also capture any information set for User Attributes using the Identify API and Events using the Events API. This captured data is then transmitted through the WebSocket to Hotjar's servers.
You can also view these captured actions from within your browser's developer tools, while visiting your site.
Anonymization and Security: While Hotjar automatically suppresses some personally identifiable information before it is sent to our servers, it's the responsibility of Hotjar customers to ensure that any collected data is suppressed to eliminate any personally identifiable information, thus upholding user privacy and adhering to data protection regulations. You can adjust the suppression settings as necessary within your Hotjar Site settings.
To suppress additional data on your site, you can follow our guide: How to Suppress Text, Images, and User Input from Collected Data.
Conclusion: The session then ends when the user either:
- Leaves your site and does not return within 30 minutes.
- Does not interact with your site for 30 minutes.
The WebSocket is closed, and Hotjar starts work on reconstructing your session.
Session Reconstruction
Once data is captured and the session has ended, Hotjar reconstructs the user session. This involves processing the collected data and any website assets needed to accurately recreate the sequence of user interactions. By piecing together each action within a session, Hotjar generates comprehensive recordings that reflects user behavior on the website, which can then be analyzed further.
If Hotjar doesn't have access to assets, they appear as missing or broken in recordings. These can be addressed and fixed, and our guide, Why Do Recordings Look Broken or Have No CSS Loading? covers this in length.
Real-time vs. Playback
In Hotjar recordings, live user actions are utilized to create playback recordings. Live user actions refer to the real-time tracking of users' interactions with a website or application.
Although recordings are presented in a format resembling a video, it's important to note that they are not a screen-recording but a reconstruction of events. During a user's session, Hotjar continuously records these live user actions, such as mouse movements, clicks, scrolls, and keystrokes. This data is then stored and processed by Hotjar's servers.
After the user session ends, live user actions are compiled into a playback recording. These recordings provide a retrospective view of the user's session, allowing website owners to replay and analyze how users interacted with the site.