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!