Heatmaps: how to integrate HotJar and Google Optimize

How many of you use HotJar? And how many Google Optimize? I think the answer is “many” to both questions.
As you know, HotJar is such a valuable tool to create heatmaps, videorecordings and so on, while Google Optimize is the newborn at Big G specifically dedicated to testing & targeting.
HotJar allows to obtain a heatmap of the page we need to monitor, but what if I would like to discover more about users and where they click on a variation of a page created using Optimize? An example. Let’s say I would like to run a test on the following page http: //enricopavan.com/formazione/ avoiding the first snippet of text.
Using HotJar I wouldn’t have the chance to distinguish the clicks as the URL remains the same: in the same heatmap I would have different information, coming from the Original Page and the Variation as well. How can I manage to separate clicks on the variations versus the original page? The solution is quite simple and it consists in 2 steps.
Step 1: Configure HotJar Heatmap
Prerequisite: you have to use a feature that is unfortunately available exclusively for the Plus and Business versions. For the creation of the variation’s heatmap you need to use the Javascript trigger inside the admin interface.
As you can see in the image above you only have to define a name for the trigger, in this case “formazione(i.e.training)_1”. Once you set up the value you can go ahead with the following steps until the configuration is completed.
In the summary you will see the new heatmap built on the trigger.
Step 2: Configure Google Optimize
Warning: the js trigger set up should be the last update you will do in the variation so that all the changes you made are recorded by the software.
Once the experiment is created, when your variation is ready, to add the HotJar trigger you need to:
- Click on “Select Elements”: the square with the rounded corner in the upper left
- Unflag the fields “Use Element id” and “Use Element class”
- Change the field “Element Selector” by using “body”
- Click on “Add Changes” and select “Javascript”
Now you have to insert into the Javascript window the following code:
try { hj(‘trigger’, ‘formazione_1’);} catch(e) {}
Let “After closing tag” flagged, so that the script will be loaded after the DOM event. Click on “Apply” and now you have an extra asset for your analysis: the heatmaps for a test variation, so useful to better understand how users engage with the page and how the new changes impact on the conversion rate!
Leave a Reply
-
Analytics Boosters
ItalyVicolo Buranelli, 2
31100 Treviso
Italy
-
Analytics Boosters
United Kingdom41 Devonshire Street
London
W1G 7AJ
United Kingdom
-
Analytics Boosters
United States80 S.W. 8th Street
33130 - Miami
Florida
United States of America
It’s possible use this for recording tool?
Hi Monique,
Using HotJar you could record the variant page clicks. Maybe it could be possible using other king of tools but I have to go deeper 🙂
I get ‘Invalid or unexpected token’ when trying to apply this in google optimise.
Hi Jason,
do you set the HotJar js trigger as the first change in your experiment?
Thanks
Hi Jason,
I guess it’s due to the ‘ ‘ in the script. If you copy it, it most likely won’t work. You’ll have to type them yourself. That’s how it worked for me after I got the same message.
Stijn
Hi Stijn,
Thank you for the information.
Thanks, this is really helpful. Yes, I had to change the quotation marks that I copied to ‘ manually, and then it worked.