Implementacja Google Consent Mode V2 w narzędziach Google Tag Manager (GTM) i Cookiebot to fundamentalny krok w kierunku zapewnienia zgodności ze standardami prywatności danych online. Istnieją dwie metody wdrożenia: automatyczny tryb blokowania plików cookies (rekomendowany) i ręczne zarządzanie tagami.
Automatyczny tryb jest prosty w implementacji i łatwy w obsłudze, idealny dla tych, którzy szukają wygodnego rozwiązania bez zagłębiania się w techniczne aspekty. Blokuje on wszystkie ciasteczka z wyjątkiem tych niezbędnych do funkcjonowania serwisu do czasu wyrażenia przez użytkownika zgody.
Ręczne zarządzanie oferuje większą kontrolę i jest bardziej wydajne. Zalecane jest jednak dla zaawansowanych użytkowników, którzy potrafią dostosować sposób działania tagów i ciasteczek. Wymaga to bowiem znajomości działania kodów, ciasteczek oraz zmian w kodzie strony, a nie tylko w menadżerze tagów Google.
Wybór metody implementacji
Dostępne są 2 tryby blokowania ciasteczek: automatyczny i ręczny.
1. Automatyczny Tryb Blokowania
- Plusy: Łatwa implementacja; automatyczna kontrola cookies nieustawianych przez GTM.
- Minusy: Mniejsza kontrola nad indywidualnymi tagami.
- Dla kogo: Mniej techniczni użytkownicy; strony z mniejszą ilością niestandardowych tagów.
2. Ręczne Zarządzanie Tagami
- Plusy: Zapobiega ustawianiu cookies, nawet jeśli skrypty Cookiebot nie zostaną załadowane. W mniejszym stopniu wpływa na wydajność strony.
- Minusy: Bardziej czasochłonne; wymaga znajomości GTM oraz HTML.
- Dla kogo: Zaawansowani użytkownicy; strony wymagające szczegółowej konfiguracji tagów.
Instrukcja Cookiebot z GTM i Automatycznym Trybem Blokowania
Aby to osiągnąć, musisz upewnić się, że skrypt Cookiebot nie jest zainstalowany przez GTM. To oznacza, że powinieneś usunąć tag Cookiebot CMP, zatrzymać go lub usunąć przypisany do niego wyzwalacz, jeśli go wcześniej skonfigurowałeś.
Ponadto, jeśli zdecydujesz się użyć Google Consent Mode, upewnij się, że ten skrypt GCM ładuje się przed kodem GTM. Oznacz skrypty Google Consent Mode oraz Google Tag Manager za pomocą atrybutu data-cookieconsent="ignore". Zapobiegnie to niezamierzonym blokadom tych skryptów przez funkcję automatycznego blokowania.
Kolejność skryptów na stronie powinna być następująca:
- Google Consent Mode
- Google Tag Manager
- Cookiebot CMP (z automatycznym blokowaniem)
Poniżej znajduje się przykładowa struktura kodu, jak może to wyglądać w sekcji <head> Twojej strony internetowej:
<!DOCTYPE html>
<html>
<head>
<title>Google Tag Manager & automatic cookie blocking</title>
<!-- Google Consent Mode -->
<script data-cookieconsent="ignore">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("consent", "default", {
ad_personalization: "denied",
ad_storage: "denied",
ad_user_data: "denied",
analytics_storage: "denied",
functionality_storage: "denied",
personalization_storage: "denied",
security_storage: "granted",
wait_for_update: 500
});
gtag("set", "ads_data_redaction", true);
gtag("set", "url_passthrough", true);
</script>
<!-- End Google Consent Mode-->
<!-- Google Tag Manager -->
<script data-cookieconsent="ignore">
(function(w,d,s,l,i){
w[l]=w[l]||[];
w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s), dl=l!='dataLayer'?'&l='+l:'';
j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');
</script>
<!-- End Google Tag Manager -->
<!-- Cookiebot CMP-->
<script
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
data-cbid="abcdef12-3456-7890-abcd-ef1234567890"
data-blockingmode="auto"
type="text/javascript"
data-consentmode-defaults="disabled"
></script>
<!-- End Cookiebot CMP -->
...
</head>
<body>
...
</body>
</html>Dzięki takiej konfiguracji możesz warunkowo uruchamiać tagi, korzystając z Google Consent mode lub za pomocą zdarzeń niestandardowych w ramach kontenera GTM. Jeśli twoja strona działa na WordPress to zobacz instrukcję wdrożenia Cookiebot dla WordPressa. Niezależnie od tego zwróć uwagę na krok 11, który powinieneś wdrożyć niezależnie od wybranego sposobu implementacji Cookiebota.
Tagi z wbudowanymi sprawdzaniami zgód (takie jak Google Ads, Analytics, Floodlight, Conversion Linker) automatycznie zmieniają swoje zachowanie w zależności od stanu zgody użytkownika. Jeśli tag nie obsługuje wbudowanych sprawdzeń zgód, możesz dodać dodatkowe sprawdzenia zgód dla tagu, zgodnie z instrukcją:
1. Utworzenie nowego wyzwalacza w GTM
W kontenerze GTM utwórz następujący wyzwalacz:
- Nazwa zdarzenia:
cookie_consent_update - Typ zdarzenia: Custom Event
- Warunki wyzwolenia: All Custom Events
2. Konfiguracja tagów bez wbudowanych sprawdzeń zgody
- Tagi, które nie obsługują wbudowanych sprawdzeń zgód i zapisują cookies, powinny określać rodzaje ciastek za pomocą ustawienia „Additional Consent” w edytorze tagów (
Tag Editor > Advanced Settings) z kategoriami, które tag wymaga (sprawdź raport skanowania Cookiebot, jeśli masz wątpliwości). - Zaktualizuj tagi ustawiające cookies, zastępując istniejący wyzwalacz (np. „All Pages”) nowym wyzwalaczem aktualizacji zgody.
3. Użycie grupy wyzwalaczy
Jeśli potrzebujesz wielu warunków, możesz użyć grupy wyzwalaczy, aby połączyć te warunki w jeden wyzwalacz.
4. Przegląd ustawień zgody
Aby uzyskać pełny obraz ustawień zgody we wszystkich tagach w twoim kontenerze, możesz włączyć przegląd zgód (Consent Overview) w ustawieniach kontenera.
Instrukcja Cookiebot z GTM i Ręcznym Trybem Blokowania
Zakładając, że masz już utworzone konto w GTM, kontener dla swojej strony internetowej i dodałeś do niej odpowiedni fragment kodu GTM, możesz wdrożyć Cookiebot, postępując zgodnie z poniższymi krokami:
1. Implementacja baneru zgody na ciasteczka w GTM
Dodaj szablon tagu Cookiebot CMP z Galerii Szablonów w GTM.
- Możesz to zrobić, klikając przycisk „Rozpocznij” w przeglądzie zgód (Consent Overview).
- Jeśli nie widzisz tego przycisku, możesz włączyć tę funkcję w zakładce „Admin”, w ustawieniach kontenera, zaznaczając pole „Enable consent overview”.
Następnie utwórz nowy tag Cookiebot CMP.
- W polu „Cookiebot ID” wpisz ID grupy domen z twojego konta na cookiebot.com.
- Włącz „Enable Google Consent Mode”.
- Wybierz „Consent initialization – All pages” jako wyzwalacz.
- Zapisz tag pod nazwą, na przykład „Cookiebot”.
2. Definiowanie domyślnego stanu zgody w Google Consent Mode
Domyślny stan zgód jest ustawiony jako „denied”, który będzie obowiązywał do momentu wyrażenia zgody przez użytkownika. Aby dostosować to zachowanie i dodać różne domyślne stany zgód dla użytkowników z różnych regionów geograficznych, kliknij „Add region” w sekcji „Default Consent State”. Korzystając z tej opcji i pozostawiając region pusty możemy modyfikować stany zgód dla wszystkich krajów.
3. Kontrola ciasteczek
Tagi takie jak Google Ads, Analytics, Floodlight i Conversion Linker mają wbudowane sprawdzenia zgód (Advanced Consent Mode). Tagi, które nie mają wbudowanych sprawdzeń zgód, muszą być skonfigurowane z dodatkowymi sprawdzeniami zgód (Basic Consent Mode).
4. Ustawienie dodatkowych sprawdzeń zgód
- Utwórz wyzwalacz Custom Event dla zdarzenia o nazwie
cookie_consent_update, który reaguje na wszystkie niestandardowe zdarzenia. - Dla wszystkich tagów, które nie mają wbudowanych sprawdzeń zgód i ustawiają ciasteczka, określ rodzaje ciasteczek za pomocą ustawienia „Additional Consent” w edytorze tagów (Tag Editor > Advanced Settings).
- Zaktualizuj tagi ustawiające ciasteczka, aby zastąpić istniejący wyzwalacz nowym wyzwalaczem aktualizacji zgody z kroku 1.
5. Implementacja deklaracji ciasteczek
- Aby umożliwić użytkownikom zmianę lub wycofanie zgody, zaimplementuj deklarację ciasteczek Cookiebot na wybranej podstronie, wstawiając poniższy skrypt (zastąp
00000000-0000-0000-0000-000000000000własnym ID Cookiebot):
<script id="CookieDeclaration" src="https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js" type="text/javascript"></script>- Upewnij się, że link do strony z deklaracją jest dostępny z każdej strony na Twojej witrynie, na przykład w stopce szablonu strony internetowej.
6. Oznaczanie elementów nie-GTM na Twojej stronie
Oznacz wszystkie elementy strony, które nie pochodzą z GTM i wymagają zgody przed załadowaniem, zgodnie z instrukcjami manualnego oznaczania w przewodniku Cookiebot.
Użycie atrybutu data-cookieconsent
Skrypty osadzone (inline scripts):
Oznaczanie składa się z dwóch części: blokady (disabler) i umożliwienia (enabler). Pierwsza zapobiega ładowaniu elementu (i ustawianiu cookies), druga pozwala skryptowi Cookiebot CMP na jego włączenie, jeśli odpowiednia zgoda została udzielona.
Aby oznaczyć skrypt osadzony:
- Ustaw atrybut
typena „text/plain”, co powoduje, że przeglądarka traktuje skrypt jako zwykły tekst. - Dodaj atrybut
data-cookieconsenti przypisz mu jedną z wartości: „preferences”, „statistics” lub „marketing”.
Elementy zewnętrzne (External elements):
Elementy zewnętrzne to zazwyczaj skrypty, iframes lub obrazy, które odwołują się do zewnętrznego zasobu za pomocą atrybutu src.
- Zmień atrybut
srcnadata-cookieblock-src, co dezaktywuje element, ponieważ atrybutsrctechnicznie znika. - Dodaj atrybut
data-cookieconsenti przypisz mu jedną z wartości: „preferences”, „statistics” lub „marketing”.
Uwaga: Wartość ignore atrybutu data-cookieconsent działa tylko w trybie automatycznym.
Zawartość zależna od zgody przy użyciu CSS
Skrypt Cookiebot definiuje klasy, które mogą być użyte do ukrywania (lub wyświetlania) zawartości w zależności od wyborów użytkownika dotyczących zgód.
- Aby ukryć elementy kategorii, na które użytkownik nie wyraził zgody, dodaj do atrybutu
classjedną z następujących klas CSS:.cookieconsent-optin-preferences,.cookieconsent-optin-statistics,.cookieconsent-optin-marketing. - Możesz również wyświetlać zawartość, jeśli zgoda nie została udzielona na określoną kategorię, używając klas:
.cookieconsent-optout-preferences,.cookieconsent-optout-statistics,.cookieconsent-optout-marketing.
Alternatywne zawartości
Podobnie jak w przypadku ukrywania zawartości, można również pokazać zawartość w przypadku braku zgody, np. „Aby wyświetlić tę zawartość, prosimy o zgodę na ciasteczka z kategorii Preferencji”. Dobrym przykładem może być osadzony na stronie film z Youtube.
<div class="cookieconsent-optout-marketing">
Please
<a href="javascript:Cookiebot.renew()">accept marketing-cookies</a>
to watch this video.
</div>Użycie JavaScript
Preferowanym sposobem wykonywania kodu przy jednoczesnym uwzględnieniu zgód użytkowników jest użycie kodu dołączonego do jednego z niestandardowych nasłuchiwaczy zdarzeń (z ang. listeners) lub wywołań zwrotnych Cookiebot. Zapewnia to, że kod zostanie wykonany, jeśli zgoda zmieni się podczas przeglądania strony, ponieważ zdarzenia i wywołania zwrotne są uruchamiane zarówno przy zmianie zgody, jak i przy (ponownym) ładowaniu strony.
Przykład użycia nasłuchiwacza zdarzeń CookiebotOnAccept:
window.addEventListener('CookiebotOnAccept', function (e) {
if (!Cookiebot.consent.statistics) return;
// Wykonaj kod ustawiający ciasteczko
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
}, false);Ja po prostu dodałem w pliku footer.php, odpowiedzialnym za zawartość stopki kod:
<script type="text/javascript">((d,i,m)=>{ct=t=>d.createTextNode(t);ce=e=>d.createElement(e);d.querySelectorAll(i).forEach(e=>{const a=ce('a'),div=ce('div'),p=ce('p'),s=e.dataset.cookieblockSrc,sp=/google\.com\/maps\/embed/.test(s)?'mapy Google Maps':/player\.vimeo\.com\/video\//.test(s)?'film Vimeo':/youtube\.com\/embed\//.test(s)?' film YouTube':undefined;if(!sp)return; div.innerHTML=`<div style="background-color:#CCC;display:inline-block;height:${e.height}px;position:relative;width:${e.width}px;">`+'<div style="background-color:#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%,50%);width:50%;"><p style="color:#FFF;font-size:7.5em;position:relative;top:50%;left:50%;margin:0;text-align:center;transform:translate(-50%,-50%);">⋯</p></div>';div.classList.add(`cookieconsent-optout-${m}`);a.textContent=`zaakceptować ciasteczka z kategorii ${m}`;a.href='javascript:Cookiebot.renew()';p.append(ct('Musisz '), a, ct(`, aby zobaczyć ${sp}.`));div.append(p);e.parentNode.insertBefore(div, e);})})(document, 'iframe[data-cookieblock-src]', 'marketing')</script>Serwerowe
Jeśli Twój serwer tworzy zawartość strony po stronie serwera (jak np. PHP) i zależna jest ona od wyrażenia zgody użytkowników przy jej generowaniu, możesz zbadać ciasteczko CookieConsent. Tutaj jednak odsyłam już do poradnika Cookiebot dla programistów.
Podsumowanie
Implementacja Consent Mode V2 z wykorzystaniem GTM i Cookiebot wymaga przemyślanej strategii i zrozumienia narzędzi, których używasz. Wybór między automatycznym trybem a ręcznym zarządzaniem powinien być podyktowany potrzebami twojej strony oraz stopniem zaawansowania w obsłudze GTM i wiedzy dotyczącej działania strony.
Masz wątpliwości lub chcesz oddać to w ręce eksperta? Umów płatną konsultację lub poproś o ofertę na wdrożenie Google Consent Mode V2.
