GA4 vanuit web-GTM via je servercontainer sturen

Sla deze sectie over als je al een GA4-property hebt. Je hebt alleen de Measurement ID ervan nodig.

1. 1 Open analytics.google.com, ga naar Admin en klik op Create, dan Property.
2. 2 Vul een propertynaam, je rapportagetijdzone en valuta in en rond daarna de bedrijfsgegevens af.
3. 3 Als je gevraagd wordt data te gaan verzamelen, kies je Web, vul je de URL van je website en een streamnaam in en klik je op Create stream.
4. 4 Kopieer de Measurement ID uit de streamdetails. Die ziet eruit als G-XXXXXXXXXX.

De Google-tag laadt GA4 op de pagina en verstuurt de page_view. Eén instelling, server_container_url, bepaalt waar zijn hits heen gaan.

1. 1 Ga in je webcontainer naar Tags, klik op New en kies Google tag als tagtype.
2. 2 Plak je Measurement ID in Tag ID.
3. 3 Voeg onder Configuration settings een rij toe met de parameter en waarde hieronder.
4. 4 Zet de trigger op Initialization - All Pages (of All Pages), geef de tag een naam en sla op.

Configuration parameter:  server_container_url
Value:                    https://k7q2x.example.com

Gebruik precies de URL van je servercontainer: https://, geen pad en geen slash aan het eind. Initialization - All Pages vuurt vóór andere tags, dus events die vroeg vuren weten al waar ze hun data heen moeten sturen.

Paginaweergaven en events van enhanced measurement (scrolls, uitgaande klikken, zoeken op de site, bestandsdownloads) komen automatisch uit de Google-tag. Je eigen events, zoals aanmeldingen en aankopen, hebben een Google Analytics: GA4 Event-tag nodig. Hergebruik de sign_up-trigger uit les 1:

1. 1 Maak een tag van het type Google Analytics: GA4 Event.
2. 2 Zet Measurement ID op G-XXXXXXXXXX (jouw ID). Het event gaat via de Google-tag met dezelfde ID, inclusief de server-URL daarvan.
3. 3 Zet Event Name op sign_up. Voeg onder Event Parameters method toe met de Data Layer Variable die je eerder hebt gemaakt.
4. 4 Kies de Custom Event-trigger sign_up en sla op.

Voor e-commerce pusht je site de aankoopgegevens in het ecommerce-object dat GA4 verwacht. Maak eerst het vorige ecommerce-object leeg, zoals in dit voorbeeld.

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 }]
  }
});

1. 1 Maak een Custom Event-trigger voor purchase.
2. 2 Maak een Google Analytics: GA4 Event-tag met Event Name purchase.
3. 3 Open More Settings, dan Ecommerce, vink Send Ecommerce data aan en kies Data Layer als Data source.
4. 4 Koppel de purchase-trigger en sla op.

Zonder server-URL stuurt GA4 hits naar hosts van Google zoals region1.google-analytics.com of analytics.google.com. Met een server-URL gaan dezelfde hits naar je subdomein op het pad /g/collect:

https://k7q2x.example.com/g/collect?v=2&tid=G-XXXXXXXXXX&en=page_view&...

• Het verzoek blijft op je eigen domein, dus voor de browser is het first-party.
• Minder blockers matchen erop, omdat het niet meer naar een bekend analyticsdomein gaat. Blockers die op het pad /g/collect matchen, kunnen het nog wel tegenhouden: Request Proxy in les 8 vangt dat af.
• De servercontainer ziet elke GA4-hit voordat GA4 hem ziet, en daar kun je later data filteren of verrijken.

1. 1 Klik op Preview in de webcontainer en maak verbinding met je site. De Google-tag hoort te vuren bij Initialization en de GA4 Event-tags bij hun events.
2. 2 Open in het venster van de site DevTools, ga naar het tabblad Network en filter op collect.
3. 3 Herlaad de pagina. Je hoort verzoeken naar https://k7q2x.example.com/g/collect te zien met status 200 of 204, en geen naar google-analytics.com of analytics.google.com.
4. 4 Ziet alles er goed uit, klik dan op Submit en publiceer de webcontainer.

• Er staat geen hardgecodeerde gtag.js-snippet voor dezelfde ID meer op de site.
• De Google-tag heeft server_container_url op je subdomein staan.
• /g/collect-verzoeken gaan naar k7q2x.example.com.
• De Preview van de servercontainer toont binnenkomende verzoeken (de les over debuggen legt uit hoe je die leest).