Contactform 7 is veel gebruikte wordpress plugin om contactformulieren mee te maken. Natuurlijk wil je bij deze formulieren een conversiemeting uitvoeren waarbij je precies weet welk formulier goed presteert. Maar hoe doe je dit precies? In deze blog post leggen we je in 5 stappen uit hoe conversie tracking in contactform 7 met Google Tag Manager werkt! Heb je GTM nog niet aangemaakt? Dan adviseren we je eerst om deze blog te lezen.
Waarom deze handleiding?
– Om je de nodige uurtjes googlen te besparen;
– Het voor jou als marketeer of eigenaar van een bedrijf interessant is om te weten welk formulier het beste presteert;
– Er geen duidelijke tutorials beschikbaar in het Nederlands (vonden wij ;))
1. Contact Form 7 Event Tracking: Auto-Event Listener
De eerste stap om de inzendingen van CF7 formulieren te meten is het toevoegen van Auto-Event Listener. Met dit stukje code kun je na het succesvol verzenden van een formulier de informatie naar een data layer pushen. Denk hierbij aan event name, form id en de waarden van velden in het formulier. Deze waarden worden pas naar de data layer gestuurd op het moment dat de e-mail met informatie succesvol is verstuurd naar de bezoeker.
Om de Auto-Event Listener toe te voegen aan Google Tag Manager voeg je een Custom HTML tag toe. Vervolgens voeg je als trigger ‘all pages’ toe, zodat je weet dat dit gemeten wordt op alle pagina’s waar een formulier staat.
Plak het onderstaande script in de Custom HTML tag en voeg de trigger all pages toe:
<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
window.dataLayer.push({
“event” : “cf7submission”,
“formId” : event.detail.contactFormId,
“response” : event.detail.inputs
})
});
</script>
Voordat we naar de volgende stap gaan, is het belangrijk om de Auto-Event Listener te testen bij een succesvolle inzending. Dit kun je doen via de voorbeeldmodus functie in Google Tag Manager waarmee je handig kunt testen of bepaalde tags op de juiste momenten worden geactiveerd. Als je op voorbeeld klikt (zichtbaar in de onderstaande afbeelding), dan verschijnt er een oranje balk.
Type in de adresbalk de pagina waar het formulier op te vinden is en ververs de pagina. Aan de onderzijde van de pagina is er nu een debug gedeelte zichtbaar waarmee je kunt zien welke tags wel en welke tag niet geactiveerd worden. Vul het formulier en verzend deze.
Als alles correct werkt, dan zie je hier bij samenvatting aan de linkerkant het cf7submission event staan (zie afbeelding hieronder).
Check vervolgens bij het tabje Data Layer of de informatie welke je graag wilt ontvangen zichtbaar is. Je kunt hiermee dus niet alleen zien of een formulier succesvol is verstuurd, maar ook de waarden van de velden. Dit zie je ook terug in onderstaande afbeelding:
2. Variabelen en triggers
Zo, nu we de informatie naar een data layer gepushed hebben, wordt het tijd om de volgende stap te zetten. Dit doen we door het aanmaken van een aangepaste gebeurtenis trigger. Geef deze de naam cf7submission en zorg dat deze geactiveerd wordt op alle aangepaste gebeurtenissen:
Om onderscheid te kunnen maken welk formulier is ingevuld, raden we je aan om tevens gebruik te maken van de variabele formid. Hierdoor kun je precies zien welk formulier verzonden is zonder daarvoor ook nog eens verschillende tags en triggers te hoeven aanmaken.
Sla deze variabele op en test deze goed. Dit kun je doen door de voorbeeldmodus weer te gebruiken en het Contact form 7 formulier opnieuw te verzenden. Nadat je op verzenden geklikt hebt ga je naar het tabje variabelen. Hier zie je als het goed is formid terugkomen als een Data Layer Variabele.
In de onderstaande schermafbeelding zie je dat alles naar behoren werkt. Het formulieren ID wordt nu netjes meegenomen in de variabelen. Let op: Data Layer variabelen zijn hoofdletter gevoelig.
3. Google Analytics Event Tag
Twee belangrijke dingen om conversie tracking in Contact Form 7 via Google Tag Manager te implementeren zijn klaar. Nu is het van belang om de inzending van een formulier door te sturen naar Google Analytics. Dit doe je door het aanmaken van een Universal Analytics tag met de volgende instellingen:
– Tracking type: Gebeurtenis
– Categorie: form submission
– Actie: {{dlvFormID}}. Bij het event wordt het form ID dus vervolgen door het daadwerkelijke ID van het formulier.
– Vergeet niet de aangepaste trigger toe te voegen die we al gecreëerd hebben.
4. Uitgebreid testen!
Sla vervolgens alle wijzigingen op in Google Tag Manager en ververs de Voorbeeld en Debug modus. Ga wederom naar de webpagina waar contact form 7 actief is en ververs de pagina opnieuw. Vul het formulier in en controleer of de tag nu geactiveerd wordt wanneer er een formulier verzonden is.
Als dit geval is, dan ga je vervolgens naar google analytics om te kijken of de gebeurtenis ook daadwerkelijk zichtbaar is. Hiervoor ga je naar het realtime rapport en klik je op gebeurtenissen. Hier zie je nu als het goed is de onderstaande data staan!
5. Doel aanmaken in Google Analytics
De laatste en meest eenvoudige stap is het aanmaken van een doel in Google Analytics. Login in het Analytics account en klik op nieuw doel aanmaken. Selecteer vervolgens een doel op basis van een gebeurtenis.
Klik op doorgaan en vul vervolgens de doel details in:
Heb je meerdere formulieren op je website en wil je daar doelen voor maken in analytics? Dan herhaal je deze stap en creëer je voor elk formulier een apart doel! Hopelijk lukt het met deze tutorial om conversiemetingen in Contactform 7 via Google Tag Manager te implementeren. Mocht je er niet uitkomen, of heb je hulp nodig? Laat het ons dan gerust weten!