Procedura wrożenia CookieBota na stronę klienta

Procedura wrożenia CookieBota na stronę klienta

Założenia wstępne:

• Mamy dostęp do GTM na adres marketing@rekurencja.com z uprawnieniami “Publikacja”
• Mamy dostęp do strony WWW: FTP i/lub WordPress
• Mamy klienta w panelu Cookiebot i stworzył on poprawnie konto, dodając opcje płatności
• Dodatkowa konfiguracja / przeniesienie GA4

1. Panel Cookiebot

• Warto sobie to najpierw przygotować, żeby okienko na stronie od razu było “ładne”
• Wchodzimy w panel cookiebot, customers i klikamy “Manage” przyodpowiednim kliencie https://manage.cookiebot.com/en/customers
• Dodajemy domian name do domyślnej grupy i klikamy enter, następnie “Save” https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_14-23-13.png
• Teraz wchodzimy w Banner. W zależności od strony docelowej wybieramy odpowiedni “Position”, Pop up jest fajny, lub zostawiamy domyślny. Nie zważając na to, ustawiamy Buttons: “Allow all/selection” oraz wszystkie Pre-checked boxes. Proponuję również ustawić Theme na Custom oraz ustawić kolory i logo zgodne z kolorystyką klienta. https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_14-25-22.png
• Upewniamy się, że w “Content” jest ustawiony język polski https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_14-25-34.png
• Kopiujemy Domain Group ID (guid) z zakładki “Your scripts”, na potrzebę dalszych kroków

2. Konfiguracja GTM oraz tagów Cookiebot, GA4:

• Wchodzimy w konto klienta w GTM -> Administracja -> Ustawienia kontenerów -> zaznaczamy “Włącz przegląd ustawień uzyskiwania zgody (BETA)” - https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_09-55-03.png, a następnie klikamy “zapisz”.
• Wracamy do Obszaru roboczego -> Tagi - https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_09-54-08.png
• Klikamy “nowy” -> konfiguracja -> odkryj więcej -> za pomocą lupki wyszukujemy “Cookiebot CMP -> dodaj do obszaru roboczego -> dodaj -> ustawiamy ID na ten z Cookiebota https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_09-57-19.png, następnie reguły -> “Consent Initialization- All Pages” -> zapisz -> zapisz (zaakceptuj nazwę)
• Klikamy ‘nowy tag” -> konfiguracja” -> Tag Google -> identyfikator kod (G-0123456789) -> reguły -> “All Pages” -> zapisz (nazwę proponuję GA4 i kod, np.: https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_09-59-33.png)

3. Konfiguracja Consent Mode

• Klikamy w ikonę tarczy (https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_10-00-05.png). To miejsce w którym dla każdego tagu określasz jaką ma mieć zgodę - wbudowaną lub wbudowaną i dodatkową. Standardowo tagi Google mają już wbudowane ciasteczka na które trzeba się zgodzić, więc im się ustawia “Brak dodatkowej zgody”, ale jak robisz coś innego niż Google (customowy kod lub np. meta pixel) to musisz ręcznie wprowadzić dodatkową zgodę, ponieważ nie będzie wbudowanej.
• Zaznaczamy oba tagi i klikamy tarczę z gearem: https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_10-02-13.png -> “Brak wymogu uzyskania dodatkowej zgody” -> zapisz -> zapisz.
• Reasumujac chodzi o chodzi o to, że te tagi już z automatu wymagają tych ciasteczek (wbudowana zgoda), więc nie trzeba im nic dodatkowego ustawiać: https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_10-03-10.png

4. Finalizacja

• WAŻNE! NA KONIEC KONIECZNIE TRZEBA PRZESŁAĆ ZMIANY - https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_10-03-56.png
• Tutaj podobnie jak commit w Github opisujemy wersję i co się zmieniło, zachęcam żeby to robić w miarę starannie, a nie “Nowa wersja” czy “Zmiany” / “Praca”. Ważne żeby upublicznić też nową wersję: https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_10-05-23.png Na koniec klikamy “Opublikuj”
• Od teraz kontener jest upubliczniony, a jeśli na stronie poprawnie zaimplementowany jest GTM to zmiany będą od razu widoczne.

5. Testowanie

• Przy testowaniu polecam wyłączać adblocka, bo może blokować GTMa - https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_10-06-27.png
• Odpalamy stronę w prywatnej zakładce, otwieramy DevTools i w zakładce Network wyszukujemy “coll” (jest to zbieranie danych). Teraz odświeżamy i sprawdzamy co znalazło. Klikamy i sprawdzamy czy pole gcs jest równe G100 (brak zgody). Teraz akceptujemy zgody i sprawdzamy ponownie, powinno być już G111 (zgoda na wszystko). https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_14-31-34.png
• Można też sprawdzić w GTMie czy zmienia odpowiednio zgody https://screen.proudmedia.eu/v4rand_12e1asd/msedge_2024-07-08_14-32-14.png