Grzegorz Kalmus
Autor
Google Tag Manager to jedno z najważniejszych narzędzi w arsenale każdego marketera i właściciela strony internetowej. Dzięki GTM możesz dodawać i zarządzać wszystkimi skryptami śledzącymi bez angażowania programisty – wystarczy jeden fragment kodu raz wklejony do strony. W tym przewodniku przeprowadzimy Cię przez cały proces: od założenia konta, przez instalację, aż po zaawansowane śledzenie konwersji.
Czym jest Google Tag Manager i dlaczego warto go używać?
Google Tag Manager (GTM) to bezpłatny system zarządzania tagami od Google, który pozwala dodawać, edytować i usuwać fragmenty kodu JavaScript (tzw. tagi) na stronie internetowej bez modyfikowania jej kodu źródłowego. Zamiast prosić programistę o każdą zmianę skryptu analitycznego, możesz samodzielnie zarządzać wszystkimi narzędziami – Google Analytics, Facebook Pixel, Google Ads, Hotjar i dziesiątkami innych.
Według danych W3Techs, Google Tag Manager jest używany przez ponad 30% wszystkich stron internetowych w Internecie, co czyni go jednym z najpopularniejszych narzędzi marketingowych na świecie. Dlaczego tak wiele firm go używa?
- Jeden kod – wiele narzędzi: Instalujesz GTM raz, a potem dodajesz przez panel wszystkie potrzebne skrypty.
- Niezależność od programistów: Marketerzy mogą samodzielnie wdrażać tracking, bez czekania na dział IT.
- Szybkość wdrożeń: Zmiana konfiguracji to kwestia kilku kliknięć i jednej publikacji.
- Historia wersji: Każda zmiana jest zapisywana – możesz cofnąć się do poprzedniej wersji w każdej chwili.
- Debugowanie: Wbudowany tryb podglądu pozwala testować zmiany przed opublikowaniem.
Jeśli zależy Ci na skutecznym pozycjonowaniu stron i mierzeniu wyników kampanii, GTM jest absolutną podstawą. Bez danych analitycznych prowadzisz marketing w ciemno.
Jak stworzyć konto i kontener w Google Tag Manager?
Pierwszym krokiem jest założenie konta GTM. Przejdź na stronę tagmanager.google.com i zaloguj się kontem Google.
Struktura GTM opiera się na dwóch poziomach:
- Konto: Odpowiada zazwyczaj firmie lub organizacji. Jedno konto może zawierać wiele kontenerów.
- Kontener: Odpowiada konkretnej stronie internetowej lub aplikacji mobilnej. To tutaj zarządzasz wszystkimi tagami.
Kroki zakładania konta:
- Kliknij „Utwórz konto”
- Podaj nazwę konta (np. nazwa firmy)
- Wprowadź nazwę kontenera (np. adres URL strony)
- Wybierz platformę docelową (Web, iOS, Android lub AMP)
- Zaakceptuj warunki korzystania z usługi
- Skopiuj fragment kodu GTM – dostaniesz dwa snippety do wklejenia
Po utworzeniu kontenera GTM wyświetli Ci kod do instalacji. Składa się z dwóch części: skryptu JavaScript do wklejenia w sekcji <head> oraz elementu <noscript> do wklejenia zaraz po otwarciu tagu <body>.
Instalacja GTM na stronie internetowej
Sposób instalacji zależy od platformy, na której działa Twoja strona. Poniżej omówimy trzy najpopularniejsze metody.
WordPress – wtyczka Site Kit lub ręczna instalacja
Dla stron na WordPress najwygodniejszą opcją jest użycie wtyczki. Najpopularniejsze to:
- Google Site Kit – oficjalna wtyczka Google, integruje GTM, GA4, Search Console i PageSpeed w jednym miejscu
- GTM4WP (Google Tag Manager for WordPress) – dedykowana wtyczka z zaawansowanymi opcjami data layer dla WooCommerce
- Insert Headers and Footers – prosta wtyczka do wklejania kodu w head/body
Instalacja przez wtyczkę GTM4WP:
- Zainstaluj i aktywuj wtyczkę GTM4WP
- Przejdź do Ustawienia > Google Tag Manager
- Wklej swój ID kontenera (format: GTM-XXXXXXX)
- Zapisz zmiany
Instalacja manualna (HTML)
Dla każdej strony HTML wystarczy wkleić dwa fragmenty kodu. Fragment #1 w sekcji <head> (jak najwyżej):
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->Fragment #2 zaraz po otwierającym tagu <body>:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Instalacja w Next.js
W przypadku aplikacji Next.js (które często stoją za nowoczesnymi stronami firmowymi) instalacja wygląda nieco inaczej. Najlepszą praktyką jest użycie komponentu Script z Next.js:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<head>
<Script
id="gtm-script"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){
w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),
dl=l!='dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');`,
}}
/>
</head>
<body>{children}</body>
</html>
)
}Jeśli planujesz tworzenie strony internetowej od podstaw, warto od razu zaplanować integrację z GTM na etapie projektu technicznego.
Kluczowe pojęcia w Google Tag Manager
Zanim zaczniesz tworzyć pierwsze tagi, musisz zrozumieć trzy fundamentalne koncepcje GTM:
Tagi (Tags)
Tag to fragment kodu lub konfiguracja narzędzia, które chcesz uruchomić na stronie. Mogą to być:
- Skrypty analityczne (GA4, Adobe Analytics)
- Piksele reklamowe (Facebook Pixel, Google Ads, LinkedIn Insight Tag)
- Narzędzia heatmap (Hotjar, Microsoft Clarity)
- Czaty live (Intercom, Drift, LiveChat)
- Niestandardowy kod JavaScript
Wyzwalacze (Triggers)
Wyzwalacz określa, kiedy dany tag powinien zostać uruchomiony. Przykłady wyzwalaczy:
- All Pages: Uruchamia tag na każdej stronie
- Page View: Przy załadowaniu strony
- Click – All Elements: Przy kliknięciu w dowolny element
- Form Submission: Przy wysłaniu formularza
- Scroll Depth: Gdy użytkownik przewinie stronę do określonej głębokości
- Timer: Co określony czas
Zmienne (Variables)
Zmienne przechowują wartości, które mogą być używane w tagach i wyzwalaczach. Dzielą się na wbudowane (np. Page URL, Click Text, Form ID) i niestandardowe (np. wartości z data layer).
Konfiguracja Google Analytics 4 przez GTM
Jednym z pierwszych tagów, które większość użytkowników konfiguruje w GTM, jest Google Analytics 4. Oto jak to zrobić poprawnie.
Kroki konfiguracji GA4 przez GTM:
- W GTM kliknij „Tagi” > „Nowy”
- Wybierz typ tagu: „Google Analytics: Konfiguracja GA4”
- Wklej swój Measurement ID (format: G-XXXXXXXXXX) – znajdziesz go w panelu GA4 > Admin > Data Streams
- Jako wyzwalacz wybierz „All Pages”
- Zapisz i opublikuj kontener
Ważna uwaga: Jeśli wcześniej miałeś GA4 zainstalowane bezpośrednio w kodzie strony, usuń ten kod przed aktywacją tagu GTM. W przeciwnym razie dane będą zliczane podwójnie.
Więcej informacji o konfiguracji GA4 znajdziesz w oficjalnej dokumentacji: developers.google.com/tag-platform.
Śledzenie zdarzeń – kliknięcia, formularze, scroll, linki wychodzące
Sam pomiar odsłon stron to za mało. Aby naprawdę zrozumieć zachowanie użytkowników, potrzebujesz śledzenia zdarzeń (event tracking).
Śledzenie kliknięć w przyciski
Konfiguracja:
- Włącz wbudowane zmienne: „Click Classes”, „Click ID”, „Click Text”, „Click URL”
- Utwórz wyzwalacz typu „Click – All Elements”
- Dodaj warunek: Click Classes zawiera „btn” (lub inną klasę Twojego przycisku)
- Utwórz tag GA4 Event z nazwą zdarzenia np. „button_click”
- Dodaj parametry: click_text = {{Click Text}}, click_url = {{Click URL}}
Śledzenie wysyłania formularzy
Wyzwalacz typu „Form Submission” uruchamia się, gdy użytkownik wysyła formularz kontaktowy lub zapisu. To kluczowe zdarzenie dla mierzenia leadów i konwersji.
Scroll Depth – głębokość przewijania
GTM ma wbudowany wyzwalacz Scroll Depth, który pozwala mierzyć, jak daleko użytkownicy przewijają stronę. Możesz śledzić progi: 25%, 50%, 75%, 90%. To cenne dane do oceny jakości treści.
Linki wychodzące (Outbound Links)
Konfiguracja wyzwalacza Click – Just Links z warunkiem: Click URL nie zawiera Twojej domeny. W ten sposób zmierzysz, ile razy użytkownicy klikają w linki prowadzące poza Twoją stronę.
Śledzenie konwersji dla Google Ads
Jeśli prowadzisz kampanie Google Ads, śledzenie konwersji przez GTM jest zdecydowanie najwygodniejszym rozwiązaniem. Pozwala mierzyć skuteczność reklam bez modyfikowania kodu strony przy każdej zmianie kampanii.
Jak skonfigurować konwersję Google Ads w GTM:
- W Google Ads przejdź do Narzędzia > Pomiar > Konwersje
- Utwórz nową konwersję (np. „Formularz kontaktowy”)
- Wybierz metodę śledzenia: „Użyj Google Tag Managera”
- Skopiuj Conversion ID i Conversion Label
- W GTM utwórz tag typu „Google Ads: Conversion Tracking”
- Wklej Conversion ID i Conversion Label
- Ustaw wyzwalacz na zdarzenie, które reprezentuje konwersję (np. wysłanie formularza)
Facebook Pixel przez GTM
Facebook Pixel (obecnie Meta Pixel) możesz wdrożyć przez GTM używając niestandardowego tagu HTML. Wklej kod Pixela jako niestandardowy tag HTML z wyzwalaczem All Pages, a następnie utwórz oddzielne tagi dla standardowych zdarzeń (PageView, Lead, Purchase, AddToCart).
GTM pozwala precyzyjnie kontrolować, na których stronach uruchamia się każde zdarzenie Pixela. Na przykład zdarzenie Purchase możesz uruchomić tylko na stronie potwierdzenia zamówienia.
Data Layer – warstwa danych
Data layer to obiekt JavaScript, który przechowuje dane o stronie i użytkownikach i przekazuje je do GTM. To zaawansowana, ale bardzo potężna funkcja.
Przykład użycia data layer – przekazanie wartości produktu do tagu GA4:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'purchase',
'ecommerce': {
'transaction_id': 'T12345',
'value': 299.99,
'currency': 'PLN',
'items': [{
'item_name': 'Strona internetowa Basic',
'item_id': 'SKU001',
'price': 299.99,
'quantity': 1
}]
}
});W GTM tworzysz zmienne typu Data Layer Variable, które „wyciągają” konkretne wartości z tego obiektu i używają ich w parametrach tagów.
Debugowanie z trybem podglądu (Preview Mode)
Zanim opublikujesz jakiekolwiek zmiany w GTM, zawsze testuj je w trybie podglądu. To jedna z najbardziej wartościowych funkcji GTM – możesz zobaczyć dokładnie, które tagi się uruchamiają, jakie mają wyzwalacze i jakie wartości mają zmienne.
Jak uruchomić tryb podglądu:
- Kliknij przycisk „Podgląd” w prawym górnym rogu panelu GTM
- Wpisz URL swojej strony i kliknij „Connect”
- Twoja strona otworzy się z podłączonym debuggerem
- W panelu Tag Assistant zobaczysz listę wszystkich uruchomionych tagów
- Sprawdź, czy Twoje tagi uruchamiają się we właściwych momentach
Tag Assistant pokazuje:
– Listę zdarzeń (events) na timeline
– Tagi uruchomione przy każdym zdarzeniu
– Wartości wszystkich zmiennych
– Ewentualne błędy w konfiguracji
Najczęstsze błędy w GTM
Oto lista błędów, których warto unikać:
- Podwójne śledzenie: GA4 lub Facebook Pixel zainstalowany zarówno bezpośrednio w kodzie, jak i przez GTM – generuje zduplikowane dane
- Brak testowania: Publikowanie zmian bez sprawdzenia w trybie podglądu
- Za ogólne wyzwalacze: Użycie „All Clicks” zamiast precyzyjnego wyzwalacza opartego na klasie CSS
- Nieużywane tagi i wyzwalacze: Nagromadzenie niepotrzebnych skryptów spowalnia stronę
- Błędny Measurement ID: Pomylenie ID kontenera GTM (GTM-XXX) z Measurement ID GA4 (G-XXX)
GTM a szybkość strony
Każdy tag dodany przez GTM to dodatkowy skrypt, który musi się załadować. Zbyt wiele tagów może negatywnie wpłynąć na czas ładowania strony, co ma bezpośredni wpływ na SEO i wskaźniki Core Web Vitals.
Dobre praktyki dla wydajności:
- Regularnie audytuj listę tagów i usuwaj nieużywane
- Używaj strategii ładowania „Consent Initialization” lub opóźnionego ładowania dla mniej krytycznych tagów
- Konsoliduj zdarzenia – zamiast wielu małych tagów, używaj jednego tagu GA4 obsługującego wiele zdarzeń
- Monitoruj wpływ GTM na PageSpeed Insights
Więcej o optymalizacji wydajności w kontekście tagów znajdziesz w dokumentacji: support.google.com/tagmanager.
Consent Mode – integracja z zarządzaniem zgodami
W dobie RODO i dyrektyw ePrivacy, poprawna integracja GTM z systemem zarządzania zgodami (CMP – Consent Management Platform) jest niezbędna.
Google Consent Mode v2 pozwala GTM działać w sposób dostosowany do preferencji użytkownika:
- Gdy użytkownik odmawia zgody na analitykę, tagi analityczne nie uruchamiają się lub uruchamiają się w trybie modelowania
- Gdy odmawia zgody na reklamy, tagi reklamowe (Google Ads, Facebook Pixel) nie śledzą użytkownika
Implementacja Consent Mode w GTM wymaga:
- Wyboru i instalacji CMP zgodnego z Google Consent Mode v2 (np. Cookiebot, CookieYes, Usercentrics)
- Konfiguracji tagu Consent Initialization w GTM, który ustawia domyślne stany zgód
- Przypisania odpowiednich typów zgód do każdego tagu (analytics_storage, ad_storage, ad_user_data, ad_personalization)
Pełna dokumentacja Consent Mode dostępna jest na: developers.google.com/tag-platform/security/guides/consent.
Podsumowanie – Google Tag Manager krok po kroku
Google Tag Manager to narzędzie, które znacząco upraszcza zarządzanie skryptami marketingowymi i analitycznymi na stronie. Dzięki niemu zyskujesz pełną kontrolę nad tym, co i kiedy się ładuje – bez konieczności angażowania programistów przy każdej zmianie.
Kluczowe kroki do wdrożenia GTM:
- Stwórz konto i kontener na tagmanager.google.com
- Zainstaluj kod GTM na stronie (wtyczka WordPress, manualnie lub w Next.js)
- Skonfiguruj GA4 jako pierwszy tag
- Dodaj tagi reklamowe: Google Ads Conversion Tracking, Facebook Pixel
- Skonfiguruj śledzenie zdarzeń: kliknięcia, formularze, scroll, linki wychodzące
- Testuj wszystkie zmiany w trybie podglądu przed publikacją
- Zintegruj z Consent Mode v2 dla zgodności z RODO
Jeśli potrzebujesz pomocy przy wdrożeniu GTM, analityce internetowej lub chcesz omówić strategię śledzenia konwersji dla swojej firmy, skontaktuj się z nami. Pomagamy firmom z całej Polski zbudować solidne fundamenty analityczne dla skutecznego marketingu online.
