Przejdź do treści
sGTM.space

Zainstaluj Google Tag Managera na stronie (kontener Web)

Google Tag Manager (GTM) pozwala dodawać i zmieniać tagi śledzące bez grzebania w kodzie strony przy każdej zmianie. Raz instalujesz mały fragment kodu, a od tej pory GA4, piksele reklamowe i inne tagi ustawiasz w interfejsie GTM. W tej lekcji utworzysz kontener Web, zainstalujesz go, wyślesz pierwsze własne zdarzenie i opublikujesz wersję. Na tym kontenerze opierają się wszystkie kolejne lekcje.

Początkujący 8 min czytania

Czego się nauczysz

  • Utworzysz konto GTM i kontener Web dla swojej strony.
  • Poprawnie zainstalujesz fragment kodu w head i fragment noscript w body.
  • Wyślesz własne zdarzenie do dataLayer i zobaczysz je w trybie Preview.
  • Zapiszesz i opublikujesz wersję kontenera oraz dowiesz się, do czego służą obszary robocze i wersje.

Zanim zaczniesz

  • Konto Google.
  • Dostęp do szablonu strony albo CMS-a, żeby dodać kod na każdej podstronie.

01 Utwórz konto i kontener Web

Jedno konto GTM zwykle odpowiada jednej firmie. W nim tworzysz kontener dla każdej strony (a później osobny kontener serwerowy, który omawia lekcja 2).

  1. 1 Otwórz tagmanager.google.com i kliknij Create Account.
  2. 2 Wpisz Account Name (nazwę firmy) i wybierz Country.
  3. 3 W sekcji Container Setup wpisz swoją domenę jako Container name, na przykład www.example.com.
  4. 4 Jako Target platform wybierz Web i kliknij Create.
  5. 5 Zaakceptuj warunki korzystania z Google Tag Managera.

GTM pokaże wtedy okno Install Google Tag Manager z dwoma fragmentami kodu. Identyfikator kontenera ma postać GTM-XXXXXXX i występuje w obu.

02 Wklej oba fragmenty kodu

Pierwszy fragment wklej jak najwyżej w sekcji <head> każdej podstrony. Ładuje GTM asynchronicznie, więc nie blokuje renderowania.

html 
<!-- 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 -->

Drugi fragment wklej zaraz po otwierającym tagu <body>. To zabezpieczenie dla przeglądarek z wyłączonym JavaScriptem.

html 
<!-- 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) -->
  • W obu fragmentach użyj własnego identyfikatora kontenera, a nie GTM-XXXXXXX.
  • Umieść kod we wspólnym layoucie albo pliku motywu, żeby pojawił się na każdej podstronie, a nie tylko na stronie głównej.
  • Wiele CMS-ów (wtyczki WordPressa, Shopify, Webflow) ma pole na identyfikator GTM. Użyj albo pola, albo kodu, nigdy obu naraz, bo GTM załaduje się dwa razy.

03 Wyślij pierwsze własne zdarzenie przez dataLayer

dataLayer to tablica JavaScript wspólna dla Twojej strony i GTM. Kod strony wrzuca do niej obiekty, a GTM na nie reaguje. Obiekt z kluczem event staje się zdarzeniem, na które mogą nasłuchiwać reguły, a pozostałe klucze to wartości, które odczytasz zmiennymi typu Data Layer Variable.

js 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'sign_up',
  method: 'email'
});

Uruchom ten kod w chwili, gdy akcja się wydarzy, na przykład po udanej rejestracji. Żeby użyć go w GTM:

  1. 1 Wejdź w Triggers, kliknij New i wybierz Custom Event.
  2. 2 W polu Event name wpisz sign_up (musi się zgadzać dokładnie, łącznie z wielkością liter) i zapisz.
  3. 3 Wejdź w Variables, w sekcji User-Defined Variables kliknij New, wybierz Data Layer Variable i w polu Data Layer Variable Name wpisz method.

04 Przetestuj w trybie Preview

Tryb Preview pokazuje dokładnie to, co GTM widzi na Twojej stronie, zanim cokolwiek trafi na produkcję.

  1. 1 Kliknij Preview w prawym górnym rogu obszaru roboczego. Tag Assistant otworzy się w nowej karcie.
  2. 2 Wpisz adres strony i kliknij Connect. Strona otworzy się w osobnym oknie z plakietką Tag Assistant.
  3. 3 Wróć do karty Tag Assistant. Po lewej zobaczysz zdarzenia takie jak Consent Initialization, Initialization, Container Loaded, DOM Ready i Window Loaded.
  4. 4 Wywołaj rejestrację na stronie. Pojawi się zdarzenie sign_up: kliknij je i otwórz kartę Data Layer, żeby zobaczyć method: email.

Jeśli Tag Assistant nie może się połączyć, sprawdź, czy kod jest na stronie i ma właściwy identyfikator kontenera. Więcej przyczyn znajdziesz w lekcji o debugowaniu.

05 Zapisz i opublikuj wersję

Żadna zmiana w GTM nie dotrze do odwiedzających, dopóki jej nie opublikujesz.

  1. 1 Kliknij Submit w prawym górnym rogu.
  2. 2 Zostaw zaznaczone Publish and Create Version.
  3. 3 Wpisz Version name i Version description, które mówią, co się zmieniło, na przykład Add sign_up trigger.
  4. 4 Kliknij Publish.
  • Workspaces (obszary robocze) to wersje robocze. Każdy trzyma nieopublikowane zmiany, więc dwie osoby mogą pracować, nie nadpisując sobie nawzajem pracy. Darmowy GTM pozwala na trzy obszary robocze na kontener.
  • Versions (wersje) to migawki kontenera z chwili publikacji. W zakładce Versions widzisz, kto co opublikował, i możesz ponownie opublikować starszą wersję, żeby wycofać zmiany.
  • Oba fragmenty kodu są na każdej podstronie z Twoim identyfikatorem GTM-.
  • Tag Assistant łączy się z Twoją stroną.
  • Zdarzenie sign_up pojawia się w Preview razem z wartością method.
  • Pierwsza wersja jest opublikowana pod czytelną nazwą.

Najczęstsze pytania

Czy kontener Web zastępuje mój kod GA4?

Może. Zamiast wklejać kod GA4 bezpośrednio, dodajesz Google tag w GTM. Robi to lekcja 3, która przy okazji wysyła dane przez Twój kontener serwerowy. Gdy GTM wysyła już te same dane, usuń wpisany na sztywno kod GA4, bo inaczej wszystko policzysz podwójnie.

Po co mi fragment noscript?

Działa tylko przy wyłączonym JavaScripcie, co zdarza się rzadko. Google i tak go zaleca, a nie szkodzi, więc go zainstaluj.

Zmiany są opublikowane, ale nie widać ich na stronie. Dlaczego?

Sprawdź, czy opublikowany został obszar roboczy z tą zmianą, a potem odśwież stronę z pominięciem cache. Cache stron i CDN-y mogą też serwować starą wersję HTML, ale sam plik GTM aktualizuje się w ciągu kilku minut.

Gotowy, żeby przejść do praktyki?

Wdróż kontener server GTM na własnej domenie w kilka minut. Plan darmowy nie wymaga karty.

Załóż darmowe konto