Last Updated May 27 2019

How to create a heatmap

When you are ready to create heat maps for your website, you only need two things: specific heat map generation software to collect the data for you, and a clear idea of which page(s) you need to analyze. Let’s take a look at both.

 

 

Set up your Heatmap now
Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.
how-to-create-a-heatmap

Create a heatmap in 5 steps with Hotjar

To get a heatmap of any site page you are interested in, you will need to use a heat mapping tool like Hotjar to collect and render the data for you. And if you are new to Hotjar, no problem: there is a free trial you can choose if you just want to test it out.

Here's what you do:

Once your script is installed and verified, you are five minutes away from your first heatmap. Here are the steps you need to take to get your first heat map up and running:

 

 

 

Step 1: get started

Start creating your first heatmap by clicking on the ‘NEW HEATMAP’ button:
new-heatmap-button

Step 2: name your heatmap

Give your heatmap a memorable name (like Homepage, Pricing Page, or Homepage v2 November) so you know exactly what page you are tracking:
name-your-heatmap

Step 3: customize your pageviews

Select how many pageviews you want to capture in your heatmap:
number-of-pageviews
[Note: the number of pageviews you can collect will depend on your plan. With the free plan, you get 1000 pageviews.]

Step 4: select the target page(s)

Choose which page(s) you want the heatmap to capture (don’t know where to put your heatmap? Keep reading to the end of this chapter):
page-targeting

Step 5: set your heatmaps live

Review your configuration, save it, and set your heatmap live:
review-and-save
And that’s it!

What your heat map data will look like

Once your heatmap is live, you need to wait for people to visit your page so Hotjar can start recording their clicking, tapping, swiping, and scrolling behavior.

It only takes one person to visit the page for Hotjar heatmaps to start working—but of course, data based on just one visitor might not be very useful.

As more and more data gets recorded, Hotjar generates the heatmap visualization for the page. From within the interface, you can toggle between the three types of heatmap—click map, move map, and scroll map—and also select the device you’d like to see a heat map report for:

hotjar-heatmap-interface
THE HOTJAR HEATMAP INTERFACE. THE ‘DEVICE’ AND ‘TYPE’ BUTTONS AT THE TOP LET YOU PICK YOUR PREFERRED VISUALIZATION.
You can also download a spreadsheet with a full breakdown of clicks by HTML element and scroll data from the top to measure your efforts:
heatmap-spreadsheet
THIS DATA FROM A MOBILE SCROLL MAP SHOWS ONLY 50.9% OF USERS (FOURTH COLUMN) SCROLL BEYOND 3,276 PIXELS (SECOND COLUMN). THAT’S VALUABLE INFO!
In addition to the at-a-glance understanding that you will get from your heatmaps, these rows of data are there to help you design pixel-perfect user experiences; for example, you and your UX design team can easily refer back to the data to find exactly where you need a CTA to capture users’ attention on desktop and mobile.

More (technical) reading

If you have any technical questions or doubts about heatmaps, check out our comprehensive heatmap help documentation

Best pages to collect heat map data on

Heat maps allow you to take a deeper dive into any of your website pages, but it makes logical sense to start from the ones that are most important to you in terms of traffic, usability, and business objectives.

1. Homepage and landing pages

Your homepage and main landing page(s) are the main entry points into your website. They are often responsible for your visitors’ first impressions and for their decision to continue browsing or abandon the website.
A heatmap on these pages will help you determine how much information gets seen or interacted with, and what elements are being clicked on or ignored.

2. Top pages

Your best-performing pages (the most viewed product page, the most commented blog post, etc.) are obviously doing something right: eye tracking with a heat map can help you understand what is working well, so you can replicate the success elsewhere.

3. Under-performing pages

Your worst-performing pages are as important as the previous ones, but for the opposite reason: there is likely something wrong with them, and placing a heat map there can help you understand what your visitors are (not) seeing or interacting with, so you can take action.

4. New pages

Your newest pages don’t have a lot of data: if you recently added a page to your website, a heat map might be a good way to get some initial information about how the page is performing.

Pro tip

If and when your page design changes, start a new heat map so you can revisit the old version and compare it to the new one.