Accessing the heatmaps for a page

NOTE: This feature is only available for some of our subscriptions. If that is the case, you will see an upgrade prompt when attempting to access it. More information about our currently available subscriptions can be found here: https://instapage.com/plans 

Using heatmaps, you can optimize your landing page by tracking your visitors' behavior and improve your element placement accordingly.

We recommend that you refer to the data generated by heatmaps only after you reach an ample sample size of views per screen. That is because the heatmap will not be as beneficial and uncover as much for you if your page has low traffic. You will see data even with a number of visitors as low as 15, but the data is not yet very relevant to base conclusions on it at that point.

To access the heatmap of a page, click on the right-side three-dot menu for the landing page in question, then select Heatmap, as shown below:

heatmap2020.png

For a page that is part of an Experiment, you can see each variation's heatmap data by going to the experiment in question, clicking on Edit to open the builder, then clicking on Preview from inside the builder, and toggling on Heatmap mode.

A GIF showing how to do the steps described in the paragraph above

 

You will need to select the version of your page:

heatmaps.gif

It is necessary to select the version, because a different save/version can mean different content placement, which drives visitors to interact with the page differently.

And now you can see your visitor's behavior on your page.

---0984_Foaya_-_Instapage_2017-07-31_18-53-45.png

Hovering your mouse over the fire icon in the top left corner will open the Heatmap menu from where you can switch between three tracking metrics.

1. Scroll Depth will allow you to see how far your visitors have scrolled down the page.

---0984_Foaya_-_Instapage_2017-07-31_18-57-37.png

---0984_Foaya_-_Instapage_2017-07-31_19-04-37.png

To understand how the scroll depth heatmap is color-coded and to interpret the colors into numbers, look at the color scale below.

Screen_Shot_2021-06-11_at_17.43.44.png
Each color represents a percentage, with red being 100% and black being 0%. The closer the color is to red, the more people have scrolled up until that point. The closer the color is to blue, the smaller the number of people who have scrolled until that point.
The part of the page that is above the fold will always be red, as that is always seen by everyone who opens the URL, even if they do not scroll at all. If you have a black part at the bottom of the heatmap, it means that nobody has scrolled to see it. If the percentage is above 0% but small, it would be a color closer to blue.

2. Clicks will show you on which elements your visitors have clicked.

---0984_Foaya_-_Instapage_2017-07-31_19-09-12.png

---0984_Foaya_-_Instapage_2017-07-31_19-10-59.png

3. Mouse Movement will allow you to see where on your landing page the visitors spend the most time.

---0984_Foaya_-_Instapage_2017-07-31_19-15-00.png

---0984_Foaya_-_Instapage_2017-07-31_19-15-45.png

 NOTE: If you are having trouble viewing heatmap data, try clearing your browser cache and disabling ad-blockers, as they might interfere.

NOTE: Heatmaps are not available for AMP landing pages.