How to Properly Handle Microsoft Clarity with Consent Magic plugin?

Do you already use Microsoft Clarity? If not, it’s time to start right away. With this free tool, you can easily review user sessions, create funnels for analysis, or even measure how fast your site loads. Got JavaScript errors? You’ll quickly locate the situations where they occur. Need a quick session summary? Use the AI assistant, which will describe selected sessions and highlight the most important ones to check manually.

If you’re already using Microsoft Clarity, you must comply with cookie consent requirements in the EEA, UK, and Switzerland. Since I had to integrate this myself, I’ve got a ready-made piece of code that will help you handle everything with Consent Magic for WordPress! 💪

The Consent Problem:

Microsoft Clarity requires explicit cookie consent (e.g., for analytics categories). Want this to work seamlessly with the Consent Magic plugin? This code will solve the issue – it checks the current consent for analytics and updates the Clarity status accordingly.

JavaScript Code

// Updated consent logic
function updateClarityConsent() {
  try {
    // Get the analytics category ID from CS_Data
    var analyticsCatId = CS_Data.cs_script_cat.analytics; // e.g., 377
    var cookieKey = "cs_enabled_cookie_term_" + analyticsCatId; // e.g., cs_enabled_cookie_term_377
    var cookieValue = getCookieValue(cookieKey);

    if (cookieValue === "yes") {
      // User granted analytics consent
      window.clarity("consent");
      console.log("Clarity consent granted");
    } else {
      // User denied analytics consent
      window.clarity("consent", false);
      console.log("Clarity consent revoked");
    }
  } catch (error) {
    console.error("Error updating Clarity consent:", error);
  }
}

// Helper function to retrieve a cookie value
function getCookieValue(cookieName) {
  var name = cookieName + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var cookieArray = decodedCookie.split(";");
  for (var i = 0; i < cookieArray.length; i++) {
    var cookie = cookieArray[i].trim();
    if (cookie.indexOf(name) === 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return null;
}

// Run the consent update logic on DOM load
document.addEventListener("DOMContentLoaded", function () {
  setTimeout(updateClarityConsent, 100);
  console.log("Clarity consent logic initialized on DOM load");
});

// Listen for ANY click on .cs_action_btn
document.addEventListener(
  "click",
  function (evt) {
    if (
      evt.target.classList &&
      evt.target.classList.contains("cs_action_btn")
    ) {
      // Wait 100ms before updating consent to ensure CS_Data updates
      setTimeout(function () {
        updateClarityConsent();
      }, 100);
    }
  },
  true
); // Optional capture phase for better event handling

// Log footer script load
console.log("Clarity footer script loaded");

How Does This Code Work?

• It checks for analytics consent based on a dynamically generated cookie (e.g., cs_enabled_cookie_term_377) created by the Consent Magic plugin.
• It enables or disables Clarity based on the user’s consent for analytics.
• It runs on page load and after clicking Consent Magic’s buttons for agreeing or changing preferences.

Why Should You Implement This?

It’s essential to align your website with the new requirements to ensure compliance with regulations, avoid potential fines, and maintain user trust. Transparency in data processing is not only a legal obligation but also a key element in building a positive brand image.

These changes will be enforced across the European region by early 2025. By implementing this code now, you can ensure compliance with the regulations while maintaining the full functionality of Microsoft Clarity.

Let me know if this helps! 👨‍💻✨