Hotjar A/B Testing (and the Hotjar Integrations You Need to Maximize Test Results)

Online businesses don’t have the opportunity to interact with their customers in person. Hotjar is a tool that helps e-businesses overcome that disadvantage by helping them better understand their users. It captures both the time spent and the actions of their visitors, which results in visual representations of user behavior. Getting started with Hotjar Integration is something which can help you get the most out of the many helpful tools out there.

The motive for using Hotjar is to make necessary changes to turn those visitors into customers. You can take a huge step forward by using Hotjar A/B testing. Since the goal of both A/B testing and Hotjar is the same — increasing conversions — why not use Hotjar to monitor your A/B tests? This can provide you with an elaborative report and interactive analytics to help prove your hypotheses.

Hotjar A/B Testing Tools

A/B testing is not a feature on Hotjar, but it enables you to use its other features, such as heatmaps and recordings, to monitor your pre-existing A/B test.

Heatmaps

You can view user behavior as a heatmap showing where users clicked, including scrolling and cursor movement. The heatmap provides a graphical representation of the most- and least-interacted-with elements of the page, assigning warm and cool colors to them, respectively.

Source: Hotjar

Recordings

If you’re a marketer, you probably love having session recordings so you can see what test subjects are doing and form your strategy accordingly. Hotjar’s recordings track cursor movement and show priority clicks so you can see visitor interactions as they occurred.

Source: Hotjar

How to Implement Heatmaps Generated for A/B Testing

Hotjar installation on your site and Hotjar integrations with other tools is relatively easy. The difficult part is using it while running an A/B test, which includes capturing different versions of the same page with the same or a different URL.

For that, you’ll need help from a specialized team to prevent errors and analytical complications afterwards. Hotjar A/B testing is definitely something interesting to get familiar with. Over the years, BrillMark has helped many clients with successfully implementing recordings and heatmaps, especially with Hotjar JavaScript triggers.

There are three setup options for this.

1. Track the Variations With Different URLs

In this case, there will be two variations with different URLs, which are then recorded via heatmap and recordings.

For example, you redesigned your homepage via A/B testing. Now for the optimized page, you have a different URL. You can set up a heatmap or recording for both the URLs, and both will be recorded separately.

Source: Hotjar

2. Track Variations on the Same URL

It happens often that only one or two elements of a page get optimized. The task is then to monitor the A/B test running on a page without having different URLs. The A/B test randomly chooses to load either the original or optimized content every time a new visitor arrives on the page. Hotjar will not be able to record separately for each variation, but it will be able to take screenshots of the particular variation with the help of a regular expression option.

Source: Hotjar

The hotjar will record one variation and show screenshots of the other variation by the help of this regular expression feature. That way, both variations on the single URL can be monitored at the same time.

3. Hotjar JavaScript Trigger (Most Common)

Hotjar provides a method to trigger a heatmap manually, but that usually requires a developer’s help — because a developer has the necessary mindset and knowledge of A/B testing and the programming skills to handle JavaScript.

If you know JavaScript or have someone to handle it for you, these are the steps to set up the JavaScript-triggered heatmap.

a) This method is called JavaScript Trigger, in which Hotjar allows you to automatically trigger the heatmap.

b) For this, the key will trigger the hj function provided by Hotjar support.

c) Simply put the following code in the browser console of your webpage: hj(‘trigger’, ‘split_test_a’);. This will trigger the following ‘split_test_a’. It’s not necessary to use specifically ‘split_test_a’ — it can be anything you like, such as ‘hompage-VariationA’ or ‘hompage-VariatB’. Just make sure it’s unique and that you’re not using it for any other heatmap generation.

d) The problem developers face when they use the above code in the console is that it works perfectly on its own, but when they use it with an A/B testing platform, it throws an error. For this, you need to understand the nature of A/B testing. A/B testing platforms prefer snippets to be placed at the top of the head page before any other script starts executing. The reason for that is to minimize page flashing — that’s when the original page layout loads first, and then the variation loads. If this is happening, you may be losing revenue.

Here are the necessary steps to overcome this error:

