Consent Mode – Przewodnik i przykładowy skrypt

Wstęp

Consent Mode to mechanizm firmy Google, który pozwala na dynamiczne dostosowanie sposobu zbierania danych w zależności od zgody użytkownika. Jest on szczególnie istotny dla właścicieli stron internetowych i programistów, ponieważ umożliwia zgodność z przepisami takimi jak RODO (GDPR) czy CCPA, jednocześnie minimalizując utratę danych analitycznych.

Jak działa Consent Mode?

Consent Mode współpracuje z narzędziami Google, takimi jak Google Analytics i Google Ads, pozwalając na dostosowanie zachowania skryptów śledzących w zależności od zgód użytkownika. Działa w dwóch trybach:

• Basic Consent Mode – domyślne blokowanie wszystkich mechanizmów śledzenia do momentu wyrażenia zgody.
• Advanced Consent Mode – dynamiczne dostosowanie zbierania danych do zgód użytkownika, umożliwiające częściową anonimową analizę ruchu.

Gdy użytkownik nie wyrazi zgody, Google może nadal zbierać dane w sposób zagregowany i anonimizowany, pomagając utrzymać podstawowe funkcje analityczne.

Kategorie zgód w Consent Mode

Google Consent Mode obsługuje kilka typów zgód, które można podzielić na wymagane i opcjonalne.

Wymagane zgody (Core Consent States)

Te zgody są kluczowe dla prawidłowego działania Consent Mode:

1. ad_storage – Przechowywanie plików cookie dla reklam
   • granted: Google może zapisywać i odczytywać pliki cookie związane z reklamami.
   • denied: Pliki cookie reklamowe są blokowane.
2. analytics_storage – Przechowywanie danych analitycznych
   • granted: Dane mogą być przechowywane w Google Analytics.
   • denied: Google Analytics nie zapisuje żadnych danych użytkownika.
3. functionality_storage – Przechowywanie plików cookie związanych z funkcjonalnością witryny
   • granted: Witryna może przechowywać pliki cookie usprawniające działanie strony (np. preferencje użytkownika).
   • denied: Funkcjonalne pliki cookie są blokowane.

Opcjonalne zgody (Extended Consent States)

Google oferuje dodatkowe opcje zgód dla bardziej zaawansowanego zarządzania danymi:

4. personalization_storage – Przechowywanie danych personalizacyjnych
   • granted: Dane mogą być wykorzystywane do personalizacji treści i rekomendacji.
   • denied: Brak personalizacji w oparciu o zapisane dane.
5. security_storage – Przechowywanie danych związanych z bezpieczeństwem
   • granted: Pliki cookie mogą być używane do zabezpieczeń (np. ochrona przed botami, wykrywanie oszustw).
   • denied: Ograniczone możliwości wykrywania zagrożeń.

Implementacja Consent Mode w kodzie

Dodanie podstawowej konfiguracji przez Google Tag Manager

• Włączenie obsługi Consent Mode w ustawieniach GTM.
• Konfiguracja domyślnych stanów zgód.

Ręczna implementacja w JavaScript

Przykładowa konfiguracja domyślnych zgód:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied',
  'functionality_storage': 'granted',
  'personalization_storage': 'denied',
  'security_storage': 'granted'
});

Dynamiczna aktualizacja zgody

Po interakcji użytkownika, np. zaakceptowaniu plików cookie, można zaktualizować zgody dynamicznie:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'personalization_storage': 'granted'
});

Consent Mode a RODO i inne regulacje

• Jak Consent Mode pomaga w zgodności z RODO, CCPA itp.?
• Czy Consent Mode zastępuje baner zgody?
• Rekomendowane praktyki wdrażania dla zgodności prawnej.

Debugowanie i testowanie implementacji

• Narzędzia do testowania (Google Tag Assistant, DevTools, Konsola JavaScript).
• Jak sprawdzić, czy zgody są poprawnie ustawiane?
• Typowe błędy i sposoby ich rozwiązywania.

Wpływ Consent Mode na zbieranie danych

• Co dzieje się z danymi, jeśli użytkownik odmówi zgody?
• Jakie raporty w Google Analytics są dostępne przy różnych poziomach zgody?
• Alternatywne sposoby analizy ruchu (np. modelowanie danych Google).

Przyszłość Consent Mode i wnioski

• Planowane zmiany i rozwój standardu.
• Jakie technologie mogą uzupełnić Consent Mode?
• Podsumowanie kluczowych zasad implementacji.

Przykładowy skrypt Consent Modal Bootstrap

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consent Management</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X" async></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
    </script>
    <style>
        #consentBanner {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <!-- Popup zgody -->
    <div id="consentBanner">
        <p>Używamy plików cookie do analizy ruchu oraz personalizacji treści. Możesz zaakceptować wszystkie, odrzucić lub dostosować swoje preferencje.</p>
        <button class="btn btn-success" id="acceptAllBtn">Akceptuję</button>
        <button class="btn btn-danger" id="rejectAllBtn">Odrzucam</button>
        <button class="btn btn-primary" id="customizeBtn">Dostosuj</button>
    </div>

    <!-- Modal zgody -->
    <div class="modal fade" id="consentModal" tabindex="-1" aria-labelledby="consentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="consentModalLabel">Zarządzanie Zgodami</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Wybierz, na co chcesz wyrazić zgodę:</p>
                    <div class="form-check">
                        <input class="form-check-input consent-checkbox" type="checkbox" id="adStorage" name="ad_storage">
                        <label class="form-check-label" for="adStorage">Reklamy</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input consent-checkbox" type="checkbox" id="analyticsStorage" name="analytics_storage">
                        <label class="form-check-label" for="analyticsStorage">Analityka</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input consent-checkbox" type="checkbox" id="functionalityStorage" name="functionality_storage" checked disabled>
                        <label class="form-check-label" for="functionalityStorage">Funkcjonalność (wymagane)</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input consent-checkbox" type="checkbox" id="personalizationStorage" name="personalization_storage">
                        <label class="form-check-label" for="personalizationStorage">Personalizacja</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input consent-checkbox" type="checkbox" id="securityStorage" name="security_storage" checked disabled>
                        <label class="form-check-label" for="securityStorage">Bezpieczeństwo (wymagane)</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveConsentBtn">Zapisz ustawienia</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const consentModal = new bootstrap.Modal(document.getElementById("consentModal"));
            const saveConsentBtn = document.getElementById("saveConsentBtn");
            const consentBanner = document.getElementById("consentBanner");
            const acceptAllBtn = document.getElementById("acceptAllBtn");
            const rejectAllBtn = document.getElementById("rejectAllBtn");
            const customizeBtn = document.getElementById("customizeBtn");

            let consentSettings = {
                ad_storage: "denied",
                analytics_storage: "denied",
                functionality_storage: "granted",
                personalization_storage: "denied",
                security_storage: "granted"
            };

            function updateConsent() {
                gtag('consent', 'update', consentSettings);
                localStorage.setItem("userConsent", JSON.stringify(consentSettings));
                consentBanner.style.display = "none";
                consentModal.hide();
            }

            const storedConsent = localStorage.getItem("userConsent");
            if (!storedConsent) {
                consentBanner.style.display = "block";
            } else {
                consentSettings = JSON.parse(storedConsent);
            }

            acceptAllBtn.addEventListener("click", function () {
                consentSettings = {
                    ad_storage: "granted",
                    analytics_storage: "granted",
                    functionality_storage: "granted",
                    personalization_storage: "granted",
                    security_storage: "granted"
                };
                updateConsent();
            });

            rejectAllBtn.addEventListener("click", function () {
                consentSettings = {
                    ad_storage: "denied",
                    analytics_storage: "denied",
                    functionality_storage: "granted",
                    personalization_storage: "denied",
                    security_storage: "granted"
                };
                updateConsent();
            });

            customizeBtn.addEventListener("click", function () {
                consentModal.show();
            });

            document.querySelectorAll(".consent-checkbox").forEach(checkbox => {
                checkbox.addEventListener("change", function () {
                    consentSettings[this.name] = this.checked ? "granted" : "denied";
                });
            });

            saveConsentBtn.addEventListener("click", updateConsent);
        });
    </script>
</body>
</html>