Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🚀 Jak skonfigurować Google Tag Manager dla WordPress

🚀 Jak skonfigurować Google Tag Manager dla WordPress

Wchodzą Państwo do panelu administracyjnego WordPress, otwierają edytor motywu i wklejają kolejny fragment JavaScript do pliku header.php. Brzmi znajomo? W ciągu miesiąca takich fragmentów zbiera się kilkanaście: analityka, piksele reklamowe, czat, mapy cieplne. Strona robi się coraz cięższa, a zorientowanie się w tej mieszaninie kodu staje się coraz trudniejsze.

Google Tag Manager rozwiązuje ten problem radykalnie: zamiast kilkunastu tagów rozrzuconych po plikach motywu otrzymują Państwo jeden kontener i interfejs webowy do zarządzania wszystkim z jednego miejsca. Bez edycji kodu, bez wzywania programisty, bez ryzyka uszkodzenia układu strony.

Poniżej znajduje się przewodnik krok po kroku dotyczący instalacji GTM na WordPress: metoda ręczna, metoda przez wtyczkę oraz konfiguracja Google Analytics 4 bez ani jednej linii kodu na stronie.

💡 Szybki przegląd:

  • Tworzą Państwo bezpłatne konto Google Tag Manager i otrzymują kontener z dwoma kodami instalacyjnymi
  • Dodają Państwo kody do WordPressa: ręcznie przez header.php (2 minuty) lub przez wtyczkę GTM4WP (1 minuta, bez edycji motywu)
  • Podłączają Państwo Google Analytics 4 wewnątrz GTM: tag „GA4 Configuration" plus wyzwalacz „All Pages", zero linii JS na stronie
  • Testują Państwo w trybie podglądu GTM, publikują kontener i wszystkie tagi działają

Czym jest Google Tag Manager

Google Tag Manager to bezpłatny system do zarządzania tagami od Google. Zamiast umieszczać każdy kod śledzący bezpośrednio na stronie, dodają go Państwo w interfejsie webowym GTM, a na stronie umieszczają tylko jeden fragment: kontener GTM.

Tag w kontekście śledzenia cyfrowego to fragment JavaScript, który aktywuje funkcje zewnętrzne: analitykę ruchu, kampanie reklamowe, czaty, mapy cieplne. Nazywa się je również sygnalizatorami WWW lub pikselami śledzącymi. Klasycznym przykładem jest kod Google Analytics, który dodają Państwo na stronę w celu śledzenia odwiedzin.

Dostawcy tagów to platformy takie jak Google Analytics, Google Ads, Meta (Facebook), LinkedIn, Hotjar i dziesiątki innych. Każda z nich oferuje swój fragment JS. Bez systemu zarządzania tagami wszystkie te fragmenty znajdują się bezpośrednio w kodzie motywu WordPress.

Dlaczego Google Tag Manager jest potrzebny

Tradycyjne podejście, czyli ręczna edycja plików header.php, functions.php i innych plików motywu, generuje trzy problemy.

Pierwszy to szybkość strony. Każdy zewnętrzny skrypt JS dodaje stronie ciężaru i wydłuża czas ładowania. Kilkanaście tagów od różnych dostawców i wskaźnik Site Speed w Google Search Console robi się czerwony.

Drugi to bezpieczeństwo. Tagi z niezaufanych źródeł otwierają stronę na ataki XSS i wycieki danych. A nie zawsze wiadomo, co dokładnie znajduje się w kolejnym skopiowanym fragmencie.

Trzeci to utrzymanie. Dostawca zaktualizował kod śledzący, trzeba wchodzić w pliki motywu i ręcznie go podmieniać. Wystarczy pomylić jeden znak, tag przestaje działać, dane są tracone.

