The Heatmap is a graphical representation of your visitors’ interactions on a given webpage.
Using a color scale, it enables you to see which areas of your page have collected the most clicks (orange/yellow) and those which have collected the least clicks (transparent).
Analyzing a Heatmap can help you understand the browsing behaviors of your visitors, find elements that would be relevant to test as well as new test ideas to optimize your page, improve ergonomics and user experience.
There are two types of Heatmaps:
- The Variation Heatmap displays only one variation.
- The Comparative Heatmap displays two variations and enables you to switch between the two to compare them.
The Heatmap is only available for A/B tests. It is not available for multi-page tests and for Personalization campaigns.
The Heatmap enables you to measure two main “metrics” on your webpage:
- Actions: know if the visitors interact the way you want and see the difficulties they may have.
- Interest: identify the titles, buttons and images that draw your visitor’s attention.
A Heatmap may be helpful to:
- Understand why a landing page does not convert. The Heatmap shows areas which draw the visitor’s attention away from the main action you expect from them (for instance the click on an Add to cart CTA).
- Provide ideas of the elements you need to keep or delete when revamping a page.
- Analyze the results of an A/B test in more detail, especially when you have trouble understanding its results.
- Identify non-clickable areas where the visitors clicked. You can change them into clickable areas and thus improve user experience and reduce bounce rate.
- Analyze the differences between mobile, tablet and desktop navigation on your website to identify problems or anomalies.
Creating a Heatmap
To create a Heatmap for your A/B test, go to the Advanced options of your test and toggle the Heatmap ON. The webpage displayed in the Heatmap matches the Sample URL that you set during the Main information step of the campaign configuration. As for click or action tracking, the Heatmap function is not retroactive.
If your A/B test has been created before the 03/04/2021, the Heatmap, which had been automatically created when you launched your test, is now disabled.
Accessing the Heatmap
To create the Heatmap, your campaign must be live and you must have collected some visitors and at least one click.
To access the Heatmap, apply the following steps:
- Log in to AB Tasty at: https://app.abtasty.com/login.
- Go to the tests dashboard and click on an AB test campaign:
Your campaign report is displayed.
- Click the Heatmap tab in your report’s header:
The variation Heatmap is displayed by default.
The Heatmap tab is visible only if you have enabled it in the Advanced options of your test.
Reading the Heatmap
The Heatmap helps you visualize where visitors are clicking on your website. Colored areas are where visitors click the most, while transparent areas are where visitors don’t click at all.
The following actions are displayed for all Heatmaps:
Select which variation (Variation Heatmap) or variations (Comparative Heatmap) you want to display.
Select which device you want the Heatmap to display: Desktop, Tablet, or Mobile Phone.
Reload the Heatmap once you have changed the Variation and Device.
Download the Heatmap as a png image.
Retake the heatmap screenshot (see below)
The variation Heatmap
The Variation Heatmap enables you to see your visitors’ interactions in a single variation of your choice.
- In the first drop-down list, select the variation you want to display. By default, the original version is displayed.
- In the second drop-down list, select the format on which you want to display the Heatmap: Desktop, Mobile Phone or Tablet.
- Click Reload background to load the corresponding Heatmap.
When you hover over colored areas, the Heatmap shows a rectangle that coincides with the HTML element, along with the aggregated number of clicks on this element. It also displays the percentage of clicks this element represents compared to the total number of clicks on the page as a whole.
The Comparative Heatmap
The Comparative Heatmap enables you to compare your visitor’s engagement on your page across two variations, on a given device.
- In the first drop down-list, select the variation you want to appear on the left.
- In the second drop-down-list, select the variation you want to compare the first one with. It will appear on the right.
- In the third drop-down list, select the format on which you want to display the Heatmap: Desktop, Mobile Phone or Tablet.
By default, the original version is compared to variation 1.
Once you have selected the two variations you want to compare as well as the format, you will see the two Heatmaps displayed in the same frame with a slider.
To compare the two Heatmaps and spot where visitors are more engaged in each variation, drag the slider to the left and to the right.
In some cases, the webpage screenshot displayed in your heatmap does not reflect the actual webpage content. The most common case is for webpages that depend on the actions performed on previous webpages, as an e-commerce basket page.
That’s because the web page’s screenshot is generated by an ABTasty server that browses the URL and saves the page as an image.
More information about this issue can be found on this troubleshooting page: There is a problem with the screenshot of my heatmap.
Let’s take an example. Le’s say you created a campaign on your basket page to optimize the way item are displayed.
The first time you’ll open your heatmap you’ll see this
It’s normal because the server that generates the screenshot has not added items to the basket, so the cart is empty.
To circumvent this issue we provide a feature called “Retake screenshot” that you can open by clicking on the camera button
When you click on this button it opens the actual webpage in a new browser window, and it adds a Retake screenshot button at the bottom. Once clicked this button will send us the content of this webpage as you saw it, and we will use it to generate the screenshot.
After a short wait, your heatmap displays the new screenshot