Tag Assistant nie widzi Tag Managera: baner cookies czy błąd w kodzie?
czytaj więcej
Puszczasz test PageSpeed na telefonie, a wśród skryptów, które najdłużej zajmują procesor, widzisz googletagmanager.com. Pierwszy pomysł: opóźnione ładowanie Tag Managera, czyli start kontenera dopiero wtedy, gdy strona już się wyświetli. To działa. Tyle że razem z Tag Managerem łatwo „opóźnić” coś, czego ruszać nie wolno… zgody.
Przerabialiśmy to przy przyspieszaniu sklepu internetowego. Pokażę, co w tym sklepie wystartowało od razu, co poszło później, ile kosztowało to w danych i jak sprawdzić kolejność w przeglądarce.
Spis treści
Dlaczego Google Tag Manager obniża wynik PageSpeed na telefonie?
Bo wszystko, co jest w kontenerze (Google Analytics 4, piksele reklamowe, czat), to skrypty, które telefon musi pobrać i wykonać. Lighthouse, czyli silnik PageSpeed, liczy to w mierze Całkowity czas blokowania (TBT): każde zadanie dłuższe niż 50 ms blokuje stronę na kliknięcia, a nadwyżka ponad 50 ms trafia do sumy. TBT waży 30% wyniku, najwięcej ze wszystkich miar (opis TBT w dokumentacji Lighthouse, wagi w ocenie skuteczności).
W sklepie, który przyspieszaliśmy, sam kontener zajmował na telefonie ok. 300 ms pracy procesora. Według naszej oceny bez przesunięcia go wynik na telefonie nie przekroczyłby ok. 80-85 punktów, nawet po wszystkich pozostałych poprawkach. Przenieśliśmy więc start Tag Managera na 1,5 s po zdarzeniu load, czyli po tym, jak przeglądarka skończy wczytywać stronę. Na podstronie kategorii wynik wzrósł potem z 68 do 75, a TBT spadł z 293 do 169 ms.
Opóźnienie nie usuwa pracy procesora, tylko przesuwa ją na moment, gdy strona jest już widoczna.
Co musi wystartować od razu, żeby Consent Mode w Tag Managerze działał?
Consent Mode to tryb zgody Google, który przekazuje tagom Google decyzję odwiedzającego z banera. Czym jest i co daje, opisaliśmy we wpisie Consent Mode v2 - czym jest i dlaczego bez niego tracisz dane w Google Ads i Analytics. Tu liczy się kolejność, bo przy opóźnionym kontenerze dwie rzeczy nadal muszą ruszyć od razu.
- data_object
dataLayer z domyślną zgodą
Warstwa danych (dataLayer) to kolejka, z której Tag Manager czyta informacje. Domyślny stan zgody, najczęściej „odmowa”, ma w niej być, zanim ruszy jakikolwiek tag.
- cookie
Okienko zgód poza kontenerem
Baner jest w kodzie strony od pierwszej chwili. Gdy ktoś kliknie „Akceptuję”, aktualizacja zgody trafia do tej samej kolejki, nawet jeśli Tag Managera jeszcze nie ma.
Dlaczego tak? Google pisze wprost, że domyślną zgodę ustawia się na każdej stronie przed poleceniami, które wysyłają dane pomiarowe, i że „kolejność kodu jest tutaj kluczowa” (przewodnik Google po wdrażaniu trybu zgody). W jego przykładzie kod domyślnej zgody stoi nad kodem Tag Managera.
Nie wkładaj kodu domyślnej zgody do tego samego opóźnionego bloku co Tag Managera. Przewodnik Google po debugowaniu mówi: „Nie ustawiaj domyślnych stanów zgody użytkownika asynchronicznie”, czyli w kodzie doczytywanym później niż reszta strony (debugowanie trybu zgody). Gdyby ktoś kliknął baner przed startem opóźnionego bloku, aktualizacja trafiłaby do kolejki przed wartością domyślną, a przy złej kolejności, jak pisze Google, domyślne ustawienia zgody nie działają.
Z banerem jest podobnie. Jeśli Twoje okienko zgód to szablon uruchamiany w Tag Managerze regułą Inicjacja zgody, to ta reguła odpala się przed innymi tagami, ale dopiero wtedy, gdy kontener już działa (pomoc Tag Managera o regule Inicjacja zgody). Opóźnisz kontener o 1,5 s po load, to i baner pokaże się tak samo późno. W tym sklepie okienko przychodziło z serwera razem z kodem strony, więc nie czekało na nic.
Co rusza później i co się dzieje z kliknięciem w baner?
Później rusza cała zawartość kontenera: GA4, tagi Google Ads i inne piksele, jeśli tam są, a w opisanym sklepie także czat na stronie. Wyglądało to tak: strona była wczytana po 0,6 s, a Tag Manager ruszał po 2,1 s.
A co z kimś, kto kliknął „Akceptuję” w pierwszej sekundzie? Nic złego. Według dokumentacji warstwy danych wczytany kontener przetwarza wszystkie wiadomości z kolejki w kolejności, w jakiej przyszły. Tag Manager najpierw odczyta domyślną zgodę, potem jej aktualizację z banera, a dopiero potem uruchomi tagi. Warunek: opóźniasz cały fragment kodu Tag Managera, razem z wiadomością event:'gtm.js', którą ten fragment dopisuje do kolejki.
Z tej samej dokumentacji wynika jeszcze jedna pułapka: warstwę danych tworzy się raz, wysoko w nagłówku kodu strony (sekcja head), kodem, który nie nadpisuje istniejącej kolejki. Kod, który zakłada dataLayer od zera (pustą listą) już po kliknięciu w baner, wymaże zapisane wcześniej zgody.
Opóźnienie nie zmienia też prawa. Zapisanie albo odczytanie informacji z urządzenia odwiedzającego, na przykład pliku cookie do analityki, wymaga zgody według art. 399 Prawa komunikacji elektronicznej, niezależnie od tego, kiedy startuje Tag Manager.
Ile danych tracisz w GA4 przez opóźniony Tag Manager?
To jest prawdziwy koszt tej zmiany. Wizyty krótsze niż ok. 2-3 s nie trafią do GA4 ani do Google Ads, bo odwiedzający zamknął kartę, zanim kontener w ogóle wystartował. Nie ma tagu, nie ma odsłony.
Zgody zebrane w tym czasie nie przepadają. W tym sklepie okienko działało niezależnie od Tag Managera, więc decyzja zapisywała się w chwili kliknięcia. Po co ten zapis, wyjaśniamy we wpisie Logi zgód cookie - Twój dowód na wypadek kontroli UODO.
Czy warto? To zależy od tego, ile masz wizyt kilkusekundowych i czy ich brak coś Ci psuje w raportach. Dlatego to decyzja właściciela strony, a nie programisty. W tym sklepie przyjęliśmy 1,5 s po load. To nie reguła Google, a każda dodatkowa sekunda opóźnienia to więcej krótkich wizyt poza statystykami.
Jak sprawdzić kolejność zgody, load i Tag Managera w przeglądarce?
Wystarczą narzędzia deweloperskie Chrome (klawisz F12) i rozszerzenie Tag Assistant.
- Zakładka Sieć. Odśwież stronę i wpisz w filtr gtm.js. Narzędzia pokazują czas zdarzenia load czerwoną linią (opis panelu Sieć). Plik gtm.js ma się zacząć pobierać wyraźnie za nią, w opisanym sklepie ok. 1,5 s później.
- Konsola. Wpisz dataLayer i naciśnij Enter. Element z consent i default (domyślna zgoda) ma być na liście przed elementem z gtm.js.
- Kliknięcie przed startem kontenera. Odśwież stronę i kliknij „Akceptuję” w pierwszej sekundzie. W dataLayer aktualizacja zgody (consent i update) ma stać przed gtm.js.
- Tag Assistant. W podglądzie Tag Managera najwcześniejsze zdarzenie typu Zgoda ma pokazać stan domyślny, a najnowsze aktualizację z banera. Dokładne kroki są w przewodniku Google po debugowaniu zgody, który podlinkowałam wyżej.
Jak przejść podgląd Tag Managera krok po kroku i co zobaczyć w raporcie Czas rzeczywisty, pokazaliśmy we wpisie Wdrożenie GA4 przez Tag Manager: pusty raport kontaktów, co sprawdzić.
Najczęstsze pytania o opóźnione ładowanie Tag Managera
Czy opóźniony Tag Manager odczyta zgodę klikniętą przed jego startem?+
Tak, jeśli baner zapisał ją do dataLayer, a cały fragment kodu Tag Managera startuje dopiero po opóźnieniu. Wczytany kontener przetwarza całą kolejkę po kolei, więc najpierw widzi domyślną zgodę, potem jej aktualizację, a dopiero potem uruchamia tagi.
Czy dataLayer musi stać przed kodem Google Tag Managera?+
Tak. Google zaleca tworzyć warstwę danych raz na stronę, wysoko w sekcji head, nad kodem kontenera, i nigdy jej nie nadpisywać, bo nadpisanie kasuje wszystko, co już w niej było.
Gdzie ustawić consent mode default przy opóźnionym kontenerze?+
W kodzie strony nad kodem Tag Managera, poza opóźnionym blokiem. Domyślna zgoda ma być ustawiona, zanim jakikolwiek tag zacznie z niej korzystać, i nie może się wczytywać później niż reszta strony.
O ile opóźnić Tag Managera?+
W opisanym sklepie uruchamialiśmy go 1,5 s po zdarzeniu load, przez co z GA4 i Google Ads wypadały wizyty krótsze niż ok. 2-3 s. Dłuższe opóźnienie zabierze z raportów więcej krótkich wizyt, więc nie dokładaj sekund „na zapas”.
Zgody od razu, Tag Manager później
Opóźniaj kontener, ale nie zgody. Domyślna zgoda w dataLayer i okienko zgód mają ruszyć od pierwszej chwili wczytywania strony, a Tag Manager może na nie poczekać. Kiedy już przesuniesz kontener, zrób test w konsoli i w Tag Assistant, bo na samej stronie kolejności nie zobaczysz.
Jeśli chcesz, żebyśmy sprawdzili baner, Consent Mode i Tag Managera na Twojej stronie, zajrzyj do opisu naszego rozwiązania System zarządzania zgodami i napisz do nas.