Google Tag Manager eliminuje wszystkie trzy problemy:

  • Jeden kontener zamiast kilkunastu tagów. Na stronie znajduje się tylko kilka linii kodu GTM. Cała logika tagów znajduje się w interfejsie w chmurze.

  • Instalacja bez programisty. Interfejs GTM jest intuicyjny: wybierają Państwo typ tagu, podają identyfikator śledzenia, przypisują wyzwalacz i gotowe. Ani jednej linii kodu na stronie.

  • Wbudowane integracje. GA4, Google Ads, Floodlight, dziesiątki szablonów zewnętrznych: wybierają Państwo z listy, zamiast kopiować kod.

  • Tryb podglądu i debugowania. Przed publikacją widzą Państwo, które tagi zadziałały na stronie i jakie dane wysłały. Błąd konfiguracji jest widoczny od razu, a nie po tygodniu na podstawie raportów.

  • Wersjonowanie. GTM przechowuje historię wszystkich opublikowanych wersji kontenera. Wycofanie nieudanej konfiguracji zajmuje dwie sekundy.

Bezpłatna wersja GTM pokrywa potrzeby zdecydowanej większości stron. Wersja płatna (Google Tag Manager 360) dodaje rozszerzone wsparcie i wyższe limity dla dużych projektów enterprise, ale dla strony na WordPressie dowolnej skali wersja bezpłatna jest w zupełności wystarczająca.

GTM ma pewną krzywą uczenia się, interfejs może początkowo wydawać się przeładowany. Jednak podstawowe scenariusze (GA4 plus kilka tagów marketingowych) można opanować w godzinę. W celu pogłębienia wiedzy na końcu wpisu znajduje się sprawdzone wideo na YouTube.

Jak skonfigurować Google Tag Manager dla WordPressa

Poniżej znajdują się dwa sposoby instalacji: ręczny (przez plik motywu) i przez wtyczkę GTM4WP. Oba działają, proszę wybrać ten odpowiadający Państwa stylowi pracy.

Tworzenie konta Google Tag Manager

Pierwszy krok to bezpłatne konto GTM. Daje ono kontener i identyfikator, który będzie potrzebny do integracji z WordPressem.

Proszę przejść na stronę Google Tag Manager i zalogować się na swoje konto Google.

Strona główna Google Tag Manager

Proszę kliknąć „Utwórz konto" w panelu administracyjnym GTM.

Przycisk tworzenia konta w GTM

Proszę wprowadzić nazwę konta (na przykład nazwę firmy), wybrać kraj i kliknąć „Dalej".

Formularz tworzenia konta GTM z wyborem kraju

Następnie proszę podać nazwę kontenera (zazwyczaj domenę strony), wybrać „Sieć" jako platformę docelową i kliknąć „Utwórz".

Ustawienia nazwy kontenera i wybór opcji Sieć

Proszę zaakceptować warunki korzystania z Google Tag Manager oraz warunki przetwarzania danych.

Akceptacja warunków korzystania z GTM

Po potwierdzeniu pojawi się wyskakujące okienko z dwoma kodami instalacyjnymi. Proszę nie zamykać tej karty, kody będą potrzebne w następnym kroku.

Okno z kodami instalacyjnymi kontenera GTM

GTM wyświetla instrukcję umieszczenia kodów: pierwszy, jak najwyżej w <head>, drugi, zaraz po otwierającym <body>. Brzmi prosto, ale dla początkującego użytkownika WordPressa może to nie być oczywiste. Poniżej omawiamy oba sposoby.

Ważne, zanim Państwo przejdą dalej:

Ręczna instalacja GTM przez header.php

W panelu administracyjnym WordPressa proszę przejść do „Wygląd → Edytor motywu".

Menu Wygląd, Edytor w panelu administracyjnym WordPress

Na zrzucie ekranu używany jest motyw potomny z plikami header.php (nagłówek), footer.php (stopka), rtl.css i 404.php. Kody GTM będziemy wstawiać do header.php.

Proszę kliknąć „Nagłówek motywu (header.php)" na prawym panelu nawigacji plików.

Plik header.php otwarty w edytorze motywu WordPress

Proszę postępować zgodnie z instrukcją GTM: pierwszy kod, jak najwyżej w <head>, drugi, zaraz po otwierającym tagu <body>. W WordPressie tag <body> ma zazwyczaj postać <body <?php body_class(); ?>>.

Proszę skopiować pierwszy kod z GTM i wkleić go wysoko w <head>.

Wstawienie pierwszego kodu GTM w sekcji head pliku header.php

