GA4 e-commerce van begin tot eind via je servercontainer

GA4 vult zijn e-commercerapporten alleen met events die de aanbevolen namen hebben. Eigen namen zoals productView of checkout_step_2 worden opgeslagen, maar verschijnen nooit als productweergaven of omzet. Gebruik precies deze namen, in kleine letters:

• view_item_list en select_item: een bezoeker ziet een productlijst (categoriepagina, zoekresultaten) en klikt op een product daarin.
• view_item: een productdetailpagina.
• add_to_cart, remove_from_cart en view_cart: acties in de winkelwagen.
• begin_checkout, add_shipping_info en add_payment_info: de stappen van de checkout.
• purchase: de afgeronde bestelling.
• refund: een volledige of gedeeltelijke terugbetaling, meestal vanuit je backend verstuurd in plaats van vanuit de browser.
• add_to_wishlist, view_promotion en select_promotion: verlanglijstjes en interne promoties zoals banners. Voeg ze aan de trigger toe als je ze gebruikt.

Elk event behalve een volledige refund bevat een items-array, en elk item heeft minstens item_id of item_name nodig. Heeft een event een value, dan heeft het ook currency nodig (bijvoorbeeld EUR), anders kan GA4 het niet als omzet verwerken. purchase en refund hebben ook een transaction_id nodig.

Elke push heeft twee delen: eerst ecommerce: null, dan het event met een nieuw ecommerce-object. De dataLayer voegt objecten samen, dus zonder die reset kunnen de items van het vorige event in het volgende terechtkomen, bijvoorbeeld een product uit view_item dat in add_to_cart belandt.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'EUR',
    value: 129.90,
    items: [{ item_id: 'SKU-1', item_name: 'Shoes', item_brand: 'Acme', item_category: 'Footwear', price: 129.90, quantity: 1 }]
  }
});

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 129.90,
    items: [{ item_id: 'SKU-1', item_name: 'Shoes', price: 129.90, quantity: 1 }]
  }
});

De purchase-push voegt transaction_id en de volledige orderwaarde toe. Render hem op de bedankpagina met de echte bestelgegevens uit je shop.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T-10293',
    value: 129.90,
    currency: 'EUR',
    items: [{ item_id: 'SKU-1', item_name: 'Shoes', price: 129.90, quantity: 1 }]
  }
});

In de webcontainer heb je geen tag per event nodig. Eén Google Analytics: GA4 Event-tag kan de eventnaam en de e-commercedata uit de dataLayer lezen en het event versturen dat gepusht is.

De trigger matcht elk e-commerce-event met één reguliere expressie:

^(view_item_list|select_item|view_item|add_to_cart|remove_from_cart|view_cart|begin_checkout|add_shipping_info|add_payment_info|purchase|refund)$

1. 1 Maak een trigger van het type Custom Event. Plak de reguliere expressie hierboven als eventnaam en vink Use regex matching aan.
2. 2 Maak een tag van het type Google Analytics: GA4 Event. Vul je meet-ID G-XXXXXXXXXX in (of kies je Google-tag) en zet Event Name op de ingebouwde variabele {{Event}}.
3. 3 Open onder More Settings het onderdeel Ecommerce, vink Send Ecommerce data aan en kies Data Layer als databron.
4. 4 Koppel de Custom Event-trigger, geef de tag een naam (bijvoorbeeld GA4 - ecommerce) en sla op.

De tag verstuurt alles via dezelfde Google-tag die al server_container_url op https://k7q2x.example.com heeft staan uit les 3, dus elk e-commerce-event bereikt eerst je servercontainer.

Niets. De GA4-client pakt de e-commercehits op zoals elk ander GA4-event, en de items reizen mee in de hit. De GA4-tag uit les 4, met als trigger Client Name equals GA4, stuurt ze door naar Google Analytics samen met value, currency en transaction_id.

De servercontainer blijft de juiste plek voor extra bestemmingen. Een Meta Conversions API-tag kan hetzelfde purchase-event lezen, zodat de bestelling met dezelfde data naar Meta gaat (les 7 laat zien hoe je een event_id deelt voor deduplicatie). De Google Ads-conversietag in de volgende les leest het ook.

Google Analytics dedupliceert purchase-events met dezelfde transaction_id voor data uit webstreams. Zie dat als vangnet, niet als oplossing. De gebruikelijke bron van dubbele aankopen is de bedankpagina: een bezoeker ververst hem, komt terug via de browsergeschiedenis of opent de bevestigingslink uit de e-mail, en de purchase-push draait opnieuw.

• Render de purchase-push alleen bij de eerste weergave van de bedankpagina. Houd een vlag bij op de bestelling in je shop (bijvoorbeeld tracked_at) en sla de push over als die gezet is.
• Stuur altijd een echte, unieke transaction_id. Nooit een lege string: GA4 behandelt alle aankopen met transaction_id als lege string als één transactie.
• Zet geen persoonsgegevens zoals het e-mailadres in transaction_id. Gebruik het ordernummer.
• Stuur refunds met de transaction_id van de oorspronkelijke bestelling, zodat GA4 ze kan koppelen.

Test op drie plekken, van de server naar buiten. Open Preview in beide containers en loop door de shop: bekijk een product, leg het in de winkelwagen, reken af en plaats een testbestelling.

• Web-preview: de tag GA4 - ecommerce vuurt bij elk e-commerce-event en niet bij andere.
• Server-preview: het verzoek gaat naar k7q2x.example.com, en in de eventdata zie je items met item_id, price en quantity, plus value en currency.
• Server-preview: de GA4-tag staat onder Tags Fired voor purchase.
• GA4 DebugView: de events komen binnen met hun parameters en items.
• Het rapport Ecommerce purchases in GA4 (onder Monetization): aankopen en omzet verschijnen. Dit rapport kan 24 tot 48 uur nodig hebben om zich te vullen, dus beoordeel het niet op dezelfde dag.