Learn / Guides / Heatmaps guide
How to create a heatmap (for free)
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.
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:
Follow the sign-up instructions to install the Hotjar script on your website
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:
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:
Step 3: customize your pageviews
Select how many pageviews you want to capture in your heatmap:
[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):
Step 5: set your heatmaps live
Review your configuration, save it, and set your heatmap live:
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 user 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:
You can also download a spreadsheet with a full breakdown of clicks by HTML element and scroll depth data from the top to measure your efforts:
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.
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 website 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 web 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.