NOTE: To set up compatibility with Microsoft Clarity, you must first upgrade your embed code to the new Usercentrics Version 3 consent banner. 



Instructing Clarity to require consent before placing a cookie


Step 1: Upgrade your Usercentrics consent solution to Version 3


  1. If you haven’t already, follow these steps to update your Usercentrics embed code to the new Version 3.


Step 2: Configure Microsoft Clarity to require consent


  1. Log into Microsoft Clarity.

  2. Select ⚙ Settings from the top menu.

  3. Select { } Setup from the menu on the left

  4. Under Advanced settings toggle off Cookies.

  5. Clarity will notify you that cookies are off.




Step 3: Passing consent data to Microsoft Clarity


  1. Log into your Termageddon account

  2. Click into your respective license

  3. Click ‘edit policy details’ for the Cookie Policy and Consent Tool

  4. Click “next” until you get to page #4 and select the option to Enable Microsoft Clarity Compatibility

  1. Click “Next” several times and ultimately ‘Submit’ for changes to take effect.

  2. Paste this code directly below your Usecentrics V3 script (from step #1 above): 


<script>

  window.addEventListener('ucClarityConsent', function (event) {

    var clarity = event.detail.services['jzMEq56vW'];

    window.clarity('consent', clarity.consent.given);

  });

</script>



That’s it. Now, cookies will be off by default for Microsoft Clarity and multi-page session recordings will only occur after a user provides proper consent. 



Testing:

Microsoft discloses in this article how to test to ensure consent is being captured. 


Below is a video showing how to test as well: 




N: You may need to insert Usercentrics’ manual controller for Microsoft Clarity. By default, Usercentrics helps auto-block third party scripts, but you can update the Microsoft Clarity script to help ensure consent is first being captured. To do this, you need to insert the following into your Microsoft Clarity Script:


  • Within the Microsoft Clarity Script, replace type="text/javascript" with type="text/plain" data-usercentrics="Microsoft Clarity"


So your Microsoft Clarity Script will now look like this: 


<script type="text/plain" data-usercentrics="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", "XXXXXXX");

</script>



NOTE: Clarity's recordings won't be linked together into multi-page sessions until you inform Clarity of a visitor's consent. Heat maps and data other than session recordings will continue to be available to you.



Sources: 
1. Usercentrics: https://support.usercentrics.com/hc/en-us/articles/17540715282332-Setting-up-Microsoft-Clarity-to-require-consent


2. Microsoft Clarity: https://learn.microsoft.com/en-us/clarity/setup-and-installation/cookie-consent#:~:text=%2C%20false)-,Steps%20to%20confirm%20Clarity%20isn%27t%20writing%20cookies,-Note