Categories
Guides

Heat map testing with Hotjar: How to set it up?

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.

Scroll maps

A scroll map is an image overlay that shows how far down every percentage of visitors scroll down on your website.

Click/tap maps

A click/tap map is an image overlay that shows concentrations of clicks and taps on particular elements of your website.

Move maps

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!

Processing…
Success! You're on the list.


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.

Hotjar's value proposition
Hotjar’s value proposition – 2020

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.

Hotjar's heat map testing subscription form step 1
Hotjar’s subscription form step 1 – 2020

Step #3: Further information

I will set up this account for one website. Fill in your information and click the green next button.

Hotjar's heat map testing subscription form step 2
Hotjar’s subscription form step 2 – 2020

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/.

Trackingcode options in Hotjar
Tracking-code options in Hotjar – 2020

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.

Manual heat map testing tracking code in Hotjar
Manual tracking code in Hotjar – 2020

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.

Theme editor in WordPress
Theme editor in WordPress – 2020

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.

Theme files in WordPress
Theme files in WordPress – 2020

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.

Heat map testing tracking code in header.php file
Tracking code in header.php file – 2020

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.

Verifying Hotjar installation
Verifying Hotjar installation – 2020

Can’t get it to work? Try installing the plugin instead: https://help.hotjar.com/hc/en-us/articles/115009340247-WordPress-

Hotjar plugin for WordPress
Hotjar plugin for WordPress – 2020

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”.

Heatmaps in Hotjar
Heatmaps in Hotjar – 2020

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.

Heatmap creation overview
Heatmap creation overview – 2020

Step #12: Naming your heatmap

Give your heatmap easily identifiable name like Homepage or Checkout. Then press the green “next” button.

Heatmap name
Heatmap name – 2020

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.

Page view selector in Hotjar
Page view selector in Hotjar – 2020

Step #14: Choosing your pages

The difficulty of this step really depends on the page type you are collecting data about because lots of similar pages will require writing a regular expression. These are small lines of code for targeting URLs which are strings of text. For this tutorial, I will just collect data for the homepage to keep it simple. Check out https://eloquentjavascript.net/09_regexp.html if you want to learn about regular expressions. Or just ask a developer within your company. Most front-end and back-end developers should be able to help you with this. Select “A specific page”, input your homepage URL and click the green “next” button.

Page targeting in Hotjar
Page targeting in Hotjar – 2020

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.

Final step in heat map testing creation
Final step in heat map testing creation – 2020

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. 

Hotjar heat map testing scrollmap
Hotjar scrollmap – 2020

Average fold

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.

Fake bottom

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.

Users interests

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.

Hypothesis prioritization

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.

Hotjar heat map testing clickmap
Hotjar clickmap – 2020

Dead zones

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.

Key elements

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?

Hotjar heat map testing movemap
Hotjar movemap – 2020

Distractions

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. 

Conclusion

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/

Leave a Reply

Your email address will not be published. Required fields are marked *