How heat mapping aids conversion rate optimisation

If you’re serious about developing a B2B conversion rate optimisation (CRO) strategy, you’ll need to become familiar with the various kinds of heat maps available to you. 

What are heat maps?

Heat maps are a data visualisation tool to understand user behaviour on your website. By assigning colours to qualitative and quantitative data, heat maps create a visual representation of data. These graphics relay important information about visitor behaviour. Heat maps may be used with landing pages, conversion funnels, shopping carts and more. 

What can heat maps tell you?

Heat maps can show you quite a bit of user behaviour data, including:

• Scrolls
• Clicks
• Cursor activity
• Visual attention

You can then use this heat map data to glean insights about:

• Where website visitors get tired of reading website pages
• The most popular sections of a landing page
• Whether or not users reach and click on a particular CTA button
• How different page elements hold viewers’ attention
• Different paths users take when navigating a web page

You can then use these insights to make informed decisions about how to better optimise your site for higher conversion rates. 

How do heat maps help with conversion rate optimisation?

Heat map data is very useful when you need to make informed decisions about how to best optimise your site’s conversion rates.

Let’s say we’ve got a landing page that has a very high amount of traffic, but a low conversion rate. We know there’s something that’s keeping visitors from converting, but we aren’t sure what it is. 

Rather than taking a wild guess and hoping it’s right, we can use a heat map to see how users are interacting with our landing page once they arrive. If we have our primary call to action placed at the bottom of the page, and find that users aren’t scrolling past the midpoint, that could be our problem. Or perhaps we’ll find that our menu button is too small on mobile devices and users aren’t tapping on it. 

You can also employ heat maps in conjunction with A/B tests. When paired together, this can be a great way to assess how well visitors are responding to a webpage redesign or new pop-up form. 

This table shows just a few examples of how you may use heat maps to address CRO challenges:

The data provided by a heat map is only one part of the total picture, however. In order to fully work out the results of tests or hypotheses, you may need to combine your heat map with data from other analytics tools such as Google Analytics or Mixpanel.

Types of heatmaps

While all heat maps operate on the same principle—assigning colours to depict attention or user interaction—the data may be represented in slightly different ways. 

1. Clickmaps

Clickmaps, or click heat maps, show you which website elements get the most clicks. This is a very useful type of heat map to use when you need to figure out why you aren’t generating a high conversion rate on a page that gets lots of traffic.

You can use click maps to see which elements on your page are getting the most attention. If your intended CTA button isn’t getting clicks, you may need to move it to a new spot. If you discover a CTA button is getting a lot of clicks, this can be an indicator that placement is not creating friction on the path to conversion.

2. Scrollmaps

Scrollmaps, or scroll heat maps, show you how far users scroll down a webpage. This is useful when deciding whether to place information above or below the fold. 

If you see that the majority of your website visitors do not scroll all the way to the bottom of a webpage, then you don’t want to place a conversion offer or other CTA at the bottom. By moving the relevant elements to a spot that gets more views, you can potentially increase your conversion rate. 

3. Mouse tracking heat map

A mouse tracking heat map, or move map, follows users’ cursors as they navigate a web page. Rather than seeing where most people wind up clicking, you can see the entire path they took to get to that point. This can be useful if you want to get some insights about how to optimise your site so it directs users to a particular point. 

Some heat mapping tools show mouse movement as an overlay on a screenshot, while others allow you to capture real-time session recordings and play them back.

4. Eye tracking heat maps

You’ll need special equipment to generate an eye tracking heat map, so this type is best used during user experience research and testing. 

The eye tracking process uses special hardware that measures the movement of a viewer’s pupil as they navigate your website or app. This type of heat map can show you if visitors are drawn more to text or images, and if they have a hard time navigating the site. (The latter may be indicated by a lot of bouncing around, rather than going directly to key navigation buttons or a CTA).

How to read a heat map

Reading a website heat map is very similar to looking at a temperature weather map. As regions of the world heat up, they are labelled in warm colours like yellows, oranges, and reds. When the temperature dips, the map becomes covered in cool colours: greens, blues, and purples. 

The same principle applies to website heat maps. If a lot of website visitors spend time looking at or clicking on a certain part of a webpage, it will be depicted as a warm colour. Red infers that an element received the most attention. If you see parts of your site overlaid with a cooler colour, such as blue, you know that these spots don’t get as much attention. 

This is one of the reasons why heat maps are such a great tool. Rather than combing through reams of data, you can take a quick look at a brightly coloured visual and gain immediate takeaways. 

How to set up a heat map

Setting up a heat map is fairly straightforward, but you’ll need to be familiar with your website code. Here’s how it works:

1. Define your objective

Before setting up a heat map for the first time, define your objective. This will help you choose the right type of heat map for your needs and give you a hypothesis to base future testing on. 

2. Select and install a website heat map tool

Heat map tools like Hotjar and Crazy Egg typically require the user to add a JavaScript snippet to the head tag of their websites—similar to using other tracking tools like the Facebook Pixel. You can integrate this snippet by itself or with the help of Google Tag Manager.

Adding a heat map may impact your site’s compliance with privacy regulations like GDPR, so you’ll need to make sure that your policies and notices are up to date.

3. Wait for data to populate

You’ll be able to test your heat map’s functionality within a few minutes of setting it up, but it will take some time to gather an appropriate amount of data from your visitors. It’s a good idea to install a heat map at the same time you launch an A/B test or begin tracking with other analytics tools. This way, your data will remain consistent.

4. Review heat map data along with other web analytics

As you reach a point of statistical significance on your A/B test—or are ready to begin continual monitoring—include heat map data when reviewing other analytics. Comparing heat maps with numerical data sets can help you begin to draw conclusions about user interaction with your site.

When you’re brand new to installing and using heat maps, it can be helpful to have some expert guidance. The conversion rate optimisation experts at Clarity Performance are skilled in data collection and interpretation—including all of the heat maps listed here. If you’re looking for a specialist conversion rate optimisation agency for your B2B company, check out our services here.