Wait for the hj function using javascript setInterval method. The idea is to wait, then only execute the above code. Here’s an example of that code:

function hotJarcheck (jsName) {
	var waitForHJ = setInterval(function () {
		if (typeof window.hj == 'function') {
		clearInterval(waitForHJ);
		window.hj('trigger', jsName);
		// console.info('hjProductsHeatmap trigger');
		}
	}, 30);

	setTimeout(function () {
		clearInterval(waitForHJ);
	}, 3000);

}

hotJarcheck('split_test_a'); //

(You can pass any parameters, but make sure you are using the same parameters in the Hotjar platform.)

In Hotjar when creating a new heatmap, Use this process whenever you create a new Hotjar heatmap.

Other Ways to Use the Hotjar JavaScript Trigger

Normally, heatmaps are generated by page views. However, you can use JavaScript Trigger to capture user interactions on a popup modal that appears only after the user clicks a CTA, when the page doesn’t reload. This is great for capturing user activity when they mouse-hover on top navigation and you want to see which sub navigation item they hover over.

We’ve helped many clients in the above situation. We can provide the code, or if clients provide us access to GTM or DTM, we can add our code directly onto their webpage. We have a team of experts in DTM and GTM, and we also have experts on other platforms as well, including Shopify and WordPress.

Hotjar Integrations

Hotjar officially integrates with many platforms, including website hosting platforms such as Shopify and Wix, marketing and CRM services such as Hubspot, innovative tools such as Adobe DTM and Drupal, and A/B testing tools such as Optimizely and Omniconvert.

Source: Hotjar

Other than those mentioned above, you can also integrate Hotjar manually by installing a tracking code, if enabled.

4 Reasons to Have Hotjar Integration and Setup Done by an Expert Test Dev Agency

1. Avoid Errors

Errors such as code malfunctions, messed-up CSS, and delayed loading arise in complicated tests all the time. The task is to identify the errors and issues and fix them before the test goes public. No one wants to lose revenue over a botched test.

Additionally, the implementation of heatmaps on A/B tests within the site — and implementing them directly via the testing tool’s (or any other platform’s) Hotjar integration — may require various methods and ways of working. There are both advantages and limitations to the process, and you may not be familiar with each of them. An A/B test expert can help you avoid issues and set up a proper A/B test along with heatmaps and recordings.

2. Better Utilization of Features

Hotjar has multiple features, and so do the other tools and platforms where Hotjar integration is available. It may not be possible for a newbie to explore as many features and integrations as a specialist may already be familiar with, including how to use them to the fullest. It integrates with a variety of platforms, including Wix, Hubspot, Optimizely, and Segment, which enable it to reach more websites. This broadens the scope of creativity for optimization and A/B testing if used wisely. An expert can make you aware of the possibilities you never knew were obtainable with Hotjar.

3. It’s Quick and Easy

Don’t spend time on tutorials or get stuck with complex coding for Hotjar integration. Your time is important, and you should be spending that on your core activities. There exist such experts to set up Hotjar heatmaps directly on your site, integrate it with other tools (including marketing service platforms or your hosting site), and implement it to monitor your A/B tests and everything else that can be done via Hotjar. Then, all the tech work can be done easily in much less time.

4. Get an Expert’s Insight

Experience comes with obtaining a particular skill by practicing it over and over for years. An expert can prevent you from leaving loopholes in the project, resolve your Hotjar-related issues, provide you with creative ways to experiment with heatmaps, and share their useful insights to help you upgrade your optimization techniques.

How to Install Hotjar on Your Website (and on the Pages You Want to Track)

Hotjar is currently co-developing integrations with a few tools like Omniconvert, Optimizely, and Hubspot. You can integrate with these tools within Hotjar also.

You can also check if your platform is compatible with Hotjar or not. Once you’ve confirmed the availability of integration, follow the steps below to set it up:

1. Select the site you want Hotjar to integrate with from your Hotjar account.
   

   Source: Hotjar

2. Click on the tracking code option, and then click on “Copy to clipboard.”
3. Paste that code into the <head> section of the respective website and webpage.
4. Verify the installation of Hotjar by refreshing your Hotjar site dashboard.