Uitgebreide gids over de data layer in Google Tag Manager
Geschreven door
Uliana Lesiv
Google Tag Manager (GTM) is een geweldige tool om de analytics en tracking van uw website naar een hoger niveau te tillen. En de data layer is een van de functies die helpt om tracking naar het volgende niveau te brengen.
Een data layer in GTM is een JavaScript-object dat details verzamelt over gebruikersinteracties op uw website. Met de hulp hiervan kunt u vrijwel elke gegevens verzamelen, van productweergaven tot het besturingssysteem van de gebruiker. Het gebruik van data layers in GTM stelt u in staat om gerichtere trackingtags en triggers te configureren, wat zorgt voor rijkere inzichten in gebruikersgedrag en een solide basis legt voor robuuste klantdata-analyse.
Daarom hebben we een uitgebreide gids over de data layer gemaakt, die veel aspecten van de implementatie en het gebruik ervan in Google Tag Manager behandelt. We leggen uit wat een data layer is, de toepassingen ervan, de implementatie van de data layer op de website, hoe u een data layer in Tag Manager maakt, de configuratie test, en veelvoorkomende fouten bij het instellen.
Laten we beginnen!
Het verzamelen van de juiste gegevens is slechts de helft van het werk
Vul uw GTM data layer aan met server-side tracking op Stape om de betrouwbaarheid van eventlevering te verbeteren.
Wat is de data layer in Tag Manager?
De GTM data layer is een JavaScript-object dat wordt gebruikt om data door te geven aan tags. Hiermee kunt u events of variabelen overdragen en triggers instellen op basis van specifieke variabelewaarden. De data layer wordt zowel in Google Tag Manager als in gtag.js gebruikt.
De data layer is een tussenschakel tussen uw website en Google Tag Manager en functioneert als een hub om gestructureerde data voor uw container op te slaan.
Toepassingen van de data layer
U moet een data layer maken als u het volgende wilt:
- Betrouwbare tracking instellen. Zonder data layer haalt u gegevens rechtstreeks uit het HTML DOM (de standaard die wordt gebruikt om HTML-elementen op uw website toe te voegen, op te halen, te wijzigen of te verwijderen) en stuurt u de gegevens vervolgens rechtstreeks naar de GTM-container. Het probleem is dat het HTML DOM kan veranderen, waardoor tags niet meer afgaan en gegevensverzameling stopt.
Met de data layer heeft u dit probleem niet, omdat de GTM-container gegevens haalt uit de data layer van de pagina, die veel stabieler is dan het HTML DOM. De gegevensregistratie stopt alleen als iemand de data layer van de pagina verbreekt.
- Tag-gegevens verrijken onder specifieke voorwaarden. Stel dat u gegevens over de waarde van het aankoopevent alleen wilt versturen als de gebruiker meer dan $50 heeft betaald. In plaats van te zoeken tussen verspreide variabelen, transactiegegevens, paginacategorieën en andere signalen op uw pagina, zorgt het gebruik van een data layer gevuld met relevante variabelen en hun waarden (in ons geval, aankoopwaarde > $50) ervoor dat de benodigde gegevens direct beschikbaar zijn wanneer uw tags ze nodig hebben.
Hoe werkt de data layer?
U kunt specificeren welke gegevens u precies in deze laag wilt opslaan. Er zijn twee methoden om de data layer te maken en te vullen met de benodigde parameters om bij te houden, die we zullen bespreken in de volgende sectie.
GTM leest en haalt de benodigde waarden uit de data layer en stuurt ze naar analysetools zoals Google Analytics, Google Ads, Facebook Pixel, enz.
Syntaxis en voorbeelden van de data layer
In Google Tag Manager is de dataLayer een array, zoals aangegeven door de "[ ]", en bevat deze een object, weergegeven door de "{ }" zoals getoond in het onderstaande script:
dataLayer = [{}];De elementen binnen een data layer worden variabelen genoemd en zijn opgemaakt als 'key' : 'value'-paren (geplaatst in "{ }").
GTM gebruikt een data layer-variabele genaamd "event", die ook wordt gebruikt door JavaScript event listeners om tags te activeren wanneer een gebruiker interactie heeft met elementen op een website. Dus, op basis van het onderstaande voorbeeld, is 'event' de 'key' en 'register' de 'value'.
dataLayer = [{'event' : 'register' }];Voor variabelen is de syntaxis hetzelfde als bij events. In het onderstaande voorbeeld nemen we het gewenste land voor tracking - 'country' ('variable_name') is de 'key' en 'united states' is de 'value' ('variable_value').
dataLayer = [{'country' : 'united states' }];De dataLayer initialiseren
Er zijn twee methoden voor de implementatie van de data layer: declaratie en push van de data layer. We beschrijven hoe u beide methoden kunt gebruiken, maar u kunt ook direct naar degene springen die het beste bij u past.
Kort gezegd raden we aan om dataLayer.push te gebruiken, omdat dit populairder is en aan de meeste behoeften voldoet. Bovendien is deze methode veiliger in gebruik, omdat deze geen verstoring veroorzaakt in events in Google Tag Manager, terwijl een onjuiste instelling van data layer-declaraties gemakkelijk problemen kan veroorzaken.
| Data Layer-declaratie | dataLayer.push | |
| Werkt het beste voor | Waarden die vóór het laden van de pagina nodig zijn | Informatie naar de dataLayer pushen voor events anders dan het pageload-event |
| Push-moment van de data layer-variabele | Vóór runtime | Tijdens runtime |
| Plaatsing in de code | Boven het Google Tag Manager-containersnippet | Overal in de code |
| Ga naar Data Layer-declaratie | Ga naar dataLayer.push |
Methode 1: Data layer-declaratie
Om deze methode te gebruiken, moet het data layer-snippet boven het Google Tag Manager-containersnippet worden geplaatst. In dit geval wordt de data layer geïnitialiseerd voordat Tag Manager wordt geïnitialiseerd.
Over het algemeen is dit geen populaire of aanbevolen manier om een data layer te maken, maar het werkt als u datapunten wilt creëren voordat de GTM-container laadt en deze datapunten wilt gebruiken voor tagbeheer.
Verander 'variable_name': 'variable_value' in de benodigde parameters en plak de code op de websitepagina vóór het GTM-snippet.
dataLayer = [{
'variable_name': 'variable_value'
}];
...
Let op: gebruik de "="-operator om de waarden van het object toe te wijzen aan de dataLayer-array.
Methode 2: dataLayer.push
De push-methode voegt dynamisch objectelementen toe aan de data layer. In tegenstelling tot de data layer-declaratiemethode, kunt u met push-gegevens het data layer-snippet overal in de code plaatsen.
Het kan wat verwarrend zijn, maar 'dataLayer' is ook een JavaScript-variabele die toegankelijk is voor elke functie die interactie heeft met het window-object. Om conflicten te vermijden met een andere lokale JavaScript-array met de naam 'dataLayer', is het daarom het beste om het voorvoegsel 'window.dataLayer' te gebruiken.
U heeft dus de onderstaande code nodig voor de dataLayer.push-methode. In plaats van 'variable_name' : 'variable_value', voegt u de vereiste parameters toe.
window.datalayer = window.dataLayer || [];
window.dataLayer.push({
'variable_name' : 'variable_value'
});In het bovenstaande codeblok wordt de dataLayer ingesteld op een bestaande dataLayer als deze al bestaat; anders wordt een nieuwe dataLayer gemaakt als een lege array. De || (OF)-operator zorgt ervoor dat de toewijzing plaatsvindt als aan een van deze voorwaarden wordt voldaan.
Op deze manier voorkomt u het maken van meerdere declaraties, die de dataLayer kunnen overschrijven.
Voorbeeld en documentatie over de eCommerce data layer
Voor veel eCommerce-CMS'en zijn er plug-ins (waaronder plug-ins van Stape) die een data layer voor standaard eCommerce-events voor u kunnen maken. In sommige gevallen is dit misschien niet voldoende. Bijvoorbeeld als u extra events of extra gegevens in data layer-events nodig heeft. Of als u een volledig aangepast platform gebruikt.
In dat geval moet u contact opnemen met uw ontwikkelaars om data layer-events te maken met de payload die u nodig heeft. Dit is voor ontwikkelaars meestal een vrij eenvoudige taak die niet veel tijd kost, hoewel dit afhangt van de architectuur van uw site of platform.
| Hier is een voorbeeld van zo'n documentatie voor ontwikkelaars die u kunt kopiëren, aanpassen aan uw behoeften en doorgeven aan uw ontwikkelaars. |
Enkele nuttige richtlijnen:
- Maak een kopie van het document, verwijder de events die u niet nodig heeft en/of voeg de events toe die u wel nodig heeft, samen met een voorbeeld-payload.
- Gebruik hetzelfde gegevensformaat in alle events. Het is het beste om het GA4-formaat te volgen.
- Als het geen voor de hand liggend event is (bijv. bekeken item of toegevoegd aan winkelwagen), beschrijf dan in detail wanneer het moet worden geactiveerd. Dit voorkomt onnodig heen-en-weer gemail tussen u en de ontwikkelaars.
- Gebruikersgegevens kunnen in vrijwel alle marketingplatformen worden gebruikt; het is belangrijk dat deze beschikbaar zijn in de data layer - het gebruik ervan zal uw trackingresultaten aanzienlijk verbeteren.
- Probeer data layer-events te vermijden die worden verzonden vóórdat de gebruiker wordt doorgestuurd naar een andere pagina. Dit kan leiden tot verlies van deze gegevens, omdat de events mogelijk niet daadwerkelijk worden verzonden vóór de doorverwijzing. Als u bijvoorbeeld een Lead-event wilt versturen nadat een gebruiker een formulier heeft ingediend, en de gebruiker vervolgens naar de bedankpagina wordt gestuurd - dan is het de beste aanpak om dit event in de data layer op de bedankpagina te versturen, in plaats van wanneer de gebruiker het formulier daadwerkelijk indient.
- Als u al enkele data layer-events op uw site heeft, is het beter om aangepaste namen te gebruiken voor nieuwe data layer-events en oude events niet te wijzigen, om de bestaande tracking tijdens dit proces niet te beïnvloeden. Dat wil zeggen, als u bijvoorbeeld al add_to_cart in de data layer heeft, is het beter om een nieuw event add_to_cart_v2 te maken in plaats van het oude te wijzigen en vervolgens de tags opnieuw te configureren naar de nieuwe events.
- Controleer de data layer altijd nadat de ontwikkelaars dit hebben geïmplementeerd. Soms kunnen zelfs kleine fouten in de payload trackingproblemen veroorzaken.
Belangrijke eCommerce data layer-componenten voor analytics en tracking
1. Product-/itemgegevens
- item_id - unieke productidentificatie (SKU of database-ID)
- item_name - productnaam
- item_category - productcategorie (kan genest zijn: item_category2, item_category3)
- item_brand - merknaam
- price - stuksprijs
- quantity - aantal eenheden
2. Transactiegegevens
- transaction_id - unieke bestel-ID (cruciaal voor deduplicatie)
- value - totale transactiewaarde
- currency - ISO 4217-valutacode (bijv. USD, EUR)
- tax - belastingbedrag
- shipping - verzendkosten
- coupon - toegepaste kortingscode
3. Gebruikersgegevens
- user_id - interne gebruikersidentificatie
- email - gehasht e-mailadres van de gebruiker (voor enhanced conversions)
4. Eventspecifieke parameters
| Event | Wanneer activeren |
| view_item_list | Productoverzicht of categoriepagina |
| view_item | Productdetailpagina |
| add_to_cart | Item toegevoegd aan winkelwagen |
| begin_checkout | Afrekenen gestart |
| add_payment_info | Betaalmethode geselecteerd |
| purchase | Bestelling bevestigd |
Hoe maakt u een data layer in Tag Manager?
U kunt op verschillende manieren toegang krijgen tot de elementen van uw data layer-array in Google Tag Manager. Om de gegevens binnen Google Tag Manager te benutten, wijst u deze toe aan een variabele of gebruikt u deze als een event-trigger. Deze variabelen of events kunnen vervolgens worden opgenomen in uw tags, triggers of andere variabelen.
Hieronder geven we drie gebruikscasussen van de data layer en hun configuratie in GTM:
Use case 1: Data layer-variabelen als datapunten
Codevoorbeeld
Als voorbeeld nemen we de aankoopwaarde van oranje T-shirts.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘product_name’ : ‘orange t-shirt’,
'purchase_value' : '5',
‘purchase_currency’ : ‘EUR’
});GTM-configuratie
1. Voor de variabeleconfiguratie gaat u in de GTM-container naar Variabelen → klik op "New" bij Door gebruiker gedefinieerde variabelen.
2. Kies "Data Layer Variable" als variabeletype.
3. Voeg de naam van de data layer-variabele toe en klik op "Save".
Let op: het veld is hoofdlettergevoelig, dus zorg ervoor dat de naam overeenkomt met de waardenaam in de code die u aan de pagina heeft toegevoegd. In ons geval is dat "purchase_value".
Use case 2: Data layer om events te activeren
Codevoorbeeld
Als codevoorbeeld nemen we de dataLayer-variabele die het "register"-event activeert wanneer iemand de vereiste gegevens voor registratie invult en op "Register" klikt.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'register'
});GTM-configuratie
1. Ga naar de Google Tag Manager Triggers → klik op "New."
2. Kies het triggertype "Custom Event".
3. Voeg bij "Event name" de naam toe op dezelfde manier als de waardenaam in de code, aangezien dit veld hoofdlettergevoelig is. Klik op "Save".
Use case 3: Data layer-variabele als variabelen en event-triggers
Codevoorbeeld
Het onderstaande voorbeeld van de data layer-variabele activeert aankoopevents en creëert aankoopinformatie.
dataLayer = [{
'event': 'purchase',
'purchase_info': {
'purchase_amount': 5,
'purchase_curency': 'EUR'
}
}];GTM-configuratie
U kunt variabelen uit de code zowel als variabelen als als event-triggers gebruiken in Google Tag Manager. Bekijk het configuratieproces van de vorige stappen voor variabelen en events.
Hoe stuurt u de parameters van de data layer van client- naar server-side GTM?
De data layer bestaat niet in server-side Google Tag Manager zoals in client-side GTM.
sGTM heeft echter een object genaamd Client dat HTTP-verzoeken van web-GTM controleert. Als het verzoek specifieke gegevens bevat, zet de Client de verzoekgegevens om in event-gegevens. Tags worden ook gebruikt om de gegevens van de web-GTM-container naar de GTM-server te sturen.
Om datapunten in de server-GTM-container in te vullen, moet u de methode kiezen die u gebruikt om gegevens van web naar server-GTM te sturen; onder de populaire methoden zijn:
Google Analytics 4 gebruiken
Deze methode is bijzonder effectief als u server-side tracking instelt voor Google Ads of Floodlight, aangezien beide uitsluitend op GA4-tags vertrouwen.
1. Maak in web-GTM een tag aan met de configuratie "Google Analytics: GA4 Event".
2. U vindt vooraf gedefinieerde velden voor deze gegevens, en u kunt data layer-variabelen afzonderlijk aan elke parameter toewijzen.
Data Tag/Data Client gebruiken
Het belangrijkste voordeel van het gebruik van Data Tag/Data Client is dat het automatisch de data layer en andere algemene gegevens van de web naar de GTM-server stuurt.
1. Maak een nieuwe tag in de web-GTM-container en kies "Data Tag" als tagconfiguratie.
Let op: u moet de Data Client toevoegen aan de GTM-galerij.
2. Schakel in de tagconfiguratie de twee selectievakjes "Send common data" en "Send all from DataLayer" in.
Het systeem zal automatisch de gegevens in de web-GTM parseren en alle beschikbare informatie doorsturen naar de server-GTM.
| Bekijk onze blogpost over het maken van een data layer voor server-side Google Tag Manager voor meer informatie over het configuratieproces. |
Data layer-variabele pushen naar Google Analytics 4
Let op: hieronder beschrijven we hoe u Google Tag instelt om gegevens te versturen; als u al een Google Tag heeft geconfigureerd, hoeft u geen nieuwe tag te maken. Sla de onderstaande stappen gewoon over en ga direct naar het gedeelte over het maken van een aangepaste dimensie.
In dat geval hoeft u alleen parameters toe te voegen zoals in de code voor de data layer in het gedeelte "Shared event settings."
Google Tag configureren in GTM
1. Klik in het gedeelte "Tags" van GTM op "New" en kies "Google Tag" als tagtype.
2. Voeg uw GA4 Measurement ID toe, en vermeld in het gedeelte "Shared event settings" de parameters die u aan uw code heeft toegevoegd.
3. Kies als trigger "Page View – All Pages".
Aangepaste dimensie maken in GA4
Er is een lijst met standaardparameters. Als de gegevens die u wilt bijhouden met behulp van de data layer niet voorkomen in de aanbevolen events van Google Analytics, moet u deze handmatig toevoegen aan uw GA4-account als aangepaste dimensies. Na toevoeging verschijnt het in GA4-rapporten.
1. Klik in het Google Analytics-account op "Admin" → "Custom definitions."
2. Klik op "Create custom dimension" en vul de vereiste parameter in:
- Dimension name - de naam die u in de rapporten wilt zien.
- Scope - kies een event-, gebruikers- of itemreikwijdte.
- Event parameter - voeg de naam van de variabele of het event toe zoals gespecificeerd in het data layer-snippet (let op: de gegevens in dit veld zijn hoofdlettergevoelig).
Klik op "Save".
De configuratie van de data layer testen
| Krijg een betere GTM-preview en opgemaakte serververzoeken voor eenvoudigere inspectie voor uw klanten of uw eigen grote GTM-container dankzij Stape GTM Helper. |
GTM-foutopsporingsmodus
Om te controleren of Google Tag Manager de variabele opvangt, moet u enkele eenvoudige stappen doorlopen die vergelijkbaar zijn met het reguliere debuggen in GTM.
1. Klik op "Preview" en voeg de URL van de website toe die u aan het debuggen bent.
2. Schakel over naar het tabblad "Variable"-gedeelte, en als alles werkt, ziet u de benodigde gegevens in dit tabblad.
Als u problemen heeft met de foutopsporingsmodus in GTM, bekijk dan onze gidsen:
Google Analytics 4
Om te controleren of Google Analytics de gegevens vastlegt, gaat u naar "Admin" → DebugView.
Problemen met de data layer oplossen
Probleem 1: Data layer push werkt niet
Als u ziet dat variabelen of events niet worden gepusht, gebruikt u hoogstwaarschijnlijk niet de juiste hoofdlettergebruik voor objectnamen of bent u aanhalingstekens vergeten.
Oplossing: juist hoofdlettergebruik voor objectnamen en aanhalingstekens
- Controleer of "dataLayer" in camelCase staat.
Goed voorbeeld:
dataLayer.push({'variable_name': 'variable_value'});Slecht voorbeeld:
datalayer.push({'variable_name': 'variable_value'});- Zorg ervoor dat alle variabelenamen tussen aanhalingstekens staan.
Goed voorbeeld:
dataLayer.push({'variable_name': 'variable_value'});Slecht voorbeeld:
dataLayer.push({variable_name': 'variable_value'});Probleem 2: Tags gaan niet af
Als u tags niet op alle benodigde locaties op de website kunt activeren, controleer dan de variabelenamen op verschillende pagina's.
Oplossing: consistente variabelenamen
De meest voorkomende fout is inconsistent hoofdlettergebruik in de variabelenamen op verschillende pagina's, dus u moet de namen controleren.
Goed voorbeeld:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable_name': 'variable_value'});Slecht voorbeeld:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable Name': 'variable_value'});Samenvatting
De GTM datalayer is een cruciaal onderdeel van GTM. Hiermee kunnen we de interacties van gebruikers met uw website vastleggen, en tegelijkertijd aanvullende gegevens over de interactie of de context ervan verstrekken. Het gebruik van de data layer is essentieel als u een betere datastructuur wilt creëren.
Het concept van een data layer is behoorlijk uitdagend om te implementeren, en ontwikkelaars zullen hoogstwaarschijnlijk nodig zijn om een complexe trackinginfrastructuur op te bouwen.
Hier is een korte samenvatting:
- We raden aan om de dataLayer.push-methode te gebruiken om de data layer te implementeren.
- Na implementatie van de data layer kunt u de data layer gebruiken als datapunten, event-triggers, of als beide.
- Als u server-side tracking gebruikt, stuur dan de parameters van de data layer van de client- naar de server-side GTM-container.
- Controleer de instelling altijd in de GTM-foutopsporingsmodus.
- Voeg aangepaste dimensies in GA4 toe (als u deze tool gebruikt) om de gegevens in GA4-rapporten te zien.
Wilt u aan de slag gaan aan de serverzijde?
Gratis proberen
Opmerkingen