dataLayer Generator for GTM
Generate ready dataLayer code for Google Tag Manager. Templates for GA4 Ecommerce, custom events and form tracking. Copy and paste code to your site.
What is 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.
How does it work?
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?
Produkty
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.
Enhanced Conversions (zahashowane dane)
Dane są hashowane SHA256 po stronie klienta przed wysłaniem do Google Ads.
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 |
Add to cart | items[], currency, value |
remove_from_cart |
Usunięcie z koszyka | items[], currency, value |
view_cart |
Cart view | items[], currency, value |
begin_checkout |
Checkout start | 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ć:
| Parameter | Type | Required | Description |
|---|---|---|---|
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_idpowinien 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