Integrating Microsoft Clarity Consent Mode v2 with Sypher

Starting October 31, 2025, Microsoft Clarity requires websites serving visitors in the EEA, UK, or Switzerland to explicitly provide consent information using the Consent API v2. Without it, Clarity will operate in a limited, no-consent mode—no cookies, no session stitching, and restricted analytics.

If you’re using Sypher as your cookie consent manager, you can easily forward users’ choices to Clarity so it only collects data after proper consent.

📌 Why You Need Consent Mode v2

• Compliance: Ensures you respect GDPR and ePrivacy Directive requirements.
• Accuracy: Allows Clarity to collect analytics only after user approval.
• Better Insights: With granted consent, you get complete heatmaps and session recordings.

🛠 How to Set It Up

1. Enable Consent Mode in Clarity
   In your Clarity dashboard,  open your project settings and turn on Consent Mode. This prevents Clarity from setting cookies until you provide a consent signal.
2. Use our consent event (gdprCookiesEnabled)
   Our system fires a gdprCookiesEnabled event whenever a visitor makes a choice on your cookie banner. Use this event to inform Clarity of the user’s decision.
3. Insert the following code
   Add this snippet after your cookie banner script (and after loading the Clarity base tag or deferred until consent):

<script type="text/javascript">
  document.addEventListener('gdprCookiesEnabled', function(e) {
    var analyticsConsent = e.detail.analytics ? "granted" : "denied";
    var adConsent = e.detail.marketing ? "granted" : "denied";

    // Send consent to Clarity using Consent v2 API
    window.clarity('consentv2', {
      analytics_Storage: analyticsConsent,
      ad_Storage: adConsent
    });
  });
</script>

What this does:

• Maps your Analytics category to Clarity’s analytics_Storage.
• Maps your Marketing category to Clarity’s ad_Storage.
• Sends “granted” or “denied” depending on the visitor’s choice.

✅ Testing Your Integration

1. Open your site in a private browser window.
2. Before accepting cookies, check DevTools → Application → Cookies: no _clck or _clsk cookies should appear.
3. Accept analytics cookies → Refresh → These cookies should now be set.

In the console, you can verify the consent status with:

clarity('metadata', (d,u,consent) => console.log('consentStatus:', consent), false, true, true);

By following these steps, your website stays GDPR-compliant while ensuring Clarity receives the correct consent information. Your analytics remain accurate, and your users’ privacy choices are fully respected.