Adding Clarity Heatmaps & Recordings in GrowthBook experiments

Just the other day I found this question on the Growthbook Slack channel #ask-questions:

I just want to ask if anyone has any experience with the Growthbook & Clarity. I would like to see the heatmaps of each variant. Does anyone have any experience? Has anyone tried to do this maybe through Clarity custom events? Or in other qualitative tools? Thank you for your time, peeps.

Clarity & GrowthBook User

#ask-questions

This is a great question because by adding heatmaps and user session recordings to your experiment you gain more insights into which elements drove a change with the visitors. This added qualitative metadata can definitely help you better understand the insights that you get from an experiment, which can lead to better follow-up experiments.

The solution is adding custom tags to your variation, these tags are then added to a Clarity session when the visitor visits your experiment.

To use custom tags, pass the set argument along with a key-value pair to define a tag in your JavaScript. When Clarity collects data for that tag, it appears in the Filters options.

In Growthbook, there are multiple ways to add this JS code to your variation, but if you are using, for example, the visual editor, then you just have to add the code in the JS field.

window.clarity(“set”, “AB-Test-1”, “Variation-1”)

One thing you do have to check is the order in which Clarity and Growthbook load. For this to work, Clarity must be loaded when the experiment starts; otherwise, the tags won’t be set.

Now, this is where it can get a bit tricky. GrowthBook is usually faster than Clarity (which is a good thing if you want to prevent page flashing), so you also need to add some logic so your JS code checks first if Clarity is loaded. When that validates, the custom tag is set.

Here is a screenshot of how we integrate Clarity with Growthbook. Credits to Pascal Louwes for this work of art.