How to Use HotJar and Google Tag Manager to Build Heatmaps Off of A/B Test Variants

Data can be scary… like really scary, especially when it comes to tracking a user’s behavior on a website. But, it is also one of the most important aspects of growing an online business. You need to see where your users are going, how they are using your site, and most importantly, how you can improve their experience. Tools like Google Analytics can do that for you, but come with a pretty steep learning curve. 

HotJar, however, is a heat mapping tool that can help visualize your user journey in an easily digestible way. You can track scroll depth, clicks, and mouse movement by adding a heatmap on to your individual web pages. This data is particularly useful when it comes to conversion rate optimization and split testing. 

Why Use HotJar Heatmaps?

Working as a visualization tool, HotJar heat mapping can help show you how your page is performing, which buttons are being clicked on and how far down the page users get to. With some customization, Hotjar can also help with A/B testing by showing which variant of a webpage is serving your users a better experience and helping to increase conversions. This can serve as an informant for future tests, and most importantly, help give you insight on where your users’ focus is on a web page. It makes it easier to see how users are reacting to the changes being tested. For example, if you change the color of a CTA button, allow you to see which variant users are responding better to by showing you how many times each button was clicked.

While this data can all be tracked in tools like Google Tag Manager or Google Analytics, HotJar allows for easily digestible and primarily visual data output. That means anyone can use it as a tool to help improve your site’s data tracking – not just the experts. It’s easy to use and understand a user’s journey on your site. 

The Tutorial

HotJar is pretty easy to implement on a webpage with a singular landing page experience. It only takes a few clicks. You’ll be able to see an in depth breakdown of where users are clicking, scrolling and moving their mouse. However, when it comes to CRO and split testing, implementing a heat map can be a little more complicated if the variants are hosted under the same URL. You’ll need to implement a tag through Google Tag Manager that indicates which variant a user is looking at. This will allow visibility into both experiences and give you the opportunity to see how users are interacting with them individually. Let’s break down that process, step-by-step, so you can get your heatmap up and running and start collecting valuable user data.

Step 1:

In order to get started, you’ll first need to grab the Google Optimize Experiment ID from the webpage you are running your split test on. To do this, you’ll need to load up the webpage you are testing on and grab the experiment ID from the HTML code. After right clicking and hitting ‘inspect’, navigate to the ‘Application’ menu and find the drop down for ‘Cookies’. This is where you’ll find the code that houses your GA Experiment ID titled “gaexp.” This line of code should end in either a 0 or a 1. 

A GA Experiment ID ending in 0 signifies that you are on the original landing page.
A GA Experiment ID ending in 1 signifies that you are on the new version of the landing page.

From there, you’ll be able to copy and paste the experiment ID. Make sure you grab everything after “GAX1.2.”. 

Step 2:

Now that you have your GA Experiment ID, you can begin to build out the HotJar functionalities on your site with Google Tag Manager. You’ll need to create a new tag based on the Google Optimize Experiment ID that we pulled directly from the site.

First, you’ll need this HotJar trigger: 

After that, you’ll need to create a Custom HTML tag in Google Tag Manager and input the trigger above. Don’t forget to enclose this trigger with a script tag 

It should look something like this: 

<script> 
hj(‘trigger’, ‘split_test_a’); 
</script>

Lastly, you’ll want to change the name of your experiment in the trigger. Instead of “split_test_a”, use a name that signifies that this test is for your original landing page. For the sake of this experiment, we used “gb_headline_original”. After you save the tag, you’ll be ready to create the trigger based off of the experiment ID. 

Step 3:

The next step in this process is to create a trigger based off of the Google Experiment ID for the original landing page. For this trigger, you’ll want to use Window Loaded to ensure everything is loaded on the screen before it fires. In addition, make sure this trigger is only firing on some window loaded events.

Then, you’ll want to create a new variable for this trigger to fire on. For this configuration, select the 1st Party Cookie variable and make sure the cookie’s name matches the line of code that holds the GA Experiment ID on the initial landing page, “_gaexp”. Name your variable GAEXP.

Lastly, you’ll set up your new trigger so it reads: 

GAEXP contains [Google Optimize Experiment ID].

When pulling the experiment ID, make sure you only copy and paste everything after “GA1.2.” Make sure your experiment ID ends in a 0, signifying that it is for the original landing page experience. 

Before publishing your new tag and trigger, name them something that signifies which variant this is for. We used “Headline Original.”

Step 4: 

After you’ve created the tag for the original landing page experience, you’ll need to duplicate them both for each of the other experiences being tested. Remember to change the names of both the tag and the custom HTML HotJar trigger. 

Next, duplicate your Window Loaded trigger and change the naming conventions as you see fit. You’ll also want to change the last digit of your GA Experiment ID to a 1, signifying that it is for your new variant. After you save your new trigger, you need to add it to your tag. 

Your last step before publishing your updates in Tag Manager is to ensure that your original experiment tags are paired with your original experiment triggers, and your new variant tags are paired with your new variant triggers. Once you’ve made sure everything matches up properly, you can hit publish and make your changes live.

Step 5: 

The last step in this process is to configure your heatmap directly on HotJar. After logging in, navigate to the heatmap menu, switch to manual heatmaps and create a new heatmap. You’ll want to give your heatmap a name and select the manual snapshot that works best for your webpage. 

Once you’ve filled out all of that information, move on to the “Page Targeting” section and select “Users who trigger a JavaScript snippet.” Then, you’ll want to input the name you used in the JavaScript trigger in Google Tag Manager. In this case, we used “gb_headline_original.” This will allow the original experiment’s tag to fire when a user is shown that specific experience. 

Repeat these steps for each different variant you are running on your webpage. 

From here, you can test your GTM tags in the preview mode on the page your split test is running on. Ensure that the correct tag fires on each variant. If they do, you’re finished! HotJar will start tracking your user’s data and creating your heatmaps.

Conclusion

In conclusion, HotJar heatmaps are an incredibly valuable tool for your website’s data tracking, especially when it comes to split testing multiple landing pages under the same URL. They give you a new way to visualize your data, make informed decisions on your platform’s development, and create an overall better user experience. They’re a great tool to use in conjunction with the Google Analytics suite and provide an easily digestible medium for your website’s data. 

Data tracking is one of the things we do best here at Great Big Digital. If you’d like to explore more data collection capabilities for your website, we’d love to help you along the way. Get in touch with us here.