Het doormeten van marketingcampagnes hoeft niet moeilijk te zijn. De waarde van een bestelling moet gemakkelijk op te halen zijn via de dataLayer of een vergelijkbaar JavaScript object. Helaas is de dataLayer niet op iedere webshop aanwezig. Hieronder laat ik je zien hoe je productdata verzamelt voor Google Analytics 4 of een Facebook/Google Ads remarketing campagne. Dit doen we met JavaScript en Google Tag Manager.
Het belang van een goede dataLayer
De dataLayer (met een kleine ‘d‘ en een hoofdletter ‘L‘) is een belangrijk stuk JavaScript (JSON notatie) dat gebruikt wordt om de data van producten in te verwerken. Deze data kan dan gemakkelijk worden hergebruikt in Google Analytics 4, Facebook, Google Ads, Datatrics, Adform en andere marketing- of advertentieplatformen. Maak je geen gebruik van de dataLayer? Dan moet je met web developers om tafel om marketingactiviteiten door te meten. Voor iedere kleine aanpassing moet je contact opnemen met een web developer. Dit is niet efficiënt en brengt vaak extra kosten met zich mee.
De oplossing die ik hieronder laat zien biedt dus niet de stabiliteit van een dataLayer maar kan gebruikt worden als tussenoplossing. Wordt er gewerkt aan de dataLayer of moet er morgen een campagne live? Dan kun je deze oplossing gebruiken. Zo niet, haal dan altijd je gegevens op via een dataLayer variabele in Google Tag Manager.
Productdata verzenden middels JavaScript
Binnen Google Tag Manager is het mogelijk om eigen scripts te implementeren via een “Custom HTML” Tag of een “Custom JavaScript Macro” Variabele. In het onderstaande script maakt ik gebruik van een Custom JavaScript Macro om productdata op te halen:
Productdata bepalen
De bovenste variabelen; h1, productPrice, variantDropdown, selectedVariant en productQuantity worden gebruikt om te bepalen welke data bij het product hoort. Dit is voor iedere website anders en je zult de code dus moeten toespitsen op je eigen website of webshop.
Op de onderstaande afbeelding zie je hoe je dit ophaalt voor je eigen website. Kies een element wat gelijk is op iedere productpagina (bijvoorbeeld de productnaam), inspecteer het element en kies ervoor om het ‘JS Path‘ ofwel het ‘JavaScript pad‘ op te halen.
Klik op de afbeelding om te vergroten.
Ga vervolgens naar de Console in je browser en plak het JavaScript pad. Voeg vervolgens .innerText of .innerHTML toe (.value voor prijzen) om tekst op te halen. Sla dit op als ‘h1‘ of ‘productName‘ in je JavaScript Macro. Dit vereist wellicht wat technische kennis maar het is een goed alternatief als er geen dataLayer beschikbaar is.
Productdata doorzetten naar sessionStorage
Zodra alle productdata opgehaald is wordt het tijd om deze te versturen naar de sessionStorage. De sessionStorage is een soort zandbak waar data kan worden opgeslagen van een bezoek op een website. Deze data wordt direct verwijderd zodra een gebruiker de website verlaat. Het is ook mogelijk om de data via een Cookie te versturen maar deze worden regelmatig geblokkeerd door browsers.
De data die we in het eerste gedeelte van het script verzamelden wordt nu verstuurd naar de sessionStorage.
Hieronder een voorbeeld van de productprijs die naar de sessionStorage wordt verstuurd.
var storage = window.sessionStorage
var setProductPrice = storage.setItem(“ProductPrice”, productPrice)
Op de onderstaande afbeelding is te zien hoe de sessionStorage eruit ziet zodra deze is gevuld met onze data.
sessionStorage > localStorage
Ik kies sessionStorage boven localStorage omdat deze data weer verwijderd wordt zodra een gebruiker de site verlaat. Hier hoeven we niks voor te doen. Bij localStorage wordt deze data bewaard zodra iemand de website verlaat. De data wordt telkens overschreven zodra een bezoeker naar een nieuw product navigeert. Het is daarom niet nodig om localStorage te gebruiken. Daarnaast wordt localStorage ook sneller geblokkeerd door browsers.
Als je data mee wilt nemen naar de bedankpagina en hiertussen nog een betaalpagina zit (bijvoorbeeld: betalen.rabobank.nl) dan is het wel verstandig om localStorage te gebruiken. De bezoeker verlaat namelijk de site om te betalen en keert vervolgens terug op de website.
dataLayer.push > sessionStorage
Het is ook mogelijk om productdata zelf naar de dataLayer te versturen middels de dataLayer.push methode. Gebruik dan geen JavaScript Macro maar een Custom HTML Tag. JavaScript macro’s laten het niet toe om de dataLayer.push methode te gebruiken. Het is dan niet mogelijk om de data opgeslagen te houden in de browser tijdens een sessie van een bezoeker. De dataLayer wordt namelijk op iedere pagina opnieuw geladen. Productdata kan dus niet worden meegenomen zodra er een andere pagina wordt bezocht. Zoals in het begin omschreven, een web developer dient dit implementeren op iedere productpagina. Dit is de meeste robuuste oplossing.
Ophalen van productdata
Nu de productdata verzonden is naar de sessionStorage kunnen we deze ophalen met Google Tag Manager. Deze data is bruikbaar in metingen zoals Google Analytics 4 en marketingcampagnes van bijvoobeeld Google Ads en Facebook. We halen deze data op middels een JavaScript Variabele in Googele Tag Manager. Hieronder zie je een voorbeeld hoe ik de prijs van een product uit de sessionStorage haal met een JavaScript variabele.
Het resultaat
Op de onderstaande afbeelding is te zien hoe de data naar Google Analytics 4 wordt verstuurd. Houd altijd altijd de officiële documentatie aan als je deze data gaat versturen. Doe je dit niet, dan is de kans groot dat Google Analytics je data niet kan verwerken.
Obstakels: ITP en andere ‘blockers’
Intelligent Tracking Prevention ofwel (ITP) wordt steeds vaker ingezet door browsers om data van een gebruiker te beschermen. Het doel hiervan is om gebruikers volledig anoniem te laten browsen zonder dat er data wordt opgeslagen over het surfgedrag. Door alles te blokkeren werken functies op websites, A/B testen en tracking (b.v. Google Analytics) minder goed.
De oplossing die hier wordt aangeboden loopt ook het risico om geblokkeerd te worden door de ITP. Hierdoor wordt data niet of niet volledig verwerkt in het platform waarmee je wilt meten. Deze oplossing kan dus gebruikt worden totdat er een dataLayer wordt geïmplementeerd.
Heb je een vraag hierover? Laat een reactie achter of neem contact met me op!
