Microsoft Clarity + ConsentLayer

Microsoft Clarity records sessions and heatmaps, so it belongs in the Statistics category. This guide shows how to make sure it only runs after a visitor consents to statistics.

Without the SDK (banner only)

If you're using the banner script, Clarity is handled automatically. Clarity's domain (clarity.ms) is in ConsentLayer's default blocking rules under Statistics, so its script is blocked until statistics consent is given, then released. No extra code needed.

Clarity is also in the service library (search for clarity), so a scan will detect it and slot it into Statistics for you.

Clarity Consent Mode

Clarity has its own consent API. Instead of blocking the script outright, you can let Clarity load and have ConsentLayer forward the visitor's decision to it — Clarity then adjusts its own behavior (like Google Consent Mode does for Google tags).

Turn this on in Site → Settings → Microsoft Clarity → Clarity Consent Mode. Once enabled, the banner calls Clarity's clarity("consent", …) with true when statistics is consented and false when it isn't. This is recommended if you want Clarity present for GDPR/CCPA visitors while still respecting their choice.

With the SDK (React)

If you inject the Clarity snippet yourself, gate it behind statistics consent:

import { ConsentGate } from '@consentlayer/sdk/react'

function Clarity() {
  return (
    <ConsentGate category="statistics">
      <script
        dangerouslySetInnerHTML={{
          __html: `
            (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", "XXXXXXXXXX");
          `,
        }}
      />
    </ConsentGate>
  )
}

With the SDK (vanilla JS)

import { hasConsent, onConsentChange } from '@consentlayer/sdk'

function loadClarity() {
  if (!hasConsent('statistics')) return
  ;(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', 'XXXXXXXXXX')
}

loadClarity()
onConsentChange(() => loadClarity())

Verification

Open your site in a fresh session and check the Network tab before consenting: there should be no request to clarity.ms. Accept statistics (or click "Accept all") and confirm the Clarity tag then loads.