How To Integrate Google Optimize with Microsoft Clarity

Microsoft Clarity is a heat-mapping and session recording tool that provides valuable insights into how your users behave while on your website. Where data from Google Analytics tells you what’s happening on your website, Microsoft Clarity will give you insight into why users do what they do on your site. 

Using Google Optimize as your A/B testing tool, it’s easy to see what effect variations have on key metrics. But if you’re looking to get insight into why and how user behavior changed, things become more complex. The problem is that, out of the box, there isn’t a way to see a heatmap of just your experiment’s B variant — and if you’re trying to watch session recordings of users on your B variant, there isn’t an easy way to do that either.

This is where we can leverage Microsoft Clarity’s manual custom tags feature. The custom tags feature allows us to run a snippet of JavaScript code to tag the user in Clarity with our Google Optimize experiment name and variation. You will set up and fire this tag from within Google Optimize’s visual editor on all of your experiment’s variants. After the user is tagged, you will be able to easily view heatmaps and recordings from users who saw your experiment, adding value to your Google A/B testing. 

How to Create the Microsoft Clarity Custom Tag

To set a custom tag for a user, Clarity uses a small JavaScript snippet:

clarity(“set”, “key”, “value”);

• The set keyword tells Clarity that a custom tag is being set.
• The key parameter should be the same as the experiment name set in Google Optimize.
• The value parameter will hold the Optimize variant name. By default, Google Optimize reports these as 0 for control and 1 for your variant, but feel free to put a user-friendly name in there instead.

You’ll want to create as many Clarity custom tag snippets as you have variants; most of the time, you’ll only need one. The snippet for your experiment should look something like this:

clarity(“set”, “My A/B Test”, “1”);

How to Add the Clarity Snippet to Google Optimize

With our Clarity snippet created for our variant, we’re ready to add it to our experiment. 

First, in Google Optimize, click Edit on your variant. 

After the preview of your variant loads, click the code icon in the top right-hand corner, and then select Global JavaScript. 

In the Global JavaScript window, first, add:

window.onload = (event) => {

};

This on-load function will only run what’s inside of it after the page has fully loaded. We’re using it because we don’t want our Clarity snippet running too fast before Microsoft Clarity has had a chance to load fully. 

Now add the snippet to set the custom tag and save. It should look like this:

After implementing the custom tag, it can take from 30 minutes to two hours to show up in your Clarity filters. 

How to Create a Clarity Filter for Your Experiment

Now that your custom tag is firing, you can set up filters and a segment in Microsoft Clarity for your experiment.

After logging into Clarity, click on filters in the top right-hand corner. Then click on Custom Tags in the left-hand navigation. 

The name of your test will be found in the Select Tag dropdown. Select it, then in the right-hand dropdown, select your variant and apply the filter. 

With the filter applied, you’re able to view heatmaps and recordings from only the users who interacted with your experiment. 

Finally, save your filter as a segment, so it’s easy to return to for analysis when your A/B test completes. 

Tips and Further Reading

• Compare your heatmaps. Compare the heatmap of your variant to a heatmap of your control by using Microsoft Clarity’s compare feature. For your control, set the end date of the date range filter to before the date your test went live. Then compare that to a segment of your experiment.
  
  Look for differences in clicks and scroll depth on each device type to understand how user behavior changed in your experiment.

• Fire custom tags on your major conversions for faster analysis. Now that you know how to create custom tags for Microsoft Clarity, you should also tag all of your micro and macro conversions. With tags on your conversions, you’ll be able to quickly view users who completed a specific micro or macro conversion.
  
  If you’re using Google Tag Manager to manage events and triggers, you should be able to use existing triggers for most of your tags. Use the Custom HTML tag, and remember to place your Clarity tag inside a script element. It should look like this: