Jak łatwo tagować zdarzenia w witrynie za pomocą GTM i GA4 dzięki AI

Mierzenie zdarzeń na stronie brzmi łatwo.

Ale potem otwierasz każdy ze swoich szablonów WordPress i zaczynasz myśleć o kliknięciach, przyciskach, modułach, transakcjach, formularzach, menu, CTA, kartach, banerach, sidebarach…

I odkładasz to na inny dzień.

Bo czym innym jest myśleć „chcę mierzyć, co dzieje się na mojej stronie”, a czymś zupełnie innym jest dobrze otagować prawdziwą stronę.

Stronę z różnymi szablonami.

Z modułami powtarzającymi się w różnych sekcjach.

Z kartami i zakładkami, które wyglądają tak samo, ale czymś się różnią.

Z przyciskami wizualnie identycznymi, ale pełniącymi zupełnie inne funkcje.

I tutaj, jak w wielu innych miejscach, AI może Ci całkiem mocno pomóc.

Nie dlatego, że zdecyduje za Ciebie o strategii pomiaru — to nadal Twoja sprawa, choć może też podrzucić propozycje — ale dlatego, że może wykonać prawie całą robotę: 

• Przejrzeć szablony.
• Wykryć podobne moduły i komponenty.
• Zaproponować strukturę wielokrotnego użytku.
• Zdefiniować nazewnictwo, jeśli nie masz pewności co do własnego.
• Przygotować kontener GTM.
• A nawet ruszyć kod Twojej strony, na przykład po to, by dodać atrybuty „data-”, które ułatwią pomiar. 

Właśnie zrobiłem to wszystko na swojej stronie, więc opowiem Ci proces na przykładzie mojego prawdziwego przypadku.

Przygotowałem pomiar kliknięć w modułach redakcyjnych mojej strony (artykuły wyróżnione, polecane, nowości itd. na każdej stronie), ale ten system działa dla dowolnego zdarzenia.

Skoro to jasne, mamy tutaj dwie drogi: ręczną i automatyczną z AI.

Zacznijmy od tej prostej, żeby było widać, że jest bardzo szybka, a potem, jeśli chcesz, zobaczysz, ile pracy oszczędzasz, zostawiając ją AI.

Droga 1: tutorial krok po kroku, jak trackować zdarzenia na swojej stronie szybko z AI

Zaczynamy od wersji szybkiej i krótkiej.

Krok 1: poproś AI, żeby pomogła Ci zaprojektować strukturę

Jeśli masz doświadczenie w analityce, to już to wiesz. Ale jeśli go nie masz albo nie znasz GA4, AI może być bardzo przydatna.

W tym celu musisz tylko przejść do swojego ulubionego narzędzia (ChatGPT, Claude albo Gemini) i zrobić dwie rzeczy w jednym promptcie:

1. Dodaj do niego pełne zrzuty ekranu (od góry do dołu) każdej sekcji strony (strona główna, kategorie, checkout itd.)
2. Wyjaśnij mu czego chcesz.

Czyli: 

<em>„Chcę mierzyć kliknięcia w główne moduły mojej strony. Zanim ruszymy kod, pomóż mi zdefiniować nazewnictwo zdarzeń i parametrów, tak aby dało się je wielokrotnie wykorzystywać w GTM i GA4.</em>
Nie chcę osobnego zdarzenia dla każdego modułu. Chcę jednego zdarzenia z parametrami.

Szablony, które mam, to:

- home

- kategoria

- podkategoria

- tag

- post

Zaproponuj:

1. nazwę zdarzenia

2. minimalne parametry

3. dozwolone wartości

4. realne przykłady dataLayer

5. wymiary, które powinienem utworzyć w GA4”

To zmusza AI do myślenia o strukturze zanim zacznie myśleć o kodzie.

I właśnie to jest dla Ciebie ważne, bo zaproponuje Ci plan, który zazwyczaj będzie miał sporo sensu. Bo jeśli zaczniesz tagować stronę bez nazewnictwa, skończysz z analityką Frankensteina.

Odbijaj temat z AI, aż struktura będzie dla Ciebie jasna i będziesz wiedzieć, dlaczego warto zrobić to właśnie tak.

Krok 2: przekaż jej swój kontener GTM

I pozwól jej zrobić prawie całą robotę:

