Generator dataLayer. Twórz kod dla GTM i GA4 Ecommerce.

Generator dataLayer dla GTM

Generuj gotowy kod dataLayer dla Google Tag Manager. Szablony dla GA4 Ecommerce, custom events i śledzenia formularzy. Skopiuj kod i wklej na swoją stronę.

Czym jest dataLayer?

dataLayer to tablica JavaScript, która służy do przekazywania danych ze strony do Google Tag Manager. Dzięki niej GTM "wie", co się dzieje na stronie.

Jak to działa?

Gdy użytkownik dodaje produkt do koszyka, Twoja strona "mówi" GTM:

dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    items: [{
      item_name: 'Buty sportowe',
      item_id: 'SKU123',
      price: 299.00
    }]
  }
});

GTM odbiera te dane i może je wysłać do GA4, Google Ads, Facebook Pixel i innych narzędzi - bez zmian w kodzie strony!

Jak korzystać z generatora?

1 Wybierz typ eventu
2 Wypełnij dane produktów
3 Dodaj więcej produktów (opcjonalnie)
4 Skopiuj wygenerowany kod

Produkty

Produkt #1

Wygenerowany kod

Custom events pozwalają śledzić dowolne interakcje użytkowników - kliknięcia, scrollowanie, odtwarzanie wideo, pobieranie plików itp.

Parametry eventu

Wygenerowany kod

Śledzenie formularzy pozwala mierzyć interakcje użytkowników z formularzami - rozpoczęcie wypełniania, błędy walidacji i wysłanie.

Wygenerowany kod

User Data Layer pozwala przekazywać informacje o zalogowanym użytkowniku do GTM. Przydatne do personalizacji i śledzenia konwersji.

Uwaga RODO: Nie przekazuj danych osobowych (email, telefon) bez zgody użytkownika. Używaj zahashowanych wartości lub anonimowych identyfikatorów.
Enhanced Conversions (zahashowane dane)

Dane są hashowane SHA256 po stronie klienta przed wysłaniem do Google Ads.

Zostanie zahashowany SHA256
Format: +48XXXXXXXXX

Wygenerowany kod

Przewodnik po dataLayer

Wszystko co musisz wiedzieć o implementacji dataLayer dla GTM i GA4.

Inicjalizacja dataLayer

Dodaj ten kod przed snippetem GTM w sekcji <head>:

<script>
  window.dataLayer = window.dataLayer || [];
</script>

GA4 Ecommerce Events

Pełna lista eventów ecommerce dla GA4:

Event Kiedy wysyłać Wymagane parametry
view_item_list Lista produktów (kategoria, wyszukiwanie) items[]
select_item Kliknięcie w produkt na liście items[]
view_item Strona produktu items[], currency, value
add_to_cart Dodanie do koszyka items[], currency, value
remove_from_cart Usunięcie z koszyka items[], currency, value
view_cart Widok koszyka items[], currency, value
begin_checkout Rozpoczęcie checkoutu items[], currency, value
add_shipping_info Wybór dostawy items[], shipping_tier
add_payment_info Wybór płatności items[], payment_type
purchase Potwierdzenie zakupu transaction_id, items[], currency, value
refund Zwrot zamówienia transaction_id

Struktura obiektu item

Każdy produkt w tablicy items[] powinien zawierać:

Parametr Typ Wymagany Opis
item_id string TAK SKU / ID produktu
item_name string TAK Nazwa produktu
price number NIE Cena jednostkowa
quantity number NIE Ilość
item_brand string NIE Marka
item_category string NIE Kategoria główna
item_category2-5 string NIE Podkategorie
item_variant string NIE Wariant (kolor, rozmiar)
discount number NIE Kwota rabatu
index number NIE Pozycja na liście

Best Practices

  • Zawsze czyść ecommerce: Przed każdym eventem wywołaj dataLayer.push({ ecommerce: null })
  • Używaj konsekwentnych ID: item_id powinien być taki sam we wszystkich eventach
  • Ceny bez VAT: Przekazuj ceny netto, VAT dodawaj jako tax w purchase
  • Testuj w Preview: Zawsze sprawdzaj eventy w GTM Preview Mode przed publikacją
  • Debuguj w konsoli: console.log(dataLayer) pokaże wszystkie pushe