What is Microsoft Clarity

A free tool from Microsoft for analysing user behaviour. It offers heatmaps, session recordings and automatic UX issue reports.

Cookie category

Microsoft Clarity belongs to the analytics category.

Installation with Consentio

Add the Microsoft Clarity tracking code with type="text/plain" and data-category="analytics" attributes, so it only loads after analytics consent is granted:

<!-- Microsoft Clarity - blocked until analytics consent -->
<script type="text/plain" data-category="analytics">
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window,document,"clarity","script","YOUR_CLARITY_ID");
</script>

JavaScript API alternative

Dynamically load Microsoft Clarity after consent is granted:

Consentio.onConsentChange((consent) => {
  if (consent.analytics) {
    // Load Microsoft Clarity
    (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window,document,"clarity","script","YOUR_CLARITY_ID");
  }
})

Integration via GTM

In Google Tag Manager, add a Microsoft Clarity tag with a consent requirement for analytics_storage. Clarity is available as a community template in the GTM Template Gallery.

Google Consent Mode v2

Microsoft Clarity supports Google Consent Mode. If you use GTM, simply set the consent requirement to analytics_storage.

Verification

1. Open DevTools (F12) → Network tab
2. Before consent: clarity.ms should not load
3. Grant analytics consent
4. Verify clarity.ms in the Network tab
5. Check the Clarity dashboard