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. When this happens, the HTML the visitor loads is sent to our servers and three screenshots of that page are taken. The screenshots are taken using Selenium WebDriver (running a Firefox build) which loads the HTML previously saved using three different user agents (one for each screenshot) mimicking a Desktop, a Tablet and a Phone device.
The assets needed to render the HTML page (CSS / images) are loaded directly from your server. This means that the assets need to be publicly available and that insights.hotjar.com has 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.25
Hotjar will take a screenshot of the page the first visitor loads after you have set up the Heatmap. 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: Types of Heatmaps
- We build your Heatmap report.
The last step is Hotjar 'building' your Heatmap report when you access the results. When it comes to click/tap and move Heatmaps, Hotjar will check all the elements your visitors interacted 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 have collected more usage data of your page than the ones it transposes on your Heatmap. This is because Hotjar will only show you the usage for the elements available on the screenshot it took.