You can use Hotjar to generate Heatmaps of any pages on your site - including password protected pages and dynamically generated pages. The steps below explain how Hotjar Heatmaps work.
We take a copy of your page's HTML code
When you add a new Heatmap snapshot, the very first thing that Hotjar does is wait for a visitor to load a page on your site you have targeted for your Heatmap, from each device type.
When this happens, the HTML the visitor loads is sent to our servers and a device specific screenshot of that page is taken. The screenshots are taken using Selenium WebDriver which loads the HTML previously saved using three different user agents (one for each screenshot) mimicking a desktop, tablet, and a phone device.
The assets needed to render the CSS are loaded directly from your server
This means that the assets need to be publicly available and that insights.hotjar.com needs access to load these assets.
Hotjar uses these user agents when capturing screenshots:
// Desktop user agent:
Mozilla/5.0 (Windows NT 5.1; rv:31.0) Hotjar Gecko/20100101 Firefox/31.0
// Tablet user agent:
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Hotjar Version/6.0 Mobile/10A403 Safari/8536.25
// Phone user agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Hotjar Version/6.0 Mobile/10A523 Safari/8536.25Hotjar will take a screenshot of the first page in the target range visited
This means that the content in the screenshot is dependent on that first visit.
We save a copy of all the elements available on your page
Hotjar creates an 'element map' of all the elements available on your page. The elements are mapped by their tag and their parent elements, and their IDs or classes, if available. This will be needed to later build your Heatmap report.
We collect usage data from your visitors
Hotjar will start recording usage behavior from your visitors to generate three different Heatmap reports. You can read more details about the different types of Heatmaps here.
We build your Heatmap report
When it comes to click/tap and move Heatmaps, Hotjar will check all the elements your visitors interact with and compares them to the previous copy it saved in Step 2. If there is a match, it will be reflected in the Heatmap report.
Hotjar may collect more click data than shows on your Heatmap
This is because Hotjar will only show you the usage of the elements available on the screenshot it took.