Przejdź na stronę 68publishers. Znajdziesz tam darmowy szablon tagu do Google Tag Managera, bazujący na popularnym skrypcie Cookie Consent by Orest Bida.
Na stronie GitHub przewiń w dół do nagłówka “Integration into the GTM”.
Kliknij w link do pliku gtm_template.tpl
Na stronie pliku gtm_template.tpl kliknij przycisk “Download raw file” (znajduje się po prawej stronie nad kodem) i zapisz plik na swoim komputerze.
Przejdź do swojego konta Google Tag Manager
Wybierz kontener dla swojej strony.
W menu po lewej stronie przejdź do sekcji Szablony (Templates)
W sekcji „Szablony tagów” kliknij Nowy (New)
W prawym górnym rogu edytora szablonu kliknij ikonę trzech kropek (⋮) i wybierz Importuj (Import).
Po zaimportowaniu szablonu, zaznacz pole wyboru “Zgadzam się z Warunkami korzystania z usługi Community Template Gallery”.
Kliknij Zapisz (Save) w prawym górnym rogu.
W menu po lewej stronie przejdź do sekcji Tagi (Tags)
Kliknij Nowy (New), aby utworzyć nowy tag.
Kliknij w sekcję Konfiguracja tagu (Tag configuration)
W panelu Wybierz typ tagu znajdź i wybierz zaimportowany szablon Cookie Consent ’68 Publishers (powinien być widoczny w sekcji Niestandardowe)
Przejdź do konfiguracji ustawień tagu.
Polecam zaznaczyć „Make consent required”, „Hide from bots”. Resztę pozostawiamy bez zmian.
Najważniejsze opjce konfiguracyjne:
| Make consent required | Zaznaczenie tej opcji spowoduje, że strona zostanie częściowo zablokowana (np. przez nałożenie ciemniejszej warstwy) do momentu interakcji użytkownika z banerem (akceptacji/odrzucenia). |
| Show the widget as soon as possible | Zaznaczenie tej opcji sprawi, że baner pojawi się automatycznie po załadowaniu strony. Odznaczenie wymaga ręcznego uruchomienia widżetu (zaawansowane). |
| Init widget after DOMContentLoaded | Domyślnie widżet inicjuje się jak najszybciej. Zaznaczenie tej opcji opóźni inicjalizację do momentu załadowania struktury strony (zdarzenie DOMContentLoaded). |
| Hide from bots | Zaznacz, jeśli nie chcesz, aby baner był pokazywany botom, crawlerom itp. |
Dostosuj wygląd banera (Consent modal options)
W tej sekcji możesz skonfigurować wygląd głównego banera: Layout (układ), Position (pozycja), Transition (efekt przejścia), role przycisków (Primary button role, Secondary button role) i ich kolejność (Buttons order).
Settings modal options:
Tutaj możesz dostosować wygląd okna, które pojawi się, gdy użytkownik kliknie np. „Dostosuj Zgody”: Layout, Position, Transition.
Settings modal trigger selector
W sytuacji, gdy użytkownik odrzucił zgody możemu zapewnić mu możliwośc zmiany tej decyzji.
W oknie: „Settings modal trigger selector” dodajemy klasę css np:
.cookie-reopenTen selektor CSS (.cookie-reopen) będzie służył jako techniczny „hak”, na który zareaguje skrypt zarządzania zgodami.
Dodajemy do stopki (footer) np:
<div class="cookie-reopen"></div>Po odrzuceniu lub akceptacji zgód w naszje stopce pownina pokazać możliwośc zmiany
ustawieniń ciasteczek.
Możemy zmieńić wygląd i położenie „ustawień cookie” używając CSS:
.cookie-reopen {
position: fixed;
left: 0;
top: 85%;
transform: translateY(-50%);
writing-mode: vertical-rl;
background-color: #f0f4f7;
padding: 15px 10px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: 1000;
text-align: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
}
.cookie-reopen:has(a[href]) {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.cookie-reopen:has(a[href]) a {
color: black;
text-decoration: none;
display: block;
font-size: 12px;
white-space: nowrap;
}
Lub ikona ciastka
.cookie-reopen {
background-image: url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22%23D2B48C%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-cookie%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M13.53%202.552l2.667%201.104a1%201%200%200%201%20.414%201.53a3%203%200%200%200%203.492%204.604a1%201%200%200%201%201.296%20.557l.049%20.122a4%204%200%200%201%200%203.062l-.079%20.151c-.467%20.74%20-.785%201.314%20-.945%201.7c-.166%20.4%20-.373%201.097%20-.613%202.073l-.047%20.144a4%204%200%200%201%20-2.166%202.164l-.139%20.046c-1.006%20.253%20-1.705%20.461%20-2.076%20.615c-.412%20.17%20-.982%20.486%20-1.696%20.942l-.156%20.082a4%204%200%200%201%20-3.062%200l-.148%20-.077c-.759%20-.475%20-1.333%20-.793%20-1.704%20-.947c-.413%20-.171%20-1.109%20-.378%20-2.07%20-.612l-.146%20-.048a4%204%200%200%201%20-2.164%20-2.166l-.046%20-.138c-.254%20-1.009%20-.463%20-1.709%20-.615%20-2.078q%20-.256%20-.621%20-.942%20-1.695l-.082%20-.156a4%204%200%200%201%200%20-3.062l.084%20-.16c.447%20-.692%20.761%20-1.262%20.94%20-1.692c.147%20-.355%20.356%20-1.057%20.615%20-2.078l.045%20-.138a4%204%200%200%201%202.166%20-2.164l.141%20-.047c.988%20-.245%201.686%20-.453%202.074%20-.614c.395%20-.164%20.967%20-.48%201.7%20-.944l.152%20-.08a4%204%200%200%201%203.062%200m-1.531%2013.448a1%201%200%200%200%20-1%201v.01a1%201%200%200%200%202%200v-.01a1%201%200%200%200%20-1%20-1m4%20-3a1%201%200%200%200%20-1%201v.01a1%201%200%200%200%202%200v-.01a1%201%200%200%200%20-1%20-1m-8%20-1a1%201%200%200%200%20-1%201v.01a1%201%200%200%200%202%200v-.01a1%201%200%200%200%20-1%20-1m4%20-1a1%201%200%200%200%20-1%201v.01a1%201%200%200%200%202%200v-.01a1%201%200%200%200%20-1%20-1m-1%20-4c-.552%200%20-1%20.448%20-1%201.01a1%201%200%201%200%202%20-.01a1%201%200%200%200%20-1%20-1%22%20%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 50px;
height: 50px;
position: fixed;
left: 20px;
bottom: 50px;
z-index: 1000;
font-size: 14px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cookie-reopen:has(a[href]) {
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
visibility: visible;
}
.cookie-reopen:has(a[href]) a {
color: #0000;
}Cookies options
W tej sekcji konfigurujesz, jak szablon ma zarządzać ciasteczkiem przechowującym informacje o zgodach użytkownika.
Cookie expiration możemy zmienić na 365, resztę pozostawiamy bez zmian.
| Cookie name | Tutaj podajesz nazwę pliku cookie, w którym zapisywane będą preferencje zgody użytkownika (np. domyślna to często cc-settings lub podobna). |
| Cookie domain | Określa domenę, dla której ustawiane jest ciasteczko zgody. Jeśli zostawisz to pole puste, przeglądarka automatycznie ustawi je dla bieżącej domeny (window.location.hostname). Możesz tu wpisać domenę nadrzędną (np. .twojadomena.pl), jeśli chcesz, aby zgoda była współdzielona między subdomenami. |
| Cookie expiration | Tutaj ustawiasz, jak długo (w dniach) przeglądarka ma przechowywać ciasteczko ze zgodami użytkownika. Popularną wartością jest 182 lub 365 dni. |
| Enable cookies auto-clear | Jeśli zaznaczysz tę opcję, szablon będzie próbował automatycznie usuwać inne pliki cookie zapisane na stronie, w zależności od tego, na co użytkownik nie wyraził zgody i jaka strategia została wybrana poniżej. Używaj ostrożnie, wymaga dokładnego przetestowania. |
| Use RFC cookie | Wyłączone (domyślnie): Wartość ciasteczka przechowującego zgody jest zapisywana jako zwykły tekst w formacie JSON. Jest to zazwyczaj czytelniejsze dla człowieka podczas analizy. Włączone: Wartość ciasteczka przed zapisaniem zostanie zakodowana przy użyciu funkcji encodeURIComponent. Powoduje to zamianę niektórych znaków specjalnych (np. spacji, nawiasów) na ich bezpieczne odpowiedniki (np. %20, %7B). Dzięki temu wartość ciasteczka jest zgodna ze standardami RFC, co może zapobiegać potencjalnym problemom z niektórymi systemami lub przeglądarkami, które mogą niepoprawnie interpretować znaki specjalne w wartościach cookies. |
Konfiguracja typów zgód
Domyślne ustawienia będą ok dla większości.
Dla każdego typu zgody (pamięci), którego używasz na stronie musisz ustawić pole Visibility and default state (widoczność i stan domyślny). Dostępne opcje i zalecane ustawienia dla Consnet Mode V2:
| Visible & Readonly, Enabled by default | Widoczny i tylko do odczytu, Domyślnie włączony) – Użyj dla NIEZBĘDNYCH typów zgód, które muszą działać zawsze i użytkownik nie może ich wyłączyć (np. Functionality storage, często też Security storage). Będą widoczne w ustawieniach jako zawsze włączone. |
| Visible, Disabled by default | Widoczny, Domyślnie wyłączony – Użyj dla OPCJONALNYCH typów zgód, na które użytkownik musi wyrazić zgodę (np. Analytics storage, Personalization storage, Ad storage, Ad user data, Ad personalization). Będą widoczne w ustawieniach jako domyślnie wyłączone (suwak/przełącznik będzie w pozycji „off”). To jest kluczowe ustawienie dla zgodności z RODO i Consent Mode v2. |
| Hidden, Disabled always | Ukryty, Zawsze wyłączony – Użyj, jeśli dany typ pamięci nie jest w ogóle wykorzystywany na Twojej stronie i nie chcesz go pokazywać w ustawieniach. |
Add event trigger: tu możesz wpisać własną nazwę zdarzenia (np. zgoda_analityka_udzielona), które zostanie wywołane w GTM, gdy użytkownik udzieli zgody na ten konkretny typ pamięci. Pozostaw puste, jeśli nie potrzebujesz takich dedykowanych wyzwalaczy.
Locales: Dodaj kody języków, które ma obsługiwać baner, np. pl dla języka polskiego (każdy kod w nowej linii).
Uwaga: Ten szablon zawiera wbudowane tłumaczenia dla wielu języków, w tym polskiego.
Locale detection strategy: Wybierz sposób wykrywania języka użytkownika: Document (na podstawie języka strony ), Browser (na podstawie języka przeglądarki).
Do „Locales” dopisujemy pl, resztę pozostawiamy bez zmian.
Możesz dostosować wygląd swojego banera, używająć klass.
Include default stylesheets (Dołącz domyślne arkusze stylów):
Zaznaczone (domyślnie): Szablon załaduje wbudowane, standardowe style CSS, które nadają banerowi jego podstawowy wygląd. Zalecane jest pozostawienie tej opcji zaznaczonej, chyba że chcesz całkowicie od podstaw stworzyć własny wygląd banera za pomocą zewnętrznych lub wewnętrznych stylów.
External stylesheets (Zewnętrzne arkusze stylów):
W tym polu możesz wkleić adresy URL do zewnętrznych plików CSS (każdy adres w nowej linii). Jeśli chcesz użyć własnych, rozbudowanych stylów hostowanych na swoim serwerze lub w innym miejscu, podaj tutaj do nich linki. Style z tych plików zostaną załadowane po stylach domyślnych (jeśli są włączone) i mogą je nadpisywać.
Internal stylesheet (Wewnętrzny arkusz stylów):
Tutaj możesz bezpośrednio wpisać własne reguły CSS, aby dostosować wygląd banera. Te style zostaną dodane na stronie po stylach domyślnych i zewnętrznych, dając Ci największą kontrolę nad ostatecznym wyglądem (najwyższy priorytet w nadpisywaniu). Możesz tu dodać drobne poprawki lub bardziej zaawansowane modyfikacje wyglądu.
Ta sekcja zawiera zaawansowaną funkcję, która pozwala szablonowi banera zarządzać uruchamianiem innych skryptów JavaScript znajdujących się bezpośrednio w kodzie HTML Twojej strony, w zależności od zgody użytkownika.
Pozostawiamy wyłączone, chyba, że chcemy po odrzuceniu zgód przez użytwkownika blokować np. treści, video, zdjęcia itd.
Wyłączone (domyślnie): Szablon nie ingeruje w tagi <script> w kodzie HTML
Włączone: Aktywuje mechanizm zarządzania skryptami strony. Szablon będzie szukał tagów <script> oznaczonych specjalnym atrybutem (data-cookiecategory) i kontrolował icg wykonanie.
Script selector: Tutaj podajesz nazwę atrybutu danych (data-…), którego szablon będzie szukał w tagach <script> na Twojej stronie.
Ta sekcja opisuje, jak można zintegrować szablon banera 68publishers/cookie-consent z zewnętrzną, dedykowaną aplikacją do zarządzania zgodami (Consent Management Platform – CMP), taką jak 68publishers/consent-management-platform stworzona przez tych samych autorów.
Pozostawiamy domyśle ustawienia.
Jest to zaawansowana funkcja przeznaczona dla użytkowników, którzy korzystają z dedykowanej aplikacji 68publishers/consent-management-platform (lub podobnej, kompatybilnej) do centralnego zarządzania zgodami. W standardowym wdrożeniu, gdzie szablon GTM 68publishers/cookie-consent sam w sobie pełni rolę narzędzia zbierającego i zarządzającego zgodami na danej stronie, ta sekcja konfiguracji nie jest potrzebna.
kliknij w sekcję Wyzwalacze (Triggering).
Wybierz wyzwalacz Consent Initialization – All Pages (Inicjowanie zgody – Wszystkie strony). Jest to specjalny typ wyzwalacza, który uruchamia się najwcześniej, przed innymi tagami, co jest kluczowe dla poprawnego działania Consent Mode.
Kliknij Zapisz (Save) w prawym górnym rogu, aby zapisać cały tag. Nadaj mu nazwę, np. „CMP – Cookie Consent Config”.
W głównym widoku kontenera GTM kliknij ikonę koła zębatego Administracja (Admin) w górnym menu.
W kolumnie „Kontener” wybierz Ustawienia kontenera (Container Settings)
W sekcji „Ustawienia dodatkowe” upewnij się, że zaznaczona jest opcja Włącz przegląd zgody (Enable consent overview). Jeśli nie jest, zaznacz ją i zapisz zmiany.
Wróć do sekcji Tagi (Tags). Nad listą tagów powinna być widoczna ikona tarczy – kliknij ją, aby przejść do Przeglądu ustawień zgody (Consent Overview).
Tagi Google (np. Google Analytics 4, Google Ads Conversion Tracking, Conversion Linker): Te tagi mają wbudowane mechanizmy sprawdzania zgody. Zazwyczaj nie wymagają dodatkowej konfiguracji w tym miejscu. Zaznacz te tagi na liście w sekcji „Zgoda nieskonfigurowana”, kliknij ikonę tarczy nad listą i wybierz „Nie jest wymagana dodatkowa zgoda”.
Inne tagi (np. Meta Pixel, Hotjar, inne tagi niestandardowe): Te tagi nie mają wbudowanych mechanizmów Consent Mode. Musisz określić, jakich zgód wymagają. Zaznacz tag, kliknij ikonę tarczy i wybierz „Wymaga dodatkowej zgody do uruchomienia tagu”. Następnie kliknij „Dodaj wymaganą zgodę” i wybierz odpowiednie typy zgód (np. dla Meta Pixela zazwyczaj ad_storage, dla narzędzi analitycznych analytics_storage). Zapoznaj się z dokumentacją konkretnego narzędzia, aby określić wymagane zgody.
Kliknij przycisk Podgląd (Preview) w prawym górnym rogu GTM, aby uruchomić tryb debugowania na Twojej stronie.
Sprawdź baner: Czy baner pojawia się poprawnie po załadowaniu strony?
Sprawdź domyślny stan zgody: W oknie debugowania Tag Assistant przejdź do zakładki Consent. Przy pierwszym załadowaniu strony (np. zdarzenie „Initialization”), wszystkie stany zgody (ad_storage, analytics_storage itd.) powinny mieć wartość „Denied” (Odrzucono).
Domyślnie Twoje zgody powinny wyglądać tak, jak na załączonym obrazku poniżej.
Przetestuj akceptację: Kliknij na banerze przycisk akceptacji wszystkich zgód.
Sprawdź w zakładce Consent w Tag Assistant, czy odpowiednie stany zgody zmieniły się na „Granted”.
Sprawdź w zakładce Tags, czy tagi wymagające zgody (np. GA4, Google Ads, Meta Pixel) zostały uruchomione (Status „Succeeded”).
Powinieneś zobaczyć zdarzenie typu consent_update (lub podobne, zależnie od szablonu) na osi czasu po lewej stronie.
Przetestuj odrzucenie/akceptację częściową:
Otwórz stronę w nowym oknie incognito lub wyczyść pliki cookie dla strony, aby ponownie zobaczyć baner. Instrukcja czyszczenia ciasteczek:
Firefox: Wciśnij F12 -> zakładka Pamięć (Storage) -> Ciasteczka (Cookies) -> kliknij prawym przyciskiem na domenę i wybierz „Usuń wszystko”.
Chrome: Wciśnij F12 -> zakładka Application (Aplikacje) -> Storage (Pamięć) -> Cookies (Pliki cookie) -> kliknij prawym przyciskiem na domenę i wybierz „Clear”.
Uruchom ponownie tryb Podgląd (Preview):
Na banerze wybierz opcję odrzucenia zgód lub zaakceptuj tylko niezbędne (jeśli jest taka opcja).
Sprawdź w zakładce Consent, czy stany zgody pozostały „Denied” (lub zmieniły się zgodnie z wyborem).
W Chrome Web Store pobierz i zainsatuj wtyczkę Consent Mode Inspector by InfoTrust.
Przypnij wtyczkę do paska. Kliknij, jeżeli wszystko zostało wdrożone prawidłowo zobaczysz parametr GCS 100.
Po akceptacji zgód paramter GCS 111
Mamy nadzieję, że ten poradnik okazał się pomocny! W razie problemów lub pytań, śmiało piszcie komentarze poniżej – postaramy się pomóc.
A jeśli szukacie profesjonalnego wsparcia w zakresie e-commerce lub potrzebujecie pomocy przy bardziej złożonych wdrożeniach, zapraszamy do kontaktu z naszą agencją
e-commerce WIRAL.
Dodaj komentarz