Gepubliceerd in: Google Tag Manager
Wat is de Data Layer?
Wat is de Data Layer?
De Data Layer (ook wel dataLayer of gegevenslaag) is een stukje JavaScript code die Google Tag Manager aanvullende functionaliteit kan geven. De kracht van GTM zit grotendeels in het gebruik van de Data Layer. Doordat we variabelen vanuit de website naar GTM kunnen sturen, kunnen we programmatisch data in tag’s zetten. Denk hierbij aan verkoopcijfers, product categorieën en keuzes die ergens in het orderproces worden gedaan.
Google hanteert de termen “gegevenslaag” en “Data Layer” graag door elkaar en wordt het in JavaScript als dataLayer geschreven. We gebruiken deze termen zelf ook door elkaar maar betekenen uiteindelijk hetzelfde.
Hoe werkt de dataLayer?
Als we als voorbeeld een Ecommerce website nemen waar we Ecommerce tracking voor willen instellen. Hierbij willen we informatie van de webshop via Google Tag Manager naar Analytics sturen. We kunnen hiermee bijvoorbeeld inzichtelijk maken welke producten in een winkelwagen zijn gelegd en gekocht, hoeveel dit er waren en wat de prijs daarvan was.
De Data Layer is voor de technici onder ons een JavaScript object die op de website wordt samengesteld en meegezonden kan worden met de GTM en Analytics tag. In Google Tag Manager kan de Data Layer vervolgens gebruikt worden bij het bouwen van tag’s en het definiëren van variabelen.
Het implementeren van de Data Layer
Het dataLayer object moet op de website, mobiele app of ander platform worden opgebouwd. Bijvoorbeeld via een plugin of zelf geschreven code. Dit object wordt automatisch aan de GTM of Analytics trackingcode meegegeven als die aangeroepen wordt. Hierbij kan er dus data verstuurd worden bij het laden van de pagina of bij gebeurtenissen.
Bij het laden van de pagina
Wanneer we gegevens aan de pageview tag willen meegeven zal dit beschikbaar moeten zijn voordat de trackingcode geladen wordt. We zullen dit script dus eerst moeten laden en daarna pas de trackingcode. Bij veel websites wordt JavaScript onderaan de pagina of asynchroon geladen om laadsnelheden te optimaliseren. Echter is het in dit geval wel belangrijk om ervoor te zorgen dat de dataLayer beschikbaar is voordat de trackingcode geladen wordt.
Plaats een dergelijke dataLayer boven de trackingcode
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
In bovenstaand voorbeeld sturen we twee variabelen naar GTM. Het variabele pageCategory met de waarde “signup” en het variabele visitorType met de waarde “high-value”.
Data uit de gegevenslaag meegeven via gebeurtenissen
Is de pagina reeds geladen dan zullen zullen we de data uit de gegevenslaag via gebeurtenissen naar GTM sturen. Hierbij maken we een dataLayer.push event. Hierbij creëren we een gebeurtenis waarbij we nieuwe gegevens aan de bestaande dataLayer toevoegen. De gebeurtenis is direct in Google Tag Manager zichtbaar met alle variabelen die met de gebeurtenis worden meegezonden of reeds in GTM staan.
<script>
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customizeCar'
});
</script>
In bovenstaand voorbeeld activeren we een gebeurtenis met de event tag met de naam “customizeCar”. Deze zal in de GTM rapportages naar voren komen. Daarnaast sturen we nog twee variabelen in de Data Layer mee voor “color” en “conversionValue”
In de GTM Preview mode zien we vervolgens de volgende actie
Voorbeeld Enhanced Ecommerce
Wanneer we terugkomen bij de implementatie van een webwinkel. Hier wordt de Data Layer veel gebruikt om verkoopdata te verzamelen. We willen hier onder andere productinfo naar Analytics sturen wanneer een product in de winkelwagen wordt gegooid. Hiervoor moeten wij de volgende data vanuit de website in de Data Layer zetten. Dit doen wij op de website middels een plugin of met aanpassingen in het thema.
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': {
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
Wat hier nu gebeurd is dat we 1 stuks van het product Triblend Android T-Shirt met een prijs van €15,25 in de winkelwagen gooien. Dit wordt gekoppeld aan de gebeurtenis addToCart die via GTM te meten is en naar Analytics gestuurd kan worden.
De Data Layer gebruiken in tag’s
Zodra de technische implementatie gedaan is en alle data in de dataLayer staat kunnen we deze in Google Tag Manager gebruiken om hier triggers mee te bouwen of de data gebruiken als variabele die we aan onze tag’s toevoegen. In sommige gevallen zoals bij e-commerce tracking in Google Analytics kan de dataLayer direct aan een de Analytics tag worden meegegeven.
Data Layer variabelen maken
Wanneer de Data Layer naar Google Tag Manager is gestuurd kan deze nog niet direct worden gebruikt in tag’s. Er moet eerst een variabele van gemaakt worden. GTM heeft hiervoor het dataLayer variabelen. Deze kan gemaakt worden door te gaan naar Variabelen en dan onderaan bij “Door de gebruiker gedefinieerde variabelen” een nieuwe aan te maken met het type variabele voor de gegevenslaag. Hier vul je vervolgens de naam van het dataLayer element in en deze is dan als GTM variabele beschikbaar en kan gebruikt worden.
Hieronder gebruiken we de dataLayer variabele “color” welke bijvoorbeeld rood of blauw is als GTM variabele
Data Layer Gebeurtenis gebruiken in triggers
Wanneer we een dataLayer.push event gebruiken zal er in de Preview mode een actie zichtbaar zijn. Deze actie kan gebruikt worden bij het bouwen van triggers. Maak hiervoor een trigger aan van het type “Aangepaste gebeurtenis” en geef deze dezelfde naam als de gebeurtenis die je ook in de voorbeeldmodus kon zien.