Proszę skopiować drugi kod i wkleić go zaraz po otwierającym tagu <body>.

Wstawienie drugiego kodu GTM po otwierającym znaczniku body

Proszę kliknąć „Aktualizuj plik" na dole ekranu. Gotowe, GTM został ręcznie zainstalowany na stronie. Cały proces zajmuje kilka minut.

Nie chcą Państwo dotykać plików motywu? Poniżej sposób przez wtyczkę, która robi to samo bez żadnej edycji kodu.

Instalacja przez wtyczkę GTM4WP

GTM4WP (Google Tag Manager for WordPress, autor DuracellTomi), najpopularniejsza wtyczka do integracji GTM z WordPressem: ponad 700 000 aktywnych instalacji, aktualizowana od 2013 roku. Nie tylko wstawia kody kontenera, ale także dodaje data layer dla WooCommerce, śledzenia kontaktów i innych scenariuszy.

W panelu administracyjnym WordPressa proszę przejść do „Wtyczki → Dodaj nową".

Menu Wtyczki, Dodaj nową w panelu administracyjnym WordPress

Proszę wpisać „Google Tag Manager for WordPress" w pasku wyszukiwania i kliknąć „Zainstaluj teraz".

Wyszukiwanie wtyczki GTM4WP w repozytorium WordPress

Po instalacji proszę kliknąć „Aktywuj".

Przycisk aktywacji wtyczki GTM4WP

Na górze ekranu pojawi się powiadomienie z propozycją wprowadzenia GTM ID. Proszę kliknąć link w powiadomieniu.

Komunikat o konieczności wprowadzenia GTM ID po aktywacji wtyczki

Pana/Pani GTM ID znajduje się na koncie Google Tag Manager, na górnym pasku, obok nazwy kontenera. Format: GTM-XXXXXXX.

Identyfikator kontenera GTM w interfejsie Google Tag Manager

Proszę skopiować ID, wrócić do panelu WordPressa, wkleić je w odpowiednie pole na stronie ustawień wtyczki i kliknąć „Zapisz zmiany".

Pole do wstawienia GTM ID w ustawieniach wtyczki GTM4WP

Gotowe. Wtyczka automatycznie umieściła oba kody GTM w odpowiednich miejscach, nie otwierał/a Pan/Pani żadnego pliku PHP.

Teraz, gdy kontener GTM jest na stronie, skonfigurujemy zbieranie danych przez Google Analytics 4.

Jak podłączyć Google Analytics 4 przez Google Tag Manager

Wcześniej w GTM używany był tag „Universal Analytics", który przestał zbierać dane w lipcu 2024 roku. Obecnie jedyną aktualną opcją jest Google Analytics 4 (GA4). Konfiguruje się go w trzech krokach: utworzenie tagu, wskazanie identyfikatora pomiaru i przypisanie wyzwalacza.

Jeśli na Pana/Pani stronie nadal znajduje się stary kod Universal Analytics (funkcja gtag('config', 'UA-XXXXX-Y') w header.php lub wstawka przez wtyczkę), najpierw proszę go usunąć. W przeciwnym razie GA4 i Universal Analytics będą dublować dane, zniekształcając raporty.

Proszę wrócić do konta GTM i kliknąć „Tagi" w lewym menu.

Sekcja Tagi w menu bocznym Google Tag Manager

Proszę kliknąć „Utwórz" (przycisk New).

Przycisk tworzenia nowego tagu w interfejsie GTM