1. Wyeksportuj kontener GTM projektu i wrzuć go AI.
2. Poproś ją, żeby wykonała odpowiednie zmiany na podstawie strategii zdefiniowanej w poprzednim punkcie.
3. Kiedy będzie gotowe, pobierasz wynik.
4. Importujesz go do GTM. AI powie Ci, czy musisz scalić go z tym, który jest już wgrany, czy go zastąpić.

Tutaj możliwe, że skończyliśmy, a możliwe, że nie, w zależności od tego, jak AI uzna albo jak jej powiedzieliśmy, że ma wykonać plan tagowania.

Krok 3 (opcjonalnie): przekaż AI kod swoich szablonów

Jeśli do tagowania trzeba dodać atrybuty data (wyjaśniam, na czym polegają w części o tagowaniu ręcznym) możesz przekazać AI realne szablony swojej strony. I tutaj naprawdę oszczędzasz czas.

W WordPress mogą to być pliki aktywnego motywu, takie jak:

• front-page.php
• category.php
• tag.php
• single.php
• functions.php

Albo te, których używa Twój motyw.

Wgraj je i daj konkretną instrukcję:

<em>„Przekazuję Ci aktualne szablony mojej strony.</em>
Chcę, żebyś dodał atrybuty data-* do linków głównych modułów, aby mierzyć zdarzenie editorial_module_click.

Nie zmieniaj projektu.

Nie zmieniaj klas CSS.

Nie zmieniaj logiki queries.

Nie zmieniaj tekstów.

Dodaj wyłącznie atrybuty analityczne.

Użyj tych parametrów:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Zwróć mi kompletne poprawione pliki i sprawdź błędy składni PHP.”

Uważaj na jedną rzecz: nie pozwól AI „ulepszać” Twojego szablonu.

AI ma tendencję do grzebania bardziej, niż trzeba, jeśli jej tego nie ograniczysz. Powiedz jasno, że ma dodać tylko atrybuty analityczne. Nic więcej.

Po pobraniu plików i wgraniu ich na stronę przechodzimy już do testowania wszystkiego przed publikacją zmian i utworzeniem potrzebnych wymiarów niestandardowych w GA4. 

Niżej wyjaśniam wszystko, ale najpierw chcę, żebyś zobaczył całą ręczną pracę, którą sobie oszczędziliśmy stosując ten proces.

Droga 2: tutorial krok po kroku, jak trackować ręcznie zdarzenia na swojej stronie

Przechodzimy do długiej drogi, żebyś zrozumiał, co AI naprawdę zrobiła.

Krok 1: zdecyduj, jakie zdarzenie chcesz utworzyć

Po pierwsze: nie twórz dwudziestu zdarzeń, jeśli możesz stworzyć jedno dobrze przemyślane i wielokrotnego użytku.

W moim przypadku chciałem mierzyć kliknięcia w modułach redakcyjnych strony, więc utworzyłem jedno zdarzenie:

editorial_module_click

Ale ten sam proces działa dla innych zdarzeń:

• cta_click
• resource_download
• pricing_click
• affiliate_click
• lead_magnet_click
• video_module_click
• product_card_click
• internal_navigation_click

Klucz polega na tym, żeby pomyśleć, czy zdarzenie może być wielokrotnego użytku teraz albo w przyszłości. Na przykład, jeśli chcesz mierzyć CTA, nie twórz tego:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Lepiej utwórz cta_click i rozróżniaj każde kliknięcie za pomocą parametrów. Jest czyściej i skalowalnie.

Krok 2: zdefiniuj minimalne parametry

Nigdy nie trzeba mierzyć wszystkiego, tylko to, co ważne. To, co naprawdę wykorzystasz i co pozwoli Ci podejmować decyzje.

W moim przypadku, dla kliknięć w modułach redakcyjnych, użyłem tych parametrów:

• page_type
• module_type
• module_area
• link_url
• link_text

W tłumaczeniu:

Parametr	Co wskazuje
page_type	Typ strony, na której dochodzi do kliknięcia (home, kategoria, podkategoria, tag albo artykuł). Każda ma inną strukturę.
module_type	Typ klikniętego modułu: nowości, sekcja polecanych, sekcja ostatnich artykułów… Każdy szablon ma całkiem sporo sekcji.
module_area	Treść, sidebar, footer…
link_url	URL linku. Dodałem go, bo miałem już utworzoną zmienną; gdyby nie to, nie zrobiłbym tego, bo wiem, że będę do niej zaglądał rzadko.
link_text	A do tej jeszcze rzadziej

