Jak poprawnie obsłużyć Microsoft Clarity z Consent Magic?

Published: at 17:08

Używasz już Microsoft Clarity? Jeśli nie, to czas zacząć jak najszybciej. W tym darmowym narzędiu możesz łatwo przejrzeć sesje użytkowników, stworzyć lejki do analizy czy nawet zmierzyć jak szybko się ładuje Twoja strona. Masz błędy w Javascript? Szybko zlokalizujesz sytuacje, w których występują. Potzebujesz szybkiego streszczenia sesji? Skorzystaj z pomocy asystenta AI, który opisze wybrane sesje i wynierze te najważniejsze do sprawdzenia.

Jeśli już używasz Microsoft Clarity, to musisz przestrzegać wymagań dotyczących zgód na ciasteczka w EEA, UK i Szwajcarii. Ponieważ sam musiałem to zintegrować, to mam dla Was gotowy kawałek kodu, który pomoże wszystko ogarnąć z użyciem Consent Magic dla WordPress! 💪

Problem:

Clarity wymaga, żeby zgoda na ciasteczka była jasno wyrażona (np. na kategorie analityczne). Chcesz, żeby działało to razem z pluginem Consent Magic? Ten kod załatwi sprawę – sprawdzi zgodę i zaktualizuje status w Clarity.

Kod JavaScipt wrzucenia:

// 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");

Jak działa ten kod?

  1. Sprawdza zgodę na analitykę na podstawie dynamicznie generowanego ciasteczka (np. cs_enabled_cookie_term_377) przez plugin Consent Magic.
  2. Włącza lub wyłącza Clarity w zależności od zgody użytkownika.
  3. Odpala się na załadowanie strony i po kliknięciu w przyciski zgody/zmiany preferencji Consent Magic.

Dlaczego warto to wprowadzić?

Warto zadbać o dostosowanie strony do nowych wymagań, aby zapewnić zgodność z regulacjami, uniknąć potencjalnych kar oraz utrzymać zaufanie użytkowników. Transparentność w zakresie przetwarzania danych to nie tylko obowiązek prawny, ale także element budujący pozytywny wizerunek marki.

Dzięki temu możesz działać zgodnie z przepisami i jednocześnie utrzymać pełną funkcjonalność Microsoft Clarity.

Daj znać, czy pomogło! 👨‍💻✨

Built with Astro