Czym jest Google Tag Manager: nauka podstaw i konfiguracja od zera

• Czym jest Google Tag Manager
• Kto i po co potrzebuje Google Tag Manager
• Jak założyć konto w Google Tag Manager
• Jak zainstalować Google Tag Manager na WordPressie
  • Jak dodać kod bez wtyczek
  • Jak wstawić kod z wtyczką WPCode
• Jak połączyć Google Analytics 4 z GTM
• Po co potrzebny jest tryb podglądu
• Jak śledzić kliknięcia w linki na stronie
• Jak skonfigurować zdarzenia e-commerce w WooCommerce
• Co otrzymujesz po skonfigurowaniu Google Tag Manager

Początkujący często znacznie upraszczają możliwości Google Tag Manager, sprowadzając je do banalnego wstawienia kodu GA4, lub odwrotnie — gubią się w dużej funkcjonalności i porzucają konfigurację w połowie drogi. GTM tymczasem pozwala zarządzać nie tylko analityką, ale także pikselami reklamowymi, konwersjami, zdarzeniami niestandardowymi i śledzeniem e-commerce — wszystko z jednego panelu. Przetestowałem narzędzie w moim własnym piaskownicy, aby szczegółowo pokazać wam, czym jest Google Tag Manager, jak go zainstalować i podłączyć do strony oraz skonfigurować śledzenie zdarzeń dla sklepu internetowego.

Czym jest Google Tag Manager

Google Tag Manager (GTM) — to bezpłatne narzędzie Google do instalacji i zarządzania kodami śledzenia na stronie bez ciągłej ręcznej edycji plików zasobów internetowych. GTM nie analizuje danych sam, a jedynie dostarcza potrzebny kod na strony projektu i określa, w jakich warunkach jaki kod uruchomić.

Google Tag Manager składa się z trzech komponentów:

• tag (Tag) — kod, który wykonuje działanie, na przykład, wysyła dane do GA4;
• wyzwalacz (Trigger, w polskim interfejsie „aktywator”) — warunek, w którym tag ma zadziałać: kliknięcie, wyświetlenie strony, wysłanie formularza;
• zmienna (Variable) — wartość, która jest podstawiana w tag lub wyzwalacz: URL strony, tekst linku, cena produktu;
• kontener (Container) — „pudełko”, które łączy wszystkie tagi, wyzwalacze i zmienne dla strony, i to jego kod wstawiasz raz na zasób internetowy.

Pomimo ogromnych możliwości, GTM nie jest w stanie analizować danych, udostępniać dostępu do gotowych raportów ani tworzyć własnych. To główna różnica między Google Tag Manager a Google Analytics 4: pierwszy jedynie dostarcza kod na stronę i decyduje, kiedy go uruchomić, a drugi — analizuje uzyskane dane i tworzy raporty.

Kto i po co potrzebuje Google Tag Manager

To narzędzie jest niezwykle przydatne dla każdego biznesu, projektu online i specjalisty, który chce śledzić dane o docelowej grupie odbiorców, przyciągać klientów i liczyć zyski. Marketerom i analitykom pomaga uprościć uruchamianie kampanii reklamowych i śledzenie ich efektywności, właścicielom biznesów i stron — zaoszczędzić pieniądze na usługach programistów, a deweloperom — zaoszczędzić czas, który zazwyczaj idzie na rutynowe dodawanie drobnego kodu.

Jeśli mówimy o projektach online, Google Tag Manager jest potrzebny:

• sklepom internetowym — śledzenie zakupów, analiza zachowań nowych i stałych klientów, uproszczone przesyłanie danych do sieci reklamowych w celu uruchomienia reklamy i dynamicznego retargetingu;
• stronom korporacyjnym — dodawanie analityki, pikseli do reklam w mediach społecznościowych, konwersji Google Ads, widgetu czatu bez ciągłego ingerowania w kod;
• usługom SaaS — śledzenie rejestracji w produkcie, przechodzenia okresu próbnego, zakupu płatnej subskrypcji i przesyłanie tych danych do paneli reklamowych;
• stronom informacyjnym — śledzenie różnej głębokości przewijania, interakcji z treściami multimedialnymi, przejścia przez linki partnerskie;
• stronom jednostronicowym — analiza niewielkich konwersji, na przykład, kliknięcia przycisku „Poznaj cenę” lub wyświetlenie bloku „Usługi”, plus podłączenie zewnętrznych usług do testowania różnych projektów i nagłówków.

