Just the other day I found this question on the Growthbook Slack channel #ask-questions:
Clarity & Growthbook user
#ask-questionsThis 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.
Get in touch
- +31 53 234 0444
- [email protected]
You will have a meeting with our CRO expert Rudger de Groot