To help you understand how visitors are interacting with your website, Hotjar enables you to record visitors sessions. When you are actively recording visitors, the Hotjar script initiates a websocket connection which sends the following information to the Hotjar servers:
- HTML changes that happen while your visitor uses your pages;
- Mouse movements;
- Mouse clicks;
- Scroll movements;
- Key strokes (if you tick Record key stroke data on this site);
- Browser viewport size changes.
Each event tracked is saved into our cloud database using a time stamp which is later used to replay back the events in the Hotjar player in sequential order. The Hotjar script will also track your visitor on different pages (using a first-party cookie), enabling you to later play back the entire session in a single recording - even if the visitor visited multiple pages.
Hotjar can record both static and dynamic pages (including shopping carts and logged in areas). By default, Hotjar will not record passwords and numbers which resemble credit card numbers. If you wish Hotjar to ignore other fields, please read our knowledge base article Recording User Input
What do the colored strokes on the timeline mean?
The first thing you will notice when playing recordings is that each action your visitors take is represented by a different color on the playback timeline. Here is what each one indicates:
Red: This represents each time your recorded visitor clicks an element on your page.
Yellow: This means that the visitor has either reloaded the current page or browsed to another page on your site.
Grey line: This represents each time your visitors scrolls on the current page.
White: This represents each time your visitors interacts with a form element, such as a textfield or 'select' dropdown.
Pink: This represents a change in the visitor's screen size.
Space (No color): This represents when your visitor is idle / not interacting with the page.