Jednak właściciel małego bloga, który nie chce nic dodatkowo podłączać, wystarczy Google Analytics 4 z ustawieniami domyślnymi. Tym bardziej, że analitykę można podłączyć przez wbudowane integracje motywów, takie jak Blocksy: wystarczy przejść do Customizer → General → Visitor Engagement i wkleić ID GA4. To samo dotyczy prostych portfolio i małych stron, które zostały stworzone tylko do prezentacji w internecie bez planów na rozwój.

Jak założyć konto w Google Tag Manager

Założyć konto może każdy użytkownik w kilka minut. Musisz przejść rejestrację, wybrać platformę (Web, iOS lub Android) i dodać kod systemu do swojego projektu online.

Na przykład rozważmy, jak założyć konto w Google Tag Manager właścicielowi strony:

1. Przejdź na oficjalną stronę Google Tag Manager i zaloguj się na swoje konto Google, a następnie kliknij „Utwórz konto”.

2. Dodaj nazwę konta i wybierz kraj.

3. Dodaj nazwę kontenera i wybierz platformę, na przykład, Web dla strony.
4. Kliknij „Utwórz” i zaakceptuj „Umowę o świadczenie usług”, po czym natychmiast otworzy się formularz z fragmentami kodu — to omówimy później.

Zwróć uwagę na moment dodawania nazwy kontenera. Na jednym koncie Google Tag Manager można mieć kilka różnych kontenerów, na przykład, osobny dla strony i osobny dla aplikacji mobilnej. W ramach każdego kontenera są własne obszary robocze, które pozwalają kilku osobom wprowadzać zmiany jednocześnie, nie przeszkadzając sobie nawzajem.

Jak zainstalować Google Tag Manager na WordPressie

Możesz dodać kod Google Tag Manager na stronie WordPress za pomocą wtyczek lub ręcznie przez edytowanie motywu. Z wtyczek najbardziej efektywne i stabilne są Google Tag Manager for WordPress lub specjalistyczne rozszerzenie do dodawania dowolnego kodu WPCode.

Aby pokazać proces rejestracji, konfiguracji i korzystania z Google Tag Manager od podstaw, stworzyłem testowy sklep internetowy przez TasteWP. Na nim zainstalowałem aktualizację WordPress 7.0, motyw Twenty Twenty-Three, wtyczkę e-commerce WooCommerce. Do sklepu dodałem 4 testowe produkty do dalszego śledzenia zdarzeń: najlepszy hosting, rejestracja domeny, wynajem serwera wirtualnego i dedykowanego z Cityhost.

Jak dodać kod bez wtyczek

Musisz skopiować oba fragmenty kodu z obszaru roboczego GTM i wkleić je w szablonie strony: pierwszy — zaraz po <head>, drugi — zaraz po tagu <body>. Jeśli motyw wspiera edytowanie szablonu, możesz to zrobić bezpośrednio w panelu administracyjnym, jeśli nie — potrzebny będzie klient FTP, na przykład, FileZilla.

Na testowej stronie zainstalowano nowoczesny motyw blokowy, dlatego dla tego sposobu musiałem zmienić go na GeneratePress. Więc jeśli masz ten sam lub inny klasyczny motyw z Theme File Editor, dodaj kod Google Tag Manager w następujący sposób:

1. Przejdź do panelu administracyjnego WordPress → „Wygląd” (Appearance) → „Edytor motywów” (Theme File Editor).

2. Znajdź header.php.

3. Wróć do GTM → kliknij na kod → skopiuj pierwszy fragment kodu.

4. W header.php zaraz po tagu <head> wklej kod.

5. Powtórz to samo z drugim fragmentem i tagiem <body> — zazwyczaj jest on w tym samym pliku.

