How do Hotjar Heatmaps Work?: Advanced Explanation

You can use Hotjar to generate Heatmaps of any pages on your site including password-protected pages and dynamically generated pages. The steps below are an advanced explanation of how Hotjar Heatmaps work.

We take a copy of your page's HTML code.

After adding 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.

Hotjar uses these user agents when capturing screenshots:

// Desktop user agent:
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Hotjar Chrome/74.0.3729.131 Safari/537.36
  // Tablet user agent:
  Mozilla/5.0 (iPad; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko)  Hotjar Version/11.0 Mobile/15E148 Safari/604.1
  // Phone user agent:
  Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Hotjar Version/11.0 Mobile/15E148 Safari/604.1

And these device widths when we take Heatmap screenshots:

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, IDs or classes. This will be needed to later build your Heatmap report.

We collect usage data from your visitors.

Hotjar will start collecting data usage behavior from your visitors to generate three different Heatmap reports. You can see three real examples of 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 saved in Step 2. If there is a match, it will be reflected in the Heatmap report.