¿Cómo hacer heatmaps de las variantes de un test A/B?

Heatmaps are tools that provide us with a lot of information to understand how users consume a page of our website. In addition, they are usually easy to interpret and the tools that generate them, such as Hotjar or CrazyEgg, are very easy to use.

However, things get a little more complicated if we want to make a heatmap combined with an experiment or an A/B test. Generating a heatmap of the variant of our A/B test will allow us to compare not only specific metrics of the results of the experiment, but also to have contextual information on how the users who have seen that variant have behaved. We will be able to compare the heatmap of the variant with that of the control group to reach better conclusions.

How can we make a heatmap of one of the variants of our A/B test?

In this case, we will use Hotjar to create our heatmap and Google Optimize to run the A/B test. However, the procedure in the case of using other tools will be very similar. 

What steps do we have to follow? Just five.

1. When configuring the heatmap in Hotjar, in the "Page Targeting" section, select the option "Users who trigger a JavaScript snippet". This will allow us to create a specific trigger with the name we want. For example, we will call it "abtest-variant1".

2. We create the JavaScript code to execute the Hotjar trigger. In this case, we will use the code below. If you have named your trigger differently, just rename it in the code to match yours.

hj('trigger', 'abtest-variant1');

3. In Google Optimize, with the experiment already created, we go to the editor of the variant for which we want to generate the heatmap. Once inside the editor, click on the icon that appears at the top left and deselect the fields "Use element id" and "Use element class". We should have only "body" in the "Element Selector" field. Finally we click on "Add change" and select the "JavaScript" option, as you can see in the image:

4. We paste the JavaScript code of the trigger that we have created in point 2. To ensure that it works well, we will put the trigger inside the code that can be seen below. Select the option "After closing tag" and click on "Apply".

5. Ready! Our developers will have to make the changes in the page code to modify the elements we want to test. As soon as we launch the experiment, we will start collecting data from the variant in a Hotjar heatmap.