Jeśli twój motyw wspiera Theme File Editor i ma zrozumiały kod, w którym łatwo znaleźć <head> i <body>, lub jesteś gotowy poświęcić trochę czasu na podłączenie przez klienta FTP — możesz użyć tego sposobu. Ale zawsze rób kopie zapasowe przed takimi poważnymi zmianami na stronie.

Przeczytaj także: 31 marca — dzień tworzenia kopii zapasowych. Dlaczego ważne jest, aby nie zapominać o kopiach zapasowych i jak zrobić kopię zapasową swojej strony (instrukcja)

Jak wstawić kod z wtyczką WPCode

Jeśli twój motyw nie pozwala na edytowanie kodu przez panel administracyjny WordPress lub nie chcesz samodzielnie zmieniać szablonu, najlepszym wyborem jest darmowa wersja wtyczki WPCode. Możesz zainstalować i aktywować ją bezpośrednio z katalogu WordPress, dodać kod w nagłówku i body, a on automatycznie będzie działał na całej stronie.

Przejdźmy krok po kroku, jak dodać kod Google Tag Manager z WPCode:

1. Przejdź do panelu administracyjnego WordPress → Wtyczki → Dodaj wtyczkę i znajdź WPCode.

2. Po zainstalowaniu i aktywacji przejdź do WPCode → Header & Footer.

3. W polu Header wklej pierwszy fragment kodu GTM, w polu Body — drugi, i zapisz zmiany.

Możesz sprawdzić, czy poprawnie zainstalowałeś kod, przeglądając stronę: przejdź na stronę → prawym przyciskiem myszy → „Wyświetl kod strony” → znajdź linię z „GTM-”. Albo jeszcze prościej: wróć do Google Tag Manager i pod dwoma fragmentami kodu wprowadź adres swojej strony i kliknij „Sprawdź”.

Ważne! W internecie „Google Tag Manager for WordPress” (GTM4WP) często nazywany jest oficjalnym rozwiązaniem Google — to popularny, dobrze wspierany, ale zewnętrzny produkt. Jedyną wtyczką, którą rzeczywiście wydaje sama firma — jest Site Kit by Google. Z nim również można podłączyć GTM, ale na budżetowym współdzielonym hostingu czasami tworzy od razu kilka równoległych zapytań do Google API podczas ładowania pulpitu, co na ograniczonych taryfach może prowadzić do tymczasowych błędów serwera.

Jak połączyć Google Analytics 4 z GTM

Aby połączyć Google Analytics 4 z Google Tag Manager, musisz założyć konto w systemie analityki. Możesz znaleźć instrukcję krok po kroku z Google Analytics 4 w blogu Cityhost. Następnie musisz dodać tag Google (wcześniej — GA4 Configuration) w GTM, co zajmie kilka minut.

Proponuję krok po kroku przeanalizować proces podłączenia Google Analytics 4 do Google Tag Manager:

1. Przejdź do GA4 → Admin → Zbieranie i modyfikacja danych → Strumienie danych, kliknij na nazwę potrzebnego strumienia danych (twojej strony) z listy → skopiuj Measurement ID.

2. Przejdź do GTM → Dodaj tag bezpośrednio na stronie głównej lub Tagi → Utwórz przez menu.

3. Kliknij Konfiguracja tagu → Google Tag (nie mylić z Google Analytics — to do zdarzeń).

4. Wklej Measurement ID, nie zmieniaj Triggering, dodaj nazwę tagu i zapisz.

Podłączyłeś Google Analytics 4 do Google Tag Manager, ale teraz musisz sprawdzić, czy wszystko działa poprawnie. I tutaj często pojawia się ogromne zamieszanie między dwoma przyciskami — Podgląd a Publikuj — które znajdują się obok siebie.

Po co potrzebny jest tryb podglądu

Podgląd w Google Tag Manager — to tryb testowania kontenera przed publikacją. Automatycznie oznacza twoją bieżącą sesję w przeglądarce parametrem _dbg, w przeciwieństwie do parametru debug_mode, który musiałbyś dodać ręcznie. Rzeczywiści odwiedzający stronę nigdy nie pojawiają się w DebugView, co pozwala nie psuć własnej statystyki.

