When running A/B tests, you can use Heatmaps to track the performance of a page compared to test variations. This article guides you through tracking an A/B test based on whether your variations use the same or different URLs than the control page.
Integrate Hotjar with an A/B testing tool
Hotjar has integrations with the A/B testing tools: Google Optimize, Omniconvert, Optimizely and Unbounce . If you're using one of these tools, see one of these dedicated articles for more details on setting up and using the integration with A/B testing.
Tracking variations that use different URLs
When the URL for each variation in your A/B test is different, you can use the Heatmap URL filter to show data for a variation.
Visit your Heatmaps dashboard.
Select a URL filter, enter your control URL and then click View heatmap.
Which Heatmap URL filter should I select?
It's important to keep in mind how each of Hotjar's URL filters work in relation to the URLs being used in your A/B test. You can review our What Are Heatmap URL Filters article to better understand how they work.
Below are some examples of the filter you may want to choose based on how your control and variation URLs might differ:
- Path is different: if the path of your control and variant differ, then the URL is filter will likely work best. It will match the URL provided for the heatmap, ignoring query strings and fragments.
- Query string or fragment is different: if the URLs use a query string or fragment that differs between the control and variant, the URL is exactly filter will refine your heatmap data to include them.
Open the heatmap dashboard in a second browser tab.
Use the same steps as above to display a heatmap for a test variation URL. You can then compare the heatmaps for your control and variation URLs.
Tracking variations that use the same URL
This section involves the Events filter, which is available on Observe ,
or
plans.
This section involves the Events filter, which is available on Observe or
plans.
If your A/B test is set up to randomly load different content for each user visiting the same page, this can be tracked using Hotjar Events. For example, when changes or actions occur on your site, such as the loading of a specific page variant, this occurrence can be sent to Hotjar as an Event.
Session filters can then be used in a heatmap to focus on only sessions where the Event occurred.
Set up Hotjar Events for your control and variants.
Different Event names should be used for A/B tests
For A/B testing purposes, ensure the Event names you're using are unique to the page variation being tested.
You may need to consult your web developer to help implement Hotjar Events on your site as it can involve adding JavaScript to your site. Alternatively, it's also possible to implement Hotjar Events using Google Tag Manager or Segment.
After some time for data collection has passed, visit your Heatmaps page.
Enter the URL used for the A/B test and click View heatmap.
Click Add filter and select Events
Enter the Event name used for your A/B test and click Apply.
The Event names used for your A/B test will depend on your setup.
If you only sent an Event when a variant was loaded, you can view a heatmap for the control by choosing the is none of these condition inside the Events filter and entering the variant Event name(s).
To compare this side by side with a variant, you can then open your Heatmap dashboard in a second browser tab and apply the Events filter with the condition is any of these with a variant Event name.
It's not possible to trigger a heatmap screenshot based on an Event
When applying an Event filter, Hotjar will show data collected from sessions where users triggered the Event at any point during their session. If the same Event is used on multiple URLs, you may be shown a screenshot of a different page than the URL you selected for your heatmap.
To see the expected screenshot, you may need to adjust the URL filter or manually update the screenshot.
Learn how to use Hotjar like a pro!
Once you've got your A/B test set up, check out our example use case for advanced Hotjar users here: Track A/B Test Results with Heatmaps