Proszę nazwać tag (na przykład „GA4, Odsłony stron") i kliknąć pole „Konfiguracja tagu", aby wybrać typ tagu.

Okno konfiguracji nowego tagu w GTM

Na liście typów tagów proszę wybrać „Google Analytics: GA4 Configuration". Właśnie GA4, nie Universal Analytics. Interfejs GTM jest regularnie aktualizowany, więc rozmieszczenie pozycji może nieznacznie różnić się od zrzutów ekranu, ale logika pozostaje ta sama.

Wybór typu tagu Google Analytics w GTM

Wróci Pan/Pani z powrotem do konfiguracji tagu. W polu „Measurement ID" proszę wpisać swój identyfikator pomiaru GA4 (format: G-XXXXXXXXXX). Aby nie umieszczać go na sztywno w każdym tagu, proszę utworzyć zmienną, to najlepsza praktyka GTM.

Wybór Page View jako typu śledzenia GA4

Proszę wybrać „New Variable" i w oknie, które się otworzy, wpisać swój Measurement ID z Google Analytics 4. Proszę nazwać zmienną, na przykład „GA4 Measurement ID".

Tworzenie nowej zmiennej dla identyfikatora GA4

Aby poznać swój Measurement ID, proszę zalogować się na konto Google Analytics i wybrać odpowiednią usługę.

Wybór zasobu na koncie Google Analytics

Proszę przejść do „Administrator" → „Ustawienia usługi" → „Strumienie danych" → wybrać strumień internetowy. Measurement ID zaczyna się od G- i jest wyświetlany w prawym górnym rogu karty strumienia.

Identyfikator śledzenia w ustawieniach Google Analytics

Proszę skopiować Measurement ID, wkleić w pole zmiennej i kliknąć „Zapisz".

Zapisanie zmiennej z identyfikatorem GA4 w GTM

Teraz przypiszemy wyzwalacz, czyli warunek, przy którym tag się uruchamia. Proszę kliknąć sekcję „Triggering".

Sekcja wyboru wyzwalacza w konfiguracji tagu GTM

Do śledzenia wszystkich odsłon stron proszę wybrać wbudowany wyzwalacz „All Pages".

Wybór wyzwalacza All Pages w GTM

Proszę kliknąć „Zapisz", tag GA4 jest gotowy, ale jeszcze nieopublikowany.

Testowanie i publikacja tagu

Zanim wyślą Państwo kontener na produkcję, proszę przetestować tag w trybie podglądu. Proszę kliknąć przycisk „Preview" w prawym górnym rogu.

Przycisk podglądu w interfejsie Google Tag Manager

GTM przejdzie w tryb debugowania. Proszę ponownie załadować witrynę, w dolnej części okna przeglądarki otworzy się konsola GTM, w której zobaczą Państwo, że tag GA4 uruchomił się podczas ładowania strony.

Konsola debugowania GTM z informacją o tagach, które zostały uruchomione

Aby upewnić się, że dane docierają do GA4, proszę otworzyć Google Analytics i przejść do „Raporty → Czas rzeczywisty". Pojawi się tam odsłona strony, którą właśnie wygenerowali Państwo przez ponowne załadowanie witryny.

Raport na żywo Google Analytics z aktywnym widokiem

Dane płyną. Nie dodali Państwo ani jednej linijki JS na stronie, wszystko jest obsługiwane wewnątrz kontenera GTM.

Teraz proszę opublikować kontener, aby tag zaczął działać dla wszystkich odwiedzających. Proszę kliknąć „Submit" w prawym górnym rogu.

Przycisk wysyłania kontenera w GTM

W oknie, które się pojawi, proszę nadać wersji sensowną nazwę (na przykład „GA4 page view tag v1") oraz opis.

Okno nazywania wersji kontenera przed publikacją

Proszę kliknąć „Opublikuj". Po publikacji aktywna wersja kontenera wyświetli się z zielonym wskaźnikiem.

To wszystko, GA4 zbiera dane z Państwa witryny WordPress za pośrednictwem Google Tag Manager. Według tego samego schematu dodaje się dowolne inne tagi: wybierają Państwo typ, podają parametry, przypisują wyzwalacz, testują i publikują. GTM sam zarządza kolejnością i czasem ładowania każdego tagu.

Jeśli chcą Państwo zgłębić możliwości GTM, od zdarzeń kliknięć po śledzenie odtwarzacza YouTube i integrację z Google Ads, proszę obejrzeć ten samouczek wideo: obejmuje on pełny cykl konfiguracji GA4 + GTM na WordPressie.

⁉️🤔 Często zadawane pytania

Czym Google Tag Manager różni się od Google Analytics?

Google Analytics zbiera dane o odwiedzających: odsłony stron, źródła ruchu, konwersje. Google Tag Manager sam nie zbiera danych, to kurier, który dostarcza tagi na stronę. GTM upraszcza instalację i aktualizację dziesiątek narzędzi marketingowych z jednego interfejsu internetowego, a GA4 przetwarza zebrane dane w raportach.

Czy korzystanie z wtyczki GTM4WP jest obowiązkowe, czy można się bez niej obejść?

Można i bez wtyczki, wstawiając dwa kody GTM do header.php ręcznie. Wtyczka GTM4WP jest wygodniejsza: nie traci ustawień przy zmianie motywu, dodaje data layer dla WooCommerce i formularzy kontaktowych, automatycznie umieszcza kody we właściwych miejscach. Wybór zależy od tego, jak często zmieniają Państwo motyw i czy potrzebują Państwo data layer od razu po instalacji.

Czym jest data layer i do czego służy?

Data layer to obiekt JavaScript, warstwa pośrednia między witryną a GTM. Za jego pośrednictwem przekazywane są dane strukturalne: ID produktu, kwota zamówienia, typ zdarzenia. GTM odczytuje data layer i decyduje, który tag i kiedy ma się uruchomić. Bez data layer śledzą Państwo odsłony stron, z nim, każdą akcję użytkownika z dokładnymi kwotami i nazwami produktów.

Czy Google Tag Manager jest darmowy?

Tak, wersja podstawowa jest całkowicie darmowa, bez ograniczeń co do liczby tagów, wyzwalaczy i wolumenu ruchu. Płatna wersja Tag Manager 360 (150 000 USD rocznie, dane z oficjalnej strony Google Marketing Platform) dodaje rozszerzone wsparcie i SLA dla zespołów enterprise. Dla witryny WordPress o dowolnej skali wersja darmowa jest w zupełności wystarczająca.

Czy przed skonfigurowaniem GA4 trzeba usunąć stary kod Universal Analytics?

Obowiązkowo. Universal Analytics przestał przetwarzać dane w lipcu 2024 roku. Pozostawiony w header.php lub we wtyczce stary kod UA-XXXXX-Y duplikuje dane z GA4 i zniekształca raporty. Po skonfigurowaniu GA4 proszę sprawdzić sekcję „Administrator → Porównanie danych" w Google Analytics: brak rozbieżności z oczekiwanym ruchem potwierdza, że stary kod został usunięty.

Jak sprawdzić, czy GTM działa po instalacji?

Trzy sposoby: proszę otworzyć kod źródłowy strony (Ctrl+U) i wyszukać GTM- w <head>, kontener powinien być na swoim miejscu. Proszę zainstalować rozszerzenie Google Tag Assistant Legacy dla Chrome, pokaże ono wszystkie aktywne tagi na stronie. Proszę włączyć tryb podglądu (Preview Mode) w GTM, ponownie załadować witrynę i upewnić się, że w konsoli debugowania wyświetla się zielony status „Connected".

Co w rezultacie wdrożyć na WordPressie

Google Tag Manager to narzędzie, które oszczędza godziny przy każdej zmianie tagu marketingowego. Zamiast „wejść w kod, znaleźć odpowiedni plik, podmienić fragment, sprawdzić, czy nic się nie zepsuło", otwierają Państwo interfejs internetowy, edytują ustawienia tagu i klikają „Opublikuj". Bez dostępu do hostingu, bez edytora motywu, bez ryzyka położenia witryny zbędnym przecinkiem w PHP.

Kluczowy scenariusz dla witryny WordPress: instalują Państwo GTM przez wtyczkę GTM4WP (raz, dwie minuty), dodają tag GA4 (raz, pięć minut z testowaniem) i analityka działa. Następnie dodają Państwo Hotjar, Google Ads, LinkedIn Insight Tag i dowolne inne piksele w razie potrzeby, nie dotykając kodu witryny.

Proszę zacząć od GA4 i trybu podglądu, upewnić się, że dane popłynęły. A potem proszę otworzyć wbudowane szablony tagów GTM: są tam dziesiątki gotowych integracji, które wcześniej wymagały ręcznego umieszczania JS na każdej stronie.