Więc kliknij Podgląd w prawym górnym rogu GTM, wklej nazwa domeny i kliknij Połącz. W nowej karcie otworzy się twoja strona, a ty musisz przejść na kilka stron, ale nie zamykaj tej nowej karty ze swoim zasobem internetowym, po prostu zminimalizuj. Jeśli wszystko poprawnie skonfigurowałeś, to zobaczysz w Google Tag Manager Debug — Tagi Uruchomione (twój tag) oraz Tagi Nie Uruchomione — Brak.

Po sprawdzeniu w Podglądzie zmiany musisz opublikować przez Wyślij → Publikuj — tylko wtedy kontener staje się „żywy” i tagi uruchamiają się dla rzeczywistych odwiedzających automatycznie. Przy tym publikacja dotyczy konkretnej wersji kontenera w momencie naciśnięcia Publikuj: jeśli dodasz nowy tag i zapomnisz go opublikować, będzie on działał tylko w twoim Podglądzie i nigdy nie uruchomi się dla rzeczywistych odwiedzających, chociaż w interfejsie GTM będzie wyglądał całkowicie gotowo.

Ważne! Aby poprawnie otrzymać dane na nowym koncie Google Analytics 4, może być potrzebne od 24 do 48 godzin. Jednak już możesz przejść do pulpitu i zobaczyć raport w czasie rzeczywistym (Realtime). Na przykład, u mnie pokazuje 1 użytkownika z Ukrainy: wszystko działa, pomyślnie podłączyliśmy Google Analytics 4 do strony przez Google Tag Manager.

Jak śledzić kliknięcia w linki na stronie

Śledzenie kliknięć w zewnętrzne linki potrafi sama GA4, ale wewnętrzne kliknięcia w ogóle nie są rejestrowane. Zamiast tego Google Tag Manager pozwala skonfigurować pełne śledzenie zarówno wewnętrznych, jak i zewnętrznych linków, widzieć sam link i anchor. Wystarczy dodać odpowiednie zmienne i wyzwalacze.

Aby zrozumieć różnicę, najpierw przyjrzyjmy się zwykłemu śledzeniu kliknięć w Google Analytics 4:

1. Wejdź w Analytics → Admin → Zbieranie i modyfikacja danych → Strumienie danych → wybierz swój strumień internetowy → kliknij na zębatkę obok Ulepszone pomiary → upewnij się, że przełącznik Kliknięcia wychodzące jest włączony.

2. Utwórz na stronie stronę lub dodaj do istniejącej dwa typy linków: zewnętrzne i wewnętrzne. Na przykład, dodałem do „Hello World” jeden wewnętrzny (Sklep) i 4 zewnętrzne (wirtualny hosting, VPS, wynajem fizycznego serwera, nazwa domeny).

3. Otwórz tę stronę i kliknij po kolei w linki, a następnie przejdź do Analytics → Raporty → Podgląd na żywo, znajdź blok „Liczba zdarzeń według nazwy zdarzenia” — powinno pojawić się zdarzenie kliknięcia. Kliknij na nie i zobacz link_url. Na przykład, kilka razy klikałem we wszystkie linki, ale Google Analytics 4 zarejestrował tylko kliknięcia na cityhost.ua/uk, a na moją stronę Sklep ani razu.

Teraz rozważmy, jak skonfigurować śledzenie kliknięć w Google Tag Manager:

1. Przejdź do GTM → Zmienne → Skonfiguruj → zaznacz wbudowane zmienne Click URL, Click Text, Click Classes.

2. Przejdź do Wyzwalacze → Nowy → Konfiguracja wyzwalacza → Tylko linki → dodaj nazwę → Zapisz.

3. Przejdź do Tagi → Nowy → Konfiguracja tagu → Google Analytics → GA4 Event i ponownie podaj ID oraz dodaj nazwę zdarzenia link_click.

4. Tutaj kliknij na Parametry zdarzenia i dodaj parametry: link_url = {{Click URL}}, link_text = {{Click Text}}.

