How do Hotjar Heatmaps work?: A Technical 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 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.

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, 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 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 it saved in Step 2. If there is a match, it will be reflected in the Heatmap report.