Przykład:

• page_type  = category
• module_type  = latest
• module_area  = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = Jak pobierać długie playlisty z YouTube...

Dzięki temu mogę już porównywać:

• Które strony i typy stron generują więcej kliknięć.
• Które obszary strony generują więcej kliknięć.
• Które moduły generują więcej kliknięć.

Aż nadto, żeby zacząć.

Krok 3: utwórz zamknięte nazewnictwo

To ważne: nie pozwól, żeby każde zdarzenie miało nazwę wymyślaną na bieżąco. Zdefiniuj zamknięte wartości.

Na przykład dla page_type mogą to być:

• home
• category
• subcategory
• tag
• post
• page
• landing
• product
• checkout

Używaj tylko tych, których potrzebujesz. W moim przypadku:

• home
• category
• subcategory
• tag
• post

Dla module_area:

• main
• sidebar
• bottom
• footer
• post_footer

A dla module_type, zdefiniuj listę zgodnie ze swoją stroną.

W moim przypadku ta lista była dość długa, bo mam sporo różnych modułów. Niektóre z nich to:

• home_hero
• home_hero_side
• featured
• latest
• sidebar_popular
• sidebar_more
• bottom_cta_newsletter
• home_section_tecnologia
• home_section_ocio
• home_section_negocio

Jeśli Twoja strona jest usługowa, możesz mieć:

• hero_cta
• services_grid
• case_studies
• testimonials
• pricing_table
• contact_cta
• lead_magnet

Albo, jeśli to ecommerce:

• product_card
• category_grid
• promo_banner
• recommended_products
• cart_cta
• checkout_step
• wishlist_button

Logika jest taka sama, zmienia się tylko kontekst, ale metoda pozostaje ta sama.

Krok 4 (opcjonalnie): użyj atrybutów data w HTML

W moim przypadku to była ważna część systemu.

Mógłbym próbować sprawić, żeby GTM odczytywał kliknięty moduł po jakiejś dziwnej klasie CSS albo po tekście przycisku, ale w średnich projektach to kruche: dziś działa, a za 3 miesiące zmieniasz design i pomiar się rozsypuje.

Rozwiązanie, które wybrałem, to dodanie atrybutów data bezpośrednio do linków albo przycisków, które chcesz mierzyć.

Przykład:

<a
href="https://tudominio.com/articulo/"

  data-analytics-event="editorial_module_click"

  data-page-type="home"

  data-module-type="home_hero"

  data-module-area="main"

>

  Título del artículo

</a>

Dzięki temu sam link niesie już informację, którą chcesz wysłać. GTM nie musi niczego zgadywać, tylko czyta atrybuty.

To działa dla prawie każdego zdarzenia:

<em><a</em>
href="/contacto/"

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Poproś o wycenę

</a>

Albo dla ecommerce:

<em><a</em>
href="/producto/zapatilla-x/"

  data-analytics-event="product_card_click"

  data-page-type="category"

  data-module-type="product_grid"

  data-module-area="main"

>

  But X

</a>

Tak, dodajesz więcej kodu, ale to rozwiązanie proste, zrozumiałe i skalowalne.

Krok 5: utwórz listener w GTM

Teraz potrzebujesz, żeby Google Tag Manager nasłuchiwał kliknięć w linki z Twoim atrybutem.

Utwórz tag niestandardowego HTML.

Na przykład:

<em><script></em>
(function() {

  document.addEventListener('click', function(event) {

    var link = event.target.closest('a[data-analytics-event]');

    if (!link) {

      return;

    }

    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({

      event: link.getAttribute('data-analytics-event') || '',

      page_type: link.getAttribute('data-page-type') || '',

      module_type: link.getAttribute('data-module-type') || '',

      module_area: link.getAttribute('data-module-area') || '',

      link_url: link.href || '',

      link_text: (link.innerText || link.textContent || '').trim()

    });

  });

})();

</script>

Ten listener robi coś bardzo prostego:

1. Wykrywa kliknięcia.
2. Sprawdza, czy link ma data-analytics-event.
3. Czyta atrybuty.
4. Wykonuje dataLayer.push().
5. GTM używa tego zdarzenia, żeby wysłać dane do GA4.

