Heatmaps: how to integrate HotJar and Google Optimize

July 14, 2017 - Written by

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!

Comments 7 Replies to “Heatmaps: how to integrate HotJar and Google Optimize”
    • 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 🙂

    • Hi Jason,
      do you set the HotJar js trigger as the first change in your experiment?

      • 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.


Leave a Reply

Your email address will not be published. Required fields are marked *

  • Analytics Boosters

    Vicolo Buranelli, 2
    31100 Treviso

  • Analytics Boosters
    United Kingdom

    41 Devonshire Street
    W1G 7AJ
    United Kingdom

  • Analytics Boosters
    United States

    80 S.W. 8th Street
    33130 - Miami
    United States of America


Contact us