Je hebt een Woocommerce webshop en de verkopen lopen lekker. Je hebt echter geen idee welke kanalen (organisch, SEO, SEA, Social etc) verantwoordelijk zijn voor deze verkopen. Ook zie je in de Google Ads campagnes alleen maar klikken maar geen concrete conversiedata. Tijd om deze conversies te gaan meten!
Om dit voor elkaar te krijgen maken wij gebruik van Google Tag Manager, De Tag Manager plugin door Thomas Geiger. Deze plugin voegt de datalayer events toe aan de Woocommerce shop. In deze datalayer staat o.a. de munteenheid, subtotaal en orderID van de orders. Deze data gaan wij met behulp van Google Tag Manager oppakken en doorsturen als conversiedata richting bijv. Google Ads. Bijkomend voordeel van deze fantastische plugin is dat je dan de Google Analytics Ecommerce tracking dan ook meteen geregeld hebt. Hiervoor zijn echter wel een aantal extra stappen nodig maar dit behandelen wij in een ander artikel.
Uiteraard kan het zijn dat je er zelf niet uit komt of geen tijd hebt. Wij kunnen Woocommerce conversion tracking uiteraard ook voor jou inrichten! Klik hier voor meer informatie.
Stap 1: Download de Google Tag Manager plugin voor WordPress
Het is belangrijk dat je Google Tag Manager al hebt draaien op jouw website. Download de GTM plugin van Thomas Geiger hier:
Installeer deze en ga naar de instellingen van deze plugin. Je kunt deze vinden bij integration / Woocommerce. Daar heb je de keuze voor classic ecommerce of enhanced ecommerce.
In deze tutorial ben ik uitgegaan van enhanced ecommerce. De enhanced ecommerce setting geeft een iets andere datalayer. Het is dan ook belangrijk dat je bij stap 2 kijkt naar hoe jouw datalayer eruit ziet als je classic ecommerce tracking gebruikt.
Stap 2: Bekijk wat er nu in de datalayer staat
Google Tag Manager werkt het beste in Chrome dus het is het beste om deze browser voor deze tutorial te gebruiken.
Om de datalayer te bekijken log je in op Google Tag Manager en selecteer je de juiste container. Klik in het beginscherm de preview-modus aan. Deze knop staat rechts bovenin het Tag Manager dashboard.
Deze prieview modus zorgt ervoor dat je onderin een extra debug-bar krijgt op jouw webshop. Open nu jouw website. Als het goed is ziet het er ongeveer zo uit:
Op de beginpagina zie je een overzicht van alle tags die wel en niet zijn gevuurd door Google Tag Manager.
Klik vervolgens op ‘Data Layer’. Daar zie je op dit moment nog niet veel interessants behalve wat eigenschappen van de pagina.
Doe nu een testconversie door wat in je mandje te doen en dit af te rekenen. Op de bedank-pagina zie je nu wel de conversiedata in de datalayer staan onder het event:
Voor conversiemeting in Google Ads gaan we de variabelen currencyCode, revenue en id gebruiken. Het mooie van revenue is dat dit het bedrag is exclusief BTW en exclusief verzendkosten.
Datalayer events werken in een soort boomstructuur. Om te bepalen welk veld je nodig hebt moet je kijken naar de verschillende niveau’s. Hoofdniveau en subniveau is in het screenshot groen en de waarden geel gearceerd. Dit levert uiteindelijk de volgende datalayer variabelen op (gescheiden door een punt):
Valuta: ecommerce.currencyCode
ID: ecommerce.purchase.actionField.id
Revenue: ecommerce.purchase.actionField.revenue
Let op: Datalayers zijn case-sensitive! Als je classic ecommerce tracking in stap 1 hebt aangevinkt dan kan de naamgeving van de datalayer variabelen verschillen.
Stap 3: Voeg variabelen toe aan Google Tag Manager
We hebben nu bepaald welke variabelen we uit de datalayer willen vissen om te gebruiken in Google Tag Manager. Ga weer terug naar de Tag Manager console en klik op ‘variabelen’.
Voeg een nieuwe variabele toe van het type ‘Data layer variable’ en geef deze een zinnige naam.
Plak de ecommerce.currencyCode als Data Layer Variable Name. Deze hadden wij in stap 2 uitgevolgeld.
Maak voor de overige 2 ook losse variabelen aan.
Stap 4: Voeg een trigger toe
We moeten Tag Manager nu gaan instrueren om een tag te gaan vuren als er een conversie is. Dit doen wij door de tag te vuren nadat het event gevuurd is.
Stap 5: Maak de tag aan en koppel deze aan de trigger
De vijfde en laatste stap is om de tag aan te maken. In dit voorbeeld maken wij een Google Ads conversie tag aan maar je kunt ook andere typen tags voor bijv. Google Analytics (goal tracking) aanmaken.
Klik op Tags en voeg een nieuwe tag toe:
Maak nu een conversie aan in het Google Ads dashboard en noteer het Google conversion id en het conversion label.
In het voorbeeld hebben wij het google conversion id in een losse variabele gezet (type constant) maar je kunt hier ook het id rechtstreeks inplakken. Plak het conversion label in de tag.
Nu is het alleen een kwestie van de variabelen die wij hebben toegevoegd op de juiste plaats te zetten zoals in het screenshot. In Tag Manager beginnen variabelen altijd met een {curly brace}. Zodra je dit intikt dan krijg je een lijst van variabelen te zien.
Voeg bij Triggering de trigger die we gemaakt hebben in stap 4 toe en sla de tag op.
Testen of het allemaal werkt
Nu zijn we aanbeland bij het spannendste gedeelte van deze tutorial: kijken of het nu werkt! Klik in Tag manager op Overview en vervolgens op ‘Refresh’ om de preview modus te verversen. Zo worden alle wijzigingen toegepast in de preview versie.
De preview versie werkt alleen voor ons en nog niet voor alle bezoekers. Indien alles goed werkt dan slaan wij de nieuwe configuratie op.
Open wederom jouw website en doe een testtransactie. Als het goed is zie je dat de tag die wij gemaakt hebben gevuurd wordt op de bedank-pagina:
Om te bekijken of de waarden netjes in de tag worden opgenomen klik je links bij ‘Summary’ op gtm4wp.orderCompletedEEC. Je ziet hier de details voor deze tag. Zie je nog variabele namen? Kies dan ‘Display variables as values’ Het zou er dan ongeveer zo uit moeten zien:
Als de waarden allemaal netjes zijn ingevuld werkt de tag goed. Nu is het alleen nog een kwestie van de configuratie opslaan door op ‘Submit’ te klikken. Controleer nadat er echte transacties zijn of deze ook daadwerkelijk aankomen in Google Ads. Dit gebeurt niet realtime dus het kan een aantal uren duren.
Mocht je er zelf niet uitkomen dan kun je altijd contact met ons opnemen. Wij helpen je graag verder!