5. Na dole w Triggering dodaj stworzony wyzwalacz, dodaj nazwę całemu tagowi i kliknij Zapisz.

6. Kliknij Podgląd, połącz się ze stroną, kliknij w zewnętrzny i wewnętrzny link na swojej stronie, a następnie w Tag Assistant → Podsumowanie sprawdź, czy tag link_click zadziałał na obu kliknięciach.

7. Przejdź do GA4 → DebugView → kliknij na każde zdarzenie i zobacz link_url oraz link_text. Jak widzisz, wszystko zadziałało, i teraz możemy śledzić zarówno zewnętrzne, jak i wewnętrzne linki, czego w GA4 nie było.
8. Zakończ Podgląd → wróć do GTM → kliknij „Wyślij” (Submit) → dodaj nazwę wersji, na przykład, „v2 – śledzenie kliknięć w linki” i kliknij Publikuj.

Na końcową kontrolę przejdź ponownie do GA4 → DebugView → Liczba zdarzeń według nazwy zdarzenia → link_click → link_url. Na przykład, u mnie wyświetlają się 2 przejścia na stronę Sklep (wewnętrzne linki), 2 — Cityhost (zewnętrzne linki) i jeszcze jedno na moją stronę w tym wpisie Hello World, gdzie wszystko testowaliśmy.

Ważne! Nie pomyl w raportach dwóch różnych zdarzeń: click z parametrem outbound: true — to automatyczne śledzenie samej GA4, a link_click — to twoje własne zdarzenie z GTM. Istnieją równolegle i nie zastępują się nawzajem, jeśli nie wyłączyłeś Enhanced measurement ręcznie.

Jak skonfigurować zdarzenia e-commerce w WooCommerce

Aby śledzić takie zdarzenia jak wyświetlenie karty produktu, dodanie do koszyka, zakup, musimy również skonfigurować GTM, ponieważ sam Google Analytics 4 ich nie śledzi. Najpierw instalujemy dodatkową wtyczkę GTM Kit, a następnie tworzymy niestandardowe zdarzenia w Google Tag Manager.

Specyfika działania stron na WordPress WooCommerce — GA4 i GTM same w sobie nie wiedzą nic o WooCommerce, ponieważ czytają tylko to, co pojawiło się w dataLayer przeglądarki, a ta wtyczka e-commerce domyślnie nie wyprowadza tam danych o produkcie, cenie czy ID zamówienia. W związku z tym musimy zbudować most za pomocą własnego kodu PHP, lub jeszcze prościej — zainstalować wtyczkę GTM Kit:

1. Przejdź do panelu administracyjnego WordPress → Wtyczki → Dodaj wtyczkę → zainstaluj i aktywuj.

2. W ustawieniach wtyczki podaj GTM Container ID i następnie po prostu kliknij Zapisz i Kontynuuj, nie zmieniając ustawień domyślnych.

W GTM Kit jest wygodny kreator Template Assistant (Dashboard → Otwórz Template Assistant), który obiecuje wygenerować gotowy plik z tagami, wyzwalaczami i zmiennymi do importu w GTM. Musisz tylko wybrać typ strony (E-commerce), usługi (GA4) i podać Measurement ID. Teoretycznie to znacznie szybciej niż konfigurowanie każdego tagu osobno.

Jednak podczas testowania otrzymałem błąd „Błąd generowania szablonu. Proszę sprawdzić swoje połączenie i spróbować ponownie”, a w konsoli przeglądarki (F12 → Konsola) była wiadomość: zapytanie do api.gtmkit.com zablokowane polityką CORS — serwer wtyczki nie udzielił zgody na zapytanie z domeny mojej testowej strony. To prawdopodobnie cecha tymczasowej domeny piaskownicy, a nie systemowy problem wtyczki. Ale weź pod uwagę ten moment: jeśli pojawi się taki sam błąd, nie warto tracić na to czasu — po prostu przejdź do ręcznej konfiguracji.

Dla każdej z trzech zdarzeń (view_item, add_to_cart, purchase) sekwencja jest taka sama. Pokażę, jak stworzyć zdarzenie e-commerce w Google Tag Manager na przykładzie view_item:

1. Przejdź do Google Tag Manager → Wyzwalacze → Nowy → Konfiguracja wyzwalacza → Niestandardowe zdarzenie.

2. Dodaj Event Name — view_item, inne dane pozostaw domyślnie, dodaj nazwę, na przykład, „CE — Wyświetlenie przedmiotu” i kliknij Zapisz.

3. Przejdź do Tagi → Nowy → Konfiguracja tagu → Google Analytics: GA4 Event → wklej Measurement ID z GA4 oraz view_item w Event Name, a w ustawieniach e-commerce wybierz „Wyślij dane e-commerce” → Źródło danych „Data Layer”.

4. W Triggering wybierz stworzony przez nas wyzwalacz, na przykład, u mnie to „CE — Wyświetlenie przedmiotu”, dodaj nazwę i kliknij Zapisz.

Dokładnie w ten sam sposób stwórz wyzwalacz i tag dla add_to_cart, a następnie — dla purchase. Zmieniaj tylko Event Name oraz nazwę wyzwalacza/tagu na każdym kroku. Ustawienia e-commerce, Data Layer, Measurement ID pozostają takie same, jak dla view_item.

Wyzwalacz dla add_to_cart

Tag dla add_to_cart

Wyzwalacz dla purchase

Tag dla purchase

Gdy wszystkie trzy wyzwalacze i tagi będą gotowe, wróć do Google Tag Manager, kliknij „Wyślij” (Submit) i opublikuj zmiany (Publish).

Co otrzymujesz po skonfigurowaniu Google Tag Manager

Wszystko, co skonfigurowaliśmy w tym artykule — od podłączenia GA4 do śledzenia kliknięć i zdarzeń e-commerce — istnieje w celu konkretnych raportów. Z Google Tag Manager otrzymujesz możliwość analizy zachowań użytkowników, śledzenia przejść przez zewnętrzne i wewnętrzne linki, etapów składania zamówienia, zysku z każdego źródła ruchu, listy poszczególnych zamówień, i oczywiście podłączania nowych narzędzi do swojego projektu online bez ingerencji w kod strony.

Rozważmy konkretne dane z Google Analytics 4 przez Google Tag Manager:

• Raporty → Cele biznesowe → Zobacz zaangażowanie i retencję użytkowników → Zdarzenia — tabela ze wszystkimi zdarzeniami na stronie i ich liczbą.
• Eksploracje → Wolna forma — budowanie własnych raportów, na przykład, porównanie zdarzeń z urządzeniem, krajem czy źródłem ruchu.
• Cele biznesowe → Zwiększ sprzedaż → Zakupy e-commerce — wyświetlenia, dodania do koszyka, zakupy i przychód dla każdego produktu osobno.
• Cele biznesowe → Zwiększ sprzedaż → Ścieżka zakupu — lejek z pięciu kroków z procentem odrzuceń na każdym etapie.
• Cele biznesowe → Zwiększ sprzedaż → Transakcje — lista poszczególnych zamówień z detalami, na przykład, ID transakcji, kwota i inne dane.
• Cele biznesowe → Generuj leady → Pozyskiwanie ruchu — czas trwania sesji, zdarzenia na sesję, przychód w podziale na każde źródło ruchu.
• Podgląd na żywo — wyświetlanie wszystkiego na bieżąco, jeszcze przed pojawieniem się w powyższych raportach.

Google Tag Manager pozwala uzyskiwać wszystkie powyższe raporty, których nie ma przy standardowych ustawieniach GA4. Ale GA4 — to nie jedyna usługa, którą można podłączyć przez ten sam kontener: tak samo łatwo dodawane są Facebook Pixel, konwersje Google Ads, TikTok Pixel czy jakikolwiek inny skrypt reklamowy i analityczny. I co najważniejsze — GTM stale się rozwija, dodając nowe możliwości i usługi, które teraz będziesz mógł podłączać samodzielnie, rozumiejąc podstawy pracy z tagami, wyzwalaczami i zmiennymi.