Google Optimize is my favourite tool for A/B testing. One reason is the integration with Google Analytics. Another reason is that a good Google Tag Manager implementation gives you a really flexible toolset for Google Optimize targeting.
However, one tool is missing from the Google toolbox, namely a Heatmap tool. Luckily, one of my other favourite tools, Hotjar, has a Heatmap functionality, and plays really well together with Google Optimize (BTW, do you also know that Hotjar can play well together with Google Analytics?).
So, here is how to use Hotjar Heatmaps in your Google Optimize A/B testing.
Heatmaps can be really useful when it comes to identify optimization opportunities, and crafting A/B testing hypothesis.
Hotjar gives you heatmaps for desktop, mobile and tablet, and data points are clicks/tapping, scroll and mouse movements.
If you used Hotjar Heatmaps for crafting your hypothesis, you should of course create heatmaps for your A/B testing variants as well, since this will give you a better understanding of your results.
Hotjar Heatmap Setup
- First, decide the name of the trigger.
- In this example, my trigger name is variant_1.
- Add your trigger name.
Now, head over to Google Optimize.
Google Optimize Variant Setup
- Deselect Use element id and Use element class.
- Change the Element Selector value to body.
However, in the Hotjar documentation we find this piece of information.
We are going to use the “After closing tag” option with selector “body“, which means that the script change will run after the document ready (DOMContentLoaded) event.
- Make sure the Element Selector value is body.
- Choose After closing tag.
- Click Apply.
Hotjar will now create a Heatmap of your Google Optimize Variant, and your A/B testing will be even hotter than before.