Articles on: Integrations

Integrating Microsoft Clarity Consent API Using Pandectes

Microsoft Clarity is a free analytics tool that offers heatmaps and session recordings to help you understand user behavior on your website. However, since Clarity collects behavioral data, using it in the EU requires prior user consent under the GDPR and ePrivacy Directive.


With Pandectes, you can easily integrate Microsoft Clarity into your Shopify store and ensure that data collection only starts after valid user consent is obtained.


Prerequisites


Before you start:


  • You must have a Microsoft Clarity account.
  • Your Shopify store should have the Pandectes GDPR Compliance app installed and configured.
  • Make sure you have enabled the Microsoft Clarity integration inside the app.




The Clarity Consent API lets you delay Clarity tracking until the user has provided valid consent. This helps you stay compliant with GDPR and prevents unauthorized tracking.


When appropriately integrated, Clarity will only activate if the user has accepted the necessary cookies through the Pandectes consent banner.


How the Integration Works


When the integration is enabled:


  1. The Clarity tracking script is not loaded immediately on the page.
  2. The Pandectes app waits for the user to interact with the consent banner.
  3. If the user accepts Performance cookies:
  • Pandectes invokes the Clarity Consent API with { consent: "granted" }.
  • This allows Clarity to begin tracking.
  1. If the user rejects or ignores consent:
  • No tracking occurs.
  • Clarity cookies remain disabled (clarity=consent-denied).


This ensures no Clarity session recording or heatmap tracking until consent is explicitly provided.



To ensure that Microsoft Clarity does not set cookies before a visitor gives consent, follow these steps based on Microsoft's official documentation:


1. Disable Cookies in Clarity Settings


  • Go to your Microsoft Clarity dashboard.
  • Navigate to Settings → Setup.
  • Scroll down and turn off the Cookies option.
  • Clarity will notify you that cookies are disabled.




This setting ensures that Clarity will not set any cookies until you explicitly send a consent signal.



Once cookies are disabled in Clarity, you must manually notify Clarity when the user gives consent.


  • When a user accepts performance or analytics cookies via the Pandectes banner, execute the following code:


  window.clarity('consent');


Enable Microsoft Clarity in Pandectes


Follow these steps:


  1. Log in to your Shopify store and access Pandectes app.
  2. Go to Settings > Integrations.
  3. Scroll to Microsoft Clarity.
  4. Toggle the switch to enable the integration.
  5. Paste your Clarity Project ID if you want to load the snippet from Pandectes.



Once enabled, Pandectes will:

  • Prevent Clarity from loading cookies before consent.
  • Automatically trigger Clarity only after Performance cookie consent is given.


Final Notes


This integration is fully compliant and optimized for:

  • Shopify stores selling in the EU
  • Merchants under GDPR, CCPA, and other privacy frameworks
  • Stores seeking automated control over third-party scripts

For more details, see Microsoft’s official documentation on cookie consent and Clarity.


Updated on: 08/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!