Microsoft Clarity Consent Mode Integration with Osano

Updated 4 months ago

Overview

Integrate Osano with Microsoft Clarity to ensure that Clarity respects user consent preferences and complies with relevant privacy laws, such as GDPR and CCPA.

Microsoft Clarity allows you to analyze user behavior on your website, while Osano ensures that tracking only occurs when users grant consent.

For more information on Microsoft Clarity, visit Microsoft’s official documentation.

How the Integration Works

When combined with Osano:

Before Consent: Osano blocks all non-essential cookies and scripts until the user grants consent.
After Consent: Osano shares the user’s preferences with Microsoft Clarity, so tracking scripts only run if consent has been provided.

Note: Osano only shares consent preferences with Clarity, such as whether marketing or analytics cookies have been accepted. No personal data is transmitted.

Prerequisites

Osano’s Consent Management Platform (CMP) is installed on your website.
You have an active Microsoft Clarity account with your Clarity project ID.

Set up Workflow & Best Practices

Execution Order on Your Website:

Osano.js – Loads and manages user consent.
Clarity Script – Adds Microsoft Clarity tracking.
Clarity Consent Script – Ensures Clarity respects consent preferences.

Important: If You Use Google Consent Mode

Microsoft Clarity has integrated support for Google Consent Mode (GCM).

This means Clarity will automatically interpret and respect Google Consent Mode signals for ad_storage and analytics_storage, based on user consent preferences.
If you are already using Google Consent Mode, you don't need to take any additional steps. See Microsoft’s documentation for more details.

Steps to Implement Microsoft Clarity with Osano

1. Load Osano.js

After creating and publishing your configuration in Osano, click Get Code to copy your unique Osano.js snippet. Add it to the <head> section of your website:

2. Install the Microsoft Clarity Script

Below the Osano.js script, add the Microsoft Clarity tracking script.

Replace "Clarity Project ID" with the project ID from your Microsoft Clarity account.

<script type="text/javascript">
(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+"?ref=Webflow";
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "Clarity Project ID");
</script>

3. Add the Clarity Consent Script

This script ensures Clarity respects the user’s consent choices from Osano.

<script type="text/javascript">
function sendClarityConsent(osanoConsent) {
  if (typeof window.clarity === 'function') {
    const analyticsConsent = osanoConsent.ANALYTICS === 'ACCEPT' ? 'granted' : 'denied';
    const marketingConsent = osanoConsent.MARKETING === 'ACCEPT' ? 'granted' : 'denied';
    const clarityConsent = {
      ad_Storage: marketingConsent,
      analytics_Storage: analyticsConsent
    };
    window.clarity('consentv2', clarityConsent);
  }
}
Osano.cm.addEventListener('osano-cm-initialized', function(consent) {
  if (consent) sendClarityConsent(consent);
});
Osano.cm.addEventListener('osano-cm-consent-saved', function(consent) {
  sendClarityConsent(consent);
});
</script>

4. Test the Implementation

Once installed, test to ensure Clarity is firing correctly based on user consent. You can verify this using browser developer tools.

Important: Choose Between Consent Mode and IAB TCF

Customers must choose between Consent Mode or IAB TCF for handling user consent signals. Both should not be used simultaneously.

Consent Mode for UET or IAB TCF can be implemented, but only one should be used at a time.

This ensures compliance with privacy regulations like GDPR while allowing for continued ad tracking.

Help Center