Developer workspace

dataLayer Generator for GTM

Generate ready-to-copy dataLayer code for GTM: GA4 ecommerce, custom events, forms and SHA256-hashed user data.

  • 4 implementation modules
  • Ready-to-copy JavaScript
  • Runs locally in the browser
Verified June 23, 2026 · GA4 rules and scope

purchase requires transaction_id and items; each item needs item_id or item_name. Ecommerce pushes should clear previous data with ecommerce: null. Enhanced conversions hash email (lowercase, trim) and phone (E.164) with SHA256.

What is dataLayer?

dataLayer is a JavaScript array used to pass data from your site to Google Tag Manager. It lets GTM "know" what is happening on the page.

How does it work?

When a user adds a product to the cart, your site "tells" GTM:

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

GTM receives this data and can send it to GA4, Google Ads, Facebook Pixel and other tools — without changing your site code!

How to use the generator?

1 Select event type
2 Fill in product data
3 Add more products (optional)
4 Copy the generated code

Produkty

Produkt #1

Wygenerowany kod

Custom events let you track any user interactions — clicks, scrolling, video playback, file downloads, etc.

Parametry eventu

Wygenerowany kod

Form Tracking allows you to measure user interactions with your forms - start of completion, validation errors and submission.

Wygenerowany kod

User Data Layer lets you pass logged-in user information to GTM. Useful for personalization and conversion tracking.

GDPR notice: Do not pass personal data (email, phone) without user consent. Use hashed values or anonymous identifiers.
Enhanced Conversions (hashed data)

Data is SHA256-hashed on the client side before being sent to Google Ads.

Will be SHA256-hashed
Format: +48XXXXXXXXX

Wygenerowany kod

Przewodnik po dataLayer

Everything you need to know about implementing dataLayer for GTM and GA4.

dataLayer initialization

Add this code before the GTM snippet in the<head> section:

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

GA4 Ecommerce Events

Full list of GA4 ecommerce events:

Event When to send Required parameters
view_item_list Product list (category, search) items[]
select_item Product click on list items[]
view_item Product page items[], currency, value
add_to_cart Add to cart items[], currency, value
remove_from_cart Remove from cart items[], currency, value
view_cart Cart view items[], currency, value
begin_checkout Checkout start items[], currency, value
add_shipping_info Shipping selection items[], currency, value, shipping_tier
add_payment_info Payment selection items[], currency, value, payment_type
purchase Purchase confirmation transaction_id, items[], currency, value
refund Return of order transaction_id

Item object structure

Each product in the items[] array should include:

Parameter Type Required Description
item_id string YES SKU / product ID
item_name string YES Product name
price number NO Unit price
quantity number NO Quantity
item_brand string NO Brand
item_category string NO Main category
item_category2-5 string NO Subcategories
item_variant string NO Variant (color, size)
discount number NO Discount amount
index number NO List position

Sources and methodology

Original editorial generator. Code is built locally in your browser. Last verified: June 23, 2026.

Best practices

  • Always clear ecommerce: Before each event call dataLayer.push({ ecommerce: null })
  • Use consistent IDs: item_id should be the same across all events
  • Prices excl. VAT: Pass net prices; add VAT as tax in purchase
  • Test in Preview: Always verify events in GTM Preview Mode before publishing
  • Debug in console: console.log(dataLayer) shows all pushes