Generator dataLayer dla GTM/GA4 — gotowe snippety eventów

Jeśli pracujesz z Google Tag Managerem i potrzebujesz wepchnąć event do GA4 — purchase, add_to_cart, generate_lead — to dziewięć razy na dziesięć rozwiązaniem jest dataLayer.push(). Składnia jest prosta na pierwszy rzut oka, ale diabeł tkwi w szczegółach: nazewnictwo parametrów, struktura tablicy items dla e-commerce, kolejność push-y, kiedy wyczyścić ecommerce object przed kolejnym eventem. Generator powyżej generuje gotowy snippet dopasowany do typu eventu — z podpowiedziami gdzie dokładnie go wstawić.

Output ma dwa tryby — czysty JavaScript (do wklejenia w plik strony albo w Custom HTML tag w GTM) lub pełen blok HTML z otaczającym tagiem skryptu. Kopiowanie i podgląd są na żywo, syntax highlighting w stylu monospace pomaga szybko zobaczyć co generator zbudował.

Co to jest dataLayer i dlaczego go potrzebujesz

dataLayer to globalny obiekt JavaScript (konkretnie tablica) ustawiany przez Google Tag Manager. Zamiast wstawiać kod GA4 i innych narzędzi marketingowych bezpośrednio w HTML strony, wpychasz dane do dataLayera, a GTM po swojej stronie definiuje, jakie tagi mają się odpalić w odpowiedzi na które eventy. To rozdzielenie warstwy danych od warstwy implementacji oznacza, że marketer może dodać piksel Facebook'a w GTM bez ruszania kodu strony — wystarczy że dane już tam są.

W praktyce window.dataLayer.push({ event: 'purchase', ... }) mówi GTM-owi „stało się X, zareaguj jeśli masz na to skonfigurowany trigger". To jest serce każdej poprawnej integracji GA4 z e-commerce, generate_lead z formularzem kontaktowym, czy custom eventów typu „użytkownik obejrzał wideo do końca".

Gdzie wkleić wygenerowany snippet

Masz trzy realne opcje, w kolejności od najlepszej do najgorszej z perspektywy długoterminowego utrzymania:

• Bezpośrednio w kodzie strony — w singletonie/handler-ze, który odpala się po wykonaniu właściwej akcji (np. po sukcesie checkoutu, po wysłaniu formularza). To najlepsza opcja jeśli masz dostęp do kodu — daje pełną kontrolę nad timingiem i nie zależy od stanu GTM. WordPress: w functions.php motywu, hook na wp_footer dla generic, albo PHP-side render w template-parts dla specyficznych stron (np. thank-you).
• GTM Custom HTML tag — używasz gdy backend nie może łatwo wstawić snippet (np. shop na shopify, gdzie strona thank-you ma ograniczoną customizację). Tworzysz tag typu Custom HTML, wklejasz nasz snippet w trybie HTML, ustawiasz trigger (np. Page View → URL contains `/dziekujemy`). Wadą jest opóźnienie — GTM ładuje się asynchronicznie, więc jeśli user szybko opuści stronę, event może się nie zdążyć wysłać.
• GTM Variable + Tag — dla zaawansowanych: dataLayer ma już dane (z server-side albo z back-end-rendered HTML), tworzysz GTM Variable czytającą te dane i osobny tag GA4 Event który je wysyła. Najczystsza architektura ale wymaga konfiguracji wszystkiego po stronie GTM.

Kolejność push-y ma znaczenie

Klasyczny błąd przy implementacji e-commerce: ktoś robi add_to_cart i potem view_item w tym samym requeście, używając tych samych danych w obiekcie ecommerce. GA4 widzi pomieszane wartości, items się dublują, raporty wariują. Rozwiązanie to wzorzec reset-then-push:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });  // reset
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: { currency: 'PLN', items: [...] }
});

Generator powyżej automatycznie dodaje reset przed eventami e-commerce — w wygenerowanym snippet zobaczysz dwa push() jeden pod drugim. Pierwszy wyczyszcza ecommerce, drugi wpycha nowe dane. To jest oficjalny wzorzec rekomendowany przez Google w docs GA4.

Jak zweryfikować że event leci poprawnie

Trzy poziomy weryfikacji, w kolejności od najszybszego do najrzetelniejszego:

1. Console przeglądarki — otwierasz DevTools, w konsoli wpisujesz window.dataLayer i widzisz całą historię push-y. Jeśli twój event tam jest — z poprawnymi danymi — krok pierwszy zaliczony.
2. Google Tag Assistant (tagassistant.google.com) — chrome extension który pokazuje wszystkie tagi GTM odpalone na stronie, jakie eventy odebrały, jakie dane wysłały do GA4. Jest debugger który widzi cały flow w realnym czasie. To minimum dla każdego deploymentu zmian w trackingu.
3. GA4 DebugView — w panelu GA4 → Configure → DebugView. Pokazuje eventy w 30-sekundowym oknie — przydatne, by potwierdzić że event nie tylko wystartował z GTM, ale też dotarł do GA4 i został poprawnie sparsowany. To jest źródło prawdy, bo to co widzisz tu, to rzeczywista postać eventu w bazie GA4.

Najczęstsze błędy w dataLayer

Z naszej praktyki audytów najczęściej powtarzające się problemy:

• Brak reset-u ecommerce: null — dane między eventami się mieszają. Symptomem jest to, że purchase zawiera items z poprzedniego view_item, a value się nie zgadza.
• transaction_id duplikuje się — GA4 odrzuca duplikaty (legalnie, żeby uniknąć podwójnego liczenia konwersji). Często zdarza się przy refresh-u thank-you page przez usera. Rozwiązanie: ustaw flagę w sessionStorage że event już się odpalił, na refreshu nie odpalaj.
• Złe nazwy parametrów — GA4 ma sztywne nazwy: item_id, nie id; item_name, nie name; price, nie cena. Generator powyżej używa poprawnych nazw automatycznie.
• price jako string zamiast number — często shop wypluwa cenę z waluty `"299.00 PLN"` jako string. GA4 wymaga number. W generatorze pole price jest typu number, więc problem nie wystąpi, ale w pełnej integracji warto zrobić parseFloat().
• Event odpala się przed załadowaniem GTM — jeśli twój dataLayer.push wyląduje w HTML przed snippetem GTM, GTM nie zarejestruje pushy. Snippet GTM musi być w <head>, twoje pushy mogą być wszędzie w body lub w handler-ach.
• Mieszanie GA4 ze starym Universal Analytics — UA zniknął w lipcu 2023, ale pozostały starocie w panelach GTM (zmienna `UA-XXXX-1`, tag „GA Pageview"). Wszystkie te tagi nie wysyłają nigdzie danych. Sprzątanie to 1 godzina pracy.

Najczęstsze pytania

Co dalej

Jeśli generator dał ci gotowy snippet i wiesz gdzie wkleić — gotowe, sprawdź w Tag Assistant czy event leci. Jeśli potrzebujesz wdrożenia kompletnego e-commerce trackingu (purchase + add_to_cart + view_item + view_item_list + begin_checkout dla całego shop-a, z reset-em między eventami i obsługą edge case-ów), opisz potrzebę w briefie. Pełna integracja GA4 + GTM dla WooCommerce to typowo 2-5 dni pracy, koszt 4 000-8 000 zł flat zależnie od liczby customów.

Możesz też zobaczyć powiązane materiały: dlaczego GA4 nie zbiera danych, checklist konwersji Google Ads, wdrożenie GTM w Warszawie, lub od razu przejdź do briefu.