Zo laad je server side tagging via een pad in je website

Het product van Google blijft zich steeds maar weer doorontwikkelen. In de afgelopen tijd was het instellen van een server-side tagging omgeving het beste mogelijk via een subdomein. Hierdoor is het mogelijk om first-party cookies in te stellen die voor jouw tools benodigd zijn. Deze hebben een langere levensduur dan third-party cookies. Je verzamelt hierdoor meer gegevens en de data blijft een stuk betrouwbaarder.

Met de nieuwe maatregelen van Safari is er nóg meer nodig dan alleen het aanmaken van een eigen domein om de houdbaarheid van cookies te verlengen. Deze worden 7 dagen bewaard vanuit een subdomein met een ander IP-adres.

Verschillende mogelijkheden

Google heeft onlangs de voorkeursmethode voor het koppelen van een eigen domein aan de servercontainer van Google Tag Manager gewijzigd. In plaats van een subdomein te gebruiken (zoals sgtm.2manydots.nl) wordt nu aangeraden om hetzelfde oorsprongsdomein te gebruiken (zoals 2manydots.nl/data).

Door een eigen domein op dezelfde oorsprong voor sGTM te gebruiken, profiteer je van het belangrijkste voordeel van server-side tagging: het instellen van first-party cookies. En omdat de tagging server hetzelfde oorsprongsdomein gebruikt, hoef je geen extra instellingen te configureren om de levensduur van cookies te verlengen. Het configureren van een pad op hetzelfde domein is echter een stuk ingewikkelder dan het instellen van een subdomein.

Met deze laatste update zijn er verschillende manieren waarop je jouw server side tagging omgeving op je website in kan laden. Deze nemen we met je door.

Optie 1: Subdomein

Dit is de manier die vanaf het begin werd voorgeschoteld. Op deze manier plaats je jouw tagging server op een subdomein. Alle data wordt hierop verwerkt en door middel van een API doorgestuurd naar de gewenste services zoals Google Analytics 4 of de Facebook Conversions API.

Zorg ervoor dat het subdomein van je website anders is dan het subdomein waarop je jouw server side tagging container wil gaan draaien. Stel bijvoorbeeld dat je website bereikbaar is op www.2manydots.nl, kies dan voor je servercontainer een ander subdomein, zoals sgtm.2manydots.nl. In de onderstaande afbeelding zie je hoe dit werkt.

Optie 2: Zelfde oorsprong (pad)

Dit is de nieuwste manier van Google. In plaats van dat je een subdomein configureert, koppel je hier een pad aan de tagging server. Welk pad je hiervoor wil gebruiken bepaal je helemaal zelf. In ons geval zou dat bijvoorbeeld www.2manydots.nl/data kunnen zijn. Het maakt niet uit wat je kiest, zolang het nog maar niet wordt gebruikt in jouw website.

We helpen je er doorheen om dit zelf in te stellen, als je al een server side tagging omgeving hebt. Om dit te configureren heb je het volgende nodig:

• Een server container in Google Tag Manager
• Een tagging server
  • Gebruik je nog App Engine? Je tagging server moet nieuwer zijn dan versie 2.2.0.
• Een CDN (Cloudflare) of load balancer die het pad door kan sturen.

Stap 1: Maak een worker aan

Er zijn verschillende manieren om dit te configureren, maar wij doen het door middel van Cloudflare. Het is hier enorm makkelijk om dit te configureren door middel van een worker. Let erop dat de workers niet gratis zijn. Je mag maximaal 100K requests per dag gebruiken in het gratis abonnement.

Maak je worker aan en geef het de naam die je wenst.

Stap 2: Configureren van je worker

Het is tijd om je worker aan te maken. Wij hebben de code al voor je geschreven. Er zijn twee dingen die je moet kiezen:

1. Kies je pad. Bijvoorbeeld /data. Je past dit aan tussen de haakjes bij ‘const newPath‘.
2. Kies waar je jouw worker aan wil koppelen. Je past dit aan tussen de haakjes bij ‘const newDomain‘.
   • Optie 1: Koppelen aan de standaard Google Cloud URL. Dit zouden wij niet adviseren, aangezien je hierdoor niet je Google Tag Manager omgeving kan laden.
   • Optie 2 (Advies): Koppelen aan je subdomein URL. In ons geval is dat sgtm.2manydots.nl. Wij zouden adviseren om dit te kiezen.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
  const url = new URL(request.url);
  const { pathname, search } = url;
  // Specify the path you want to modify and the new domain
  const newPath = pathname.replace('/data/', '/');
  const newDomain = 'https://sgtm.2manydots.nl';
  const newUrl = newDomain + newPath + search;
  const response = await fetch(newUrl, request);
  
  // Return the response from the fetch request
  return response;
}

Stap 3: Trigger de worker op jouw gekozen pad

Als je de worker hebt opgeslagen is het belangrijk om de worker te triggeren op het pad dat je hebt gekozen. Dit doe je onder het tabblad ‘Triggers’ in je aangemaakte worker. Schakel de automatisch aangemaakte route uit.

Maak een nieuwe route aan. Voer hier het volgende in: www.jouwwebsiteurl.nl/gekozenpad/*

• www.jouwwebsiteurl.nl = Het subdomein waar jouw website op draait en GTM op komt te staan.
• /gekozenpad/ = Jouw eerder gekozen pad
• * = RegEx dat alles hierna wordt opgepakt.

Stap 4: Server URL in Google Tag Manager aanpassen

Pas de configuratie van je servercontainer in Google Tag Manager aan, zodat deze het pad kan herkennen en verzoeken correct kan verwerken. Heb je dit gedaan? Klik dan op de voorbeeldbutton en start een debug sessie om te kijken of het werkt. Zorg er ook voor dat je jouw variabelen aanpast, vooral als je jouw GTM-container via een subdomein inlaadt.

Hulp nodig?

Heb je alle stappen gevolgd? Dan ben je klaar! Al je data gaan nu via het (sub)domein van je website en het gekozen pad, direct naar de tagging server. Doordat de tagging server gebruikmaakt van hetzelfde domein als je website, hoef je geen extra instellingen te configureren om cookies langer te bewaren.

Mocht je er niet uitkomen, dan helpen we je graag. Ons team heeft meer dan 100 server side tagging implementaties gedaan en is niet bang van nieuwe uitdagingen. Neem een kijkje op onze server side tagging pagina, of neem contact met ons op.