Nie ma w tym większej tajemnicy, trzeba tylko dobrze to napisać. I do tego również możesz użyć AI.

Krok 6: utwórz zmienne w GTM

W GTM utwórz zmienne warstwy danych do odczytywania parametrów.

Na przykład:

Zmienna GTM	Zmienna warstwy danych
DL – page_type	page_type
DL – module_type	module_type
DL – module_area	module_area
DL – link_url	link_url
DL – link_text	link_text

Wszystkie są typu Zmienna warstwy danych.

Nie improwizuj nazw. Jeśli w listenerze wysyłasz module_type, w GTM zmienna musi czytać module_type. Nie module-type. Nie moduleType. Nie tipo_modulo.

Lepiej tak samo. Dokładnie tak samo.

Krok 7: utwórz wyzwalacz

Utwórz wyzwalacz zdarzenia niestandardowego.

Jeśli Twoje zdarzenie nazywa się:

editorial_module_click

Wyzwalacz musi nasłuchiwać:

editorial_module_click

Jeśli Twoje zdarzenie nazywa się:

cta_click

Wyzwalacz musi nasłuchiwać:

cta_click

Brzmi oczywiście, ale wiele błędów w GTM to po prostu nazwy, które się nie zgadzają.

W moim przypadku wyzwalaczem był:

• CE – Editorial Module Click
• Typ: Zdarzenie niestandardowe
• Nazwa zdarzenia: editorial_module_click

Krok 8: utwórz tag GA4

Utwórz tag zdarzenia GA4.

Nazwa zdarzenia:

editorial_module_click

Albo zdarzenie, które wybrałeś.

Dodaj parametry:

Parametr GA4	Wartość GTM
page_type	{{DL – page_type}}
module_type	{{DL – module_type}}
module_area	{{DL – module_area}}
link_url	{{DL – link_url}}
link_text	{{DL – link_text}}

I użyj jako wyzwalacza zdarzenia niestandardowego, które właśnie utworzyłeś.

Dzięki temu za każdym razem, gdy ktoś kliknie otagowany link, GTM wyśle zdarzenie do GA4.

Testy i kolejne kroki

Nieważne, którą drogę wybrałeś — tutaj obie się spotykają. Po wdrożeniu wszystkiego musisz po prostu upewnić się, że wszystko działa tak, jak powinno.

Poza tym trzeba będzie ruszyć jeszcze jedną drobną rzecz w GA4.

Krok 1: testuj przed publikacją

Nie publikuj w ciemno:

1. Otwórz podgląd GTM.
2. Kliknij kilka modułów na stronie.
3. Sprawdź, czy pojawia się zdarzenie editorial_module_click (albo zdarzenie, które utworzyłeś).
4. Następnie wejdź w tag GA4 i sprawdź, czy parametry mają wartość (page_type, module_type…)

Jeśli widzisz puste wartości, sprawdź:

• Czy HTML ma atrybuty data.
• Czy listener się ładuje.
• Czy atrybut zdarzenia ma poprawną nazwę.
• Czy zmienne GTM czytają tę samą nazwę, którą wysyła dataLayer.
• Czy wyzwalacz nasłuchuje właściwego zdarzenia.

Nie idź dalej, dopóki to nie działa. Tutaj podgląd GTM jest Twoim przyjacielem. Użyj go.

Krok 2: sprawdź DebugView

Po publikacji sprawdź DebugView w GA4.

Powinieneś zobaczyć wchodzące zdarzenie, ale uwaga: DebugView czasem ma opóźnienie, nie odświeża się dobrze albo pokazuje inną sesję.

Dlatego jeśli w rozszerzeniu Tag Assistant widzisz poprawnie wysłany hit, zdarzenie wychodzi.

DebugView jest przydatne, ale nie wariuj, jeśli chwilę potrwa albo jeśli nic się nie pojawi.

W moim przypadku w Tag Assistant widziałem zdarzenie wysłane jako hit do GA4, choć DebugView nie pokazywał go na osi czasu.

To może się zdarzyć.

Krok 3: utwórz wymiary niestandardowe w GA4

Na koniec w GA4 przejdź do:

Administracja > Wyświetlanie danych > Definicje niestandardowe

I utwórz tylko te wymiary, których naprawdę będziesz używać. Czyli parametry zdarzeń, które zamierzasz analizować.

W moim przypadku:

Nazwa	Zakres	Parametr
page_type	Zdarzenie	page_type
module_type	Zdarzenie	module_type
module_area	Zdarzenie	module_area

Miałem już zarejestrowane link_url i link_text jako wymiary niestandardowe z wcześniejszych tagowań.

Krok 4: (opcjonalnie) udokumentuj nazewnictwo

Jeśli projekt jest duży, koniecznie trzeba utworzyć tabelę tagowania zdarzeń podobną do tej:

Zdarzenie	Parametr	Możliwe wartości	Do czego służy
editorial_module_click	page_type	home, category, subcategory, tag	Typ szablonu
editorial_module_click	module_type	featured, latest, sidebar_popular	Typ modułu
editorial_module_click	module_area	main, sidebar, bottom	Obszar wizualny

Dzięki temu, gdy za dwa miesiące będziesz musiał dodać kolejny moduł, nie wymyślasz niczego od nowa — po prostu trzymasz się systemu, bez ponownego myślenia i przeprojektowywania.

I tyle, skończyliśmy.

Jeśli poszedłeś drogą ręczną, gratulacje. Trochę Cię to kosztowało.

Jeśli poszedłeś drogą z AI, prawdopodobnie zastanawiasz się, czy naprawdę skończyłeś. I tak, odpowiedź brzmi: tak. Trochę zaskakujące, prawda?

Typowe błędy

Dobra, zbierzmy wszystkie wspomniane tutaj błędy, które każdy z nas kiedyś przerabiał.

Tworzenie zbyt wielu zdarzeń

Źle:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Lepiej cta_click   z parametrami.

Poleganie na klasach CSS

Źle:

Jeśli użytkownik kliknie .boton-verde-grande…

Jutro zmieniasz design i pomiar idzie do kosza.

Lepiej dodać atrybuty data: data-analytics-event="cta_click"

Brak testów w GTM

Publikowanie bez testów to gra w ruletkę. Zawsze używaj Podglądu.

Rejestrowanie zbyt wielu wymiarów w GA4

Nie zamieniaj każdego parametru w wymiar niestandardowy.

Zacznij wyłącznie od tych, których będziesz używać do analizy. Reszta może poczekać, a jeśli zobaczysz, że naprawdę jej potrzebujesz, dodasz ją później.

Zmiana nazw w połowie procesu

Jeśli używasz module_type używaj go zawsze tak samo.

Nie zmieniaj na:

• module-type
• moduleType
• tipo_modulo

Ani w połowie procesu, ani w przyszłości. To wygląda jak drobiazg, ale utrudni Ci analitykę, gdy będziesz porównywać okresy z oboma zdarzeniami..

Szybkie podsumowanie i wnioski

Przejdźmy jeszcze raz przez ogólny proces ręczny, czyli ten:

1. Zdefiniuj, co chcesz wiedzieć.
2. Utwórz zdarzenie wielokrotnego użytku.
3. Zdefiniuj niewiele parametrów.
4. Dodaj atrybuty data-* do ważnych linków.
5. Użyj AI do przeglądu i modyfikacji szablonów.
6. Utwórz listener w GTM.
7. Utwórz zmienne warstwy danych.
8. Utwórz wyzwalacz zdarzenia niestandardowego.
9. Utwórz tag GA4.
10. Testuj w Tag Assistant.
11. Opublikuj.
12. Zarejestruj w GA4 tylko potrzebne wymiary.

I jak widziałeś, da się to bardzo łatwo skrócić, jeśli poprosisz o pomoc swojego przyjaciela ChatGPT.

To, co ręcznie zajęłoby godziny, mnie zajęło nieco ponad 30 minut żeby mieć to działające.  

Kiedy to testujesz, wygląda jak magia. Serio.

Na koniec zostawiam Ci jeszcze dwie rekomendacje:

Mierzenie zdarzeń nie polega na posiadaniu wielu albo wszystkich danych, tylko na zdobywaniu informacji do podejmowania decyzji. A do tego potrzebujesz tylko kilku.

AI nie zastępuje Twojego kryterium pomiaru — tego, które mówi Ci, jakie dane mierzyć — ale oszczędza absurdalnie dużo mechanicznej pracy i przede wszystkim pomaga utrzymać spójność. 

A to w dużych projektach jest czystym złotem. Nie marnuj tego.