Introduction to heat map testing
Did you know that heat map testing can give you a lot of insights about the behavior of your users on your website? Because it gives a swift visual presentation of click, scroll & tap rates on elements of your website. This information can be used to strengthen your existing hypothesis or find new issues that need further research.
First, this article will explain what heat maps are and what kind of heatmaps exist for analyzing your website. Secondly, it describes the reasons to start heat map testing and a platform that can be used for setting it up. Thirdly it will show you how to register with Hotjar and connect your website. Subsequently, this guide will describe how to set up your first heatmaps for the pages you are interested in. Last but not least we describe how to analyze different heat maps to find optimization opportunities for your website.
Heat map testing basics
What are heat maps?
Unlike the name suggests, heatmaps can’t show you the temperature of your add-to-cart button. A heatmap is an image overlay over your website that shows you how much people click, scroll & move on the website using colors. For example: When the heatmap shows you a red spot on the screen it means that a lot of people click there compared to other locations on the website. On the other hand, we see that blue suggests a lower amount of clicks. This can be done with different kinds of data and its main purpose is making sense of data because sometimes you are able to interpret a visual representation of data better than when you are looking at tables.
What kinds of heat maps are there?
There are different kinds of heatmaps to look at the visual representation of the data. In Hotjar you can look at scroll maps, click/tap maps, and move maps.
A scroll map is an image overlay that shows how far down every percentage of visitors scroll down on your website.
A click/tap map is an image overlay that shows concentrations of clicks and taps on particular elements of your website.
A move-map is an image overlay that shows where people are most frequently moving with their mouse cursor and is therefore not available for mobile. This is a cheap alternative to eye-tracking because research has shown that the movement of a mouse cursor has an 80% correlation to where people are looking.
Why should you use heat maps?
Heat maps can be used to strengthen your hypothesis when trying to find what to test getting the highest chance of a significant result. You can, for example, notice that a particular page doesn’t have the funnel rate you expect. You can now create a heatmap and noticed a bunch of clicks on elements that are not clickable. Maybe this is the issue your website is having and it’s certainly worth testing.
Another reason is that heat maps can give you a different perspective on behavioral data than you could when just looking at tables. It also makes it a lot easier to convince problems of the website to your customers and managers because you have something that is easily understood by many people.
What is Hotjar?
Hotjar is a software that has multiple functionalities for user experience research. It can be used for funnels, user recordings, form analysis, heat maps, and much more. What I like about Hotjar is that is free to start out with and can be used for creating heat maps based on 1000 sessions. If you want to have more sessions per heatmap a subscription is needed. This will make the data more valid because it’s based on a lot more sessions. But to get started I don’t think it’s needed yet because you can get acquainted with the software first. Check out their website at https://www.hotjar.com/
How much does Hotjar cost to setup heat map testing?
The price really depends on the number of page views you want to use per day. The free account supports up to 2000 page views per day and will give you limited reports. The data you collect will be stored up to 365 days.
The plus package supports up to 10.000 page views a day and gives you unlimited reports. This also includes a 15-day trial. This costs € 29 a month.
After that, you can just adjust the number of page views you need and the price will change accordingly. Here are some of the example prices:
- 20000 page views per day are € 89 a month
- 50000 page views per day are € 189 a month
- 1200000 page views per day are € 289 a month
- 2000000 page views per day are € 389 a month
Agencies can also create an account for multiple websites if they have multiple customers. I would recommend testing out the free version and all the options first before starting a subscription.
Over 250+ professionals have already signed up!
Join GrowthPenguin to receive the latest blogs in your inbox every week!
Setting up heat map testing
Let’s set up our first heatmap with Hotjar! I will describe how to register an account and connect it to your website. In addition, I will describe how to set up your first heatmap for the webpages you need. This guide will use the free version of Hotjar so anyone should be able to follow along.
Step #1: Going to Hotjar
Go to https://www.hotjar.com/ and click on the red “try it free” button.
Step #2: Account details
Input your full name and email address and press the big green “Get started” button. The trial version can be used for 15 days! After that, you will still be able to use the free version of Hotjar.
Step #3: Further information
I will set up this account for one website. Fill in your information and click the green next button.
Step #4: Heat map testing tracking code
For this tutorial, I will add the code manually because I think this is more useful than just adding a plugin. This way you will be able to add tracking codes to your website without paying for plugins. But you are free to add the tracking code in that way if you want. Make sure to only collect data once people give consent through your cookie wall. Your privacy officer should be able to help you with that. Here is some more information about Hotjar’s GDPR policy: https://www.hotjar.com/legal/compliance/gdpr-commitment/.
Step #5: Welcome screen
Once you have your account setup you will see a welcome screen with your personal tracking code to connect Hotjar to your website. In this tutorial, I will install the tracking code on a WordPress website. This could also be done through Google Tag Manager or using a plugin. Click the green button to copy your tracking code.
Step #6: WordPress theme editor
Go to your WordPress website and go to your dashboard. In your WordPress backend go to customize and click on theme editor.
Step #7: Editing your child theme header
If you are editing this in your theme you should be using a WordPress child theme otherwise your header will be overwritten at every template update. You can learn how to make a WordPress child template here: https://developer.wordpress.org/themes/advanced-topics/child-themes/. Scroll down in the theme files section on the right side of the screen and click on Theme Header.
Step #8: Pasting your tracking code
In the text editor find your <head> tag and paste the tracking script in your header.php folder. Then click update file to publish the code to your website.
Step #9: Verifying your heat map testing installation
Now it’s time to verify your installation. Go back to your Hotjar dashboard and click verify installation twice. If your installation was successful you will get a conformation.
Can’t get it to work? Try installing the plugin instead: https://help.hotjar.com/hc/en-us/articles/115009340247-WordPress-
Step #10: Heat map testing menu
Now that everything is set up for your website we will set up our data collection for the heatmap. Notice that you have a 15 day of premium! This means your first heatmap can be based on more than 1000 pageviews that are in the free version. On the left navigation click on “Heatmaps”.
Step #11: New heatmap
As you can on this page you will create all the different kinds of heatmaps by setting it up once! Click the green “New heatmap” button to continue.
Step #12: Naming your heatmap
Give your heatmap easily identifiable name like Homepage or Checkout. Then press the green “next” button.
Step #13: Selecting your heat map testing pageviews
Then you need to decide how many page views you want your heatmap to have. More page views will obviously take longer but will give more valid data. Notice the different pricing levels that will be required for this option after the trial. Choose the option you can collect within the 15 days of your trial! You should be able to check the heatmap while it’s gathering data anyways. Click the pageviews you want and then click the green “next” button.
Step #14: Choosing your pages
Step #16: The waiting game
Now click the green “Create Heatmap” button to finalize the process. The process of collecting data depends on the number of users you receive on your website. If you have 1000 visitors on your homepage a day you will need to wait 10 days if everyone has accepted your cookies. Again, make sure you don’t just collect people’s data without their consent.
How to analyze your heat map testing efforts?
Now that you finished gathering data for your heat maps it’s time to start analyzing your heat maps for insights. Where do you begin? There are set factors you can check for every different kind of heat map to find insights you can use for testing.
How to analyze scroll maps?
Scroll maps can be used to find out multiple insights that might be a starting point for a new test. Note that you can check your heatmap for Desktop, tablet & mobile and all should be analyzed.
One thing that is interesting is the average fold. For every device, you can check if the most important elements are above this average fold. In the example, you can see that their USP is under this fold and a test could be set up that places this USP above the fold.
Another thing to check for is fake bottoms because this could be the reason your users are not scrolling any further. If you notice a sudden drop-off of the percentage of visitors you should see if this is the case. You can use arrows or other indicators to show that there is more content for your users to check out.
You can also use a scroll map to find out people’s interests on the website because you will notice if users found the content they are looking for at a particular scroll location.
I like to use scroll maps to strengthen other research I have done and give a higher priority when the data of the heatmap leans towards my hypothesis.
How to analyze click maps?
Click maps are a great way to find insights for optimizing your user experience on the website. I like to check different factors when analyzing click maps.
It can be really frustrating for users if they think something is clickable and it’s not. Looking at click-maps can give you a quick overview of the locations that people are clicking that doesn’t link anywhere.
On your website, you will probably have certain goals for your users depending on your business model. These goals will require certain important actions that are achieved by clicking buttons, links, and images. Are your users clicking these elements or are they clicking the wrong ones? In this heatmap, you will be able to spot neglected elements and start some awesome experiments to fix those.
How to analyze move maps?
As stated before, a move-map correlates to 80% of where users are looking because they will move their move in the same spot. Knowing this you can try to find out if users get distracted from the most important elements. You might have an image for example that is drawing a lot of attention away from your add-cart button.
Key elements again
The move-map also gives you a general idea of where users are focusing the most of their attention so you can check if the “hotter” areas support your overall goal of the page.
The key takeaway here is that you can use a heat map to strengthen existing issues or find more issues that require more research for testing. A common misconception for the heatmap is that they can be used the find problems that can be fixed with no additional research but this is not the case. A heatmap doesn’t answer the “why” behind the problem and will almost always require more research to create a hypothesis that has a high chance for a significant result.
I hope this guide will have helped you to set up your first heatmap and found some valuable insights that help you in the conversion optimization process. Have you found a cool experiment you want to test but you don’t know how to set up an a b test? Check out my other guide: https://jeroenwiersma.com/how-to-use-the-google-optimize-a-b-testing-tool/