💡 You’re not using the Complianz wizard to add Clarity, and you’re not using the Clarity WordPress plugin? 👉 You can use this article to add everything by yourself. If you want the standard setup, go to: https://complianz.io/microsoft-consent-mode/
This guide is for you if you already configured Complianz with a Statistics service (like GTM with or without Consent Mode, Matomo, Google Analytics, or a plugin implementation), or you want to manually implement Microsoft Clarity Consent V2.
How to manually insert Clarity when Statistics is already configured
If you are already using a statistics tool, such as GTM, but you want to implement Clarity Consent Mode and get even more specific data, this is for you, and it will be very straightforward.
Add the Microsoft Clarity Consent Mode v2 snippet
Use the snippet below and place it in the header of your website. Please replace {site_ID} with your own Clarity project ID.
/**
* Microsoft Clarity Consent Mode V2 integration with Complianz
*/
function callClarity(method, params) {
if (typeof window.clarity === 'function') {
try {
window.clarity(method, params);
} catch (e) {
console.warn('Clarity API error:', e);
}
}
}
(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", "{site_ID}");
function getConsentFromEvent(e) {
var d = e && e.detail && e.detail.categories ? e.detail.categories : [];
var categories = Array.isArray(d) ? d : [];
return {
analyticsAllowed: categories.indexOf('statistics') !== -1,
adsAllowed: categories.indexOf('marketing') !== -1
};
}
function sendClarityConsent(analyticsAllowed, adsAllowed) {
var status = function (b) { return b ? "granted" : "denied"; };
callClarity('consentv2', {
analytics_Storage: status(!!analyticsAllowed),
ad_Storage: status(!!adsAllowed)
});
}
function eraseClarityCookies() {
callClarity('consent', false);
}
document.addEventListener('cmplz_fire_categories', function (e) {
var consent = getConsentFromEvent(e);
sendClarityConsent(consent.analyticsAllowed, consent.adsAllowed);
});
document.addEventListener('cmplz_revoke', function (e) {
var consent = getConsentFromEvent(e);
sendClarityConsent(consent.analyticsAllowed, consent.adsAllowed);
if (!consent.analyticsAllowed && !consent.adsAllowed) {
eraseClarityCookies();
}
});You can add it directly in your theme’s header.php (child theme recommended) or use a plugin like Header Footer Code Manager to insert the code in the header.
The consent will run according to the consent categories.
Why the header?
-
Clarity should load as early as possible to fire tags correctly.
-
Placing it in the footer can cause scripts to miss initial page events or delay tracking.
Want to debug the Consent Mode, here’s how.