Wordpress - Contactform7 & Gravity Forms tracken via DataLayer
Om ervoor te zorgen dat je je Gravity Forms & Contactform7 formulieren nauwkeuriger kan meten kan je gebruik maken van onze Wordpress plugin met daarin een generate_lead DataLayer event. Als je triggert op basis van een CSS-element (bedankbericht), een form submission of een bedankpagina kan dit voor een grote foutmarge zorgen. Daarom is het altijd veiliger om op basis van een DataLayer event te triggeren in Google Tag Manager.
Er zijn 2 situaties waar je op dit moment in zit om dit in te gaan stellen:
Je hebt de tracking voor een formulier nog niet ingesteld
Je hebt de tracking voor een formulier wel al ingesteld
Ga naar je web container in Google Tag Manager.
Navigeer naar je Triggers.
Maak een nieuwe Trigger aan.
Noem de Trigger "trytagging_generate_lead".
Noem het event ook "trytagging_generate_lead" en selecteer "All Custom Events" als trigger voorwaarde. Sla de trigger daarna op.
De "trytagging_generate_lead" trigger is zo door ons ontworpen dat hij alleen afgaat bij een form submit van Gravity Forms of van Contactform7.
Navigeer in je Google Tags Manager naar "Tags".
Maak een nieuwe tag aan en noem hem "GA4 - generate_lead (AdPage DataLayer)".
Kies bij Tag Configuration voor Google Analytics: GA 4 Event.
Vul je Google Analytics Measurement ID in (of selecteer je constante variabele van je GA4 measurement ID).
Vul bij Event Name "generate_lead" in.
Als je een andere gebeurtenis dan "generate_lead" wilt meten, kan je de gebeurtenisnaam hier ook veranderen
Selecteer je aangemaakte trigger uit stap 5.
Sla de tag op.
Als je ook gegevens van je bezoeker die het formulier invult mee wilt sturen (voor enhanced conversies bijvoorbeeld) kan je die als parameter meesturen. Hieronder volgen de stappen om die gegevens uit de DataLayer op te halen en als parameter met je GA4 event mee te sturen.
Open je GTM web container in de preview mode.
Vul je Contactform7 of Gravity Forms formulier in.
Check de stap van het DataLayer event 'trytagging_generate_lead'. Onder het kopje 'DataLayer' zou je iets wat lijkt op het volgende moeten zien (dit hangt af van welke invoervelden je gebruikt):
In die DataLayer gegevens, zal je alle gegevens van je ingevulde invoervelden moeten zien.
In bovenstaande screenshots zijn er 4 DataLayer Keys aanwezig:
form_data.your-name
form_data.your-email
form_data.your-subject
form_data.your-message
Deze DataLayer Keys kunnen voor jouw situatie anders zijn, vandaar dat je in bovenstaande stappen het moet testen.
Ga in je GTM web container naar 'Variabelen'.
Maak een nieuwe door de gebruiker gedefinieerde variabele aan.
Als variabele type kies je DataLayer Variabele / Variabele voor Gegevenslaag.
Als naam van de Variabele en als DataLayer Variabele naam vul je een van je DataLayer Keys in.
Sla je variabele op en open nu je GA4 event die je eerder aangemaakt hebt.
Voeg een nieuwe Event Parameter toe aan je GA4 event.
Vul bij de parameters de Event Parameter "user_data.email_address" in en de value je aangemaakte variabele voor het e-mailadres van je bezoeker.
Bij de andere invoervelden kan je gebruik maken van de volgende parameternamen:
naam van bezoeker = user_data.email_address
formulier naam = form_name
formulier ID = form_id
formulier bedankpagina = form_destination
ingevuld bericht = vrije keuze, zo lang je dit ook wel als aangepaste statistiek in GA4 toevoegt
Ook zou je een User-Provided Data variabele kunnen gebruiken voor het e-mailadres en/of naam, telefoonnummer, etc. van de bezoeker:
Als je alle gewenste parameters toegevoegd hebt, kan je de tag opslaan.
Nu dat je je setup klaar hebt is het tijd om te valideren dat deze werkt. Hiervoor gebruiken we de Preview mode van Google Tag Manager.
Ga in Google Tag Manager naar "Preview".
Vul in de Preview mode een form in op je website en kijk of de tag "GA4 - generate_lead" vuurt bij het submitten van de form.
Wanneer dit het geval is kan je deze workspace aanpassing naar je live container pushen. Dat doe je door rechtsboven op publiceer te klikken.
Als je al je een GravityForms of Contactform7 formulier trackt en dit wilt updaten hoef je alleen de trigger van je huidige tag te veranderen en eventueel de parameters aan te passen.
Ga naar de tag die je wilt veranderen, je gebruikt waarschijnlijk op dit moment de trigger CSS element visibility of een bedankpagina. Dit is niet de meest accurate manier van tracken.
Verwijder die trigger in de tag.
Selecteer het trigger vlak. Maak een nieuwe Trigger aan door rechtsboven op het blauwe plusje te klikken.
Noem de Trigger "trytagging_generate_lead".
Noem het event ook "trytagging_generate_lead" en selecteer "All Custom Events" als trigger voorwaarde. Sla de trigger daarna op.
De "trytagging_generate_lead" trigger is zo door ons ontworpen dat hij alleen afgaat bij een form submit van Gravity Forms of van Contactform7.
Sla de tag op.
Als je ook gegevens van je bezoeker die het formulier invult mee wilt sturen (voor enhanced conversies bijvoorbeeld) kan je die als parameter meesturen. Hieronder volgen de stappen om die gegevens uit de DataLayer op te halen en als parameter met je GA4 event mee te sturen.
Open je GTM web container in de preview mode.
Vul je Contactform7 of Gravity Forms formulier in.
Check de stap van het DataLayer event 'trytagging_generate_lead'. Onder het kopje 'DataLayer' zou je iets wat lijkt op het volgende moeten zien (dit hangt af van welke invoervelden je gebruikt):
In die DataLayer gegevens, zal je alle gegevens van je ingevulde invoervelden moeten zien.
In bovenstaande screenshots zijn er 4 DataLayer Keys aanwezig:
form_data.your-name
form_data.your-email
form_data.your-subject
form_data.your-message
Deze DataLayer Keys kunnen voor jouw situatie anders zijn, vandaar dat je in bovenstaande stappen het moet testen.
Ga in je GTM web container naar 'Variabelen'.
Maak een nieuwe door de gebruiker gedefinieerde variabele aan.
Als variabele type kies je DataLayer Variabele / Variabele voor Gegevenslaag.
Als naam van de Variabele en als DataLayer Variabele naam vul je een van je DataLayer Keys in.
Sla je variabele op en open nu je GA4 event die je eerder aangemaakt hebt.
Voeg een nieuwe Event Parameter toe aan je GA4 event.
Vul bij de parameters de Event Parameter "user_data.email_address" in en de value je aangemaakte variabele voor het e-mailadres van je bezoeker.
Bij de andere invoervelden kan je gebruik maken van de volgende parameternamen:
naam van bezoeker = user_data.email_address
formulier naam = form_name
formulier ID = form_id
formulier bedankpagina = form_destination
ingevuld bericht = vrije keuze, zo lang je dit ook wel als aangepaste statistiek in GA4 toevoegt
Ook zou je een User-Provided Data variabele kunnen gebruiken voor het e-mailadres en/of naam, telefoonnummer, etc. van de bezoeker:
Als je alle gewenste parameters toegevoegd hebt, kan je de tag opslaan.
Er zijn 2 situaties waar je op dit moment in zit om dit in te gaan stellen:
Je hebt de tracking voor een formulier nog niet ingesteld
Je hebt de tracking voor een formulier wel al ingesteld
Je hebt de tracking voor je form nog niet ingesteld
Ga naar je web container in Google Tag Manager.
Navigeer naar je Triggers.
Maak een nieuwe Trigger aan.
Noem de Trigger "trytagging_generate_lead".
Noem het event ook "trytagging_generate_lead" en selecteer "All Custom Events" als trigger voorwaarde. Sla de trigger daarna op.
De "trytagging_generate_lead" trigger is zo door ons ontworpen dat hij alleen afgaat bij een form submit van Gravity Forms of van Contactform7.
Navigeer in je Google Tags Manager naar "Tags".
Maak een nieuwe tag aan en noem hem "GA4 - generate_lead (AdPage DataLayer)".
Kies bij Tag Configuration voor Google Analytics: GA 4 Event.
Vul je Google Analytics Measurement ID in (of selecteer je constante variabele van je GA4 measurement ID).
Vul bij Event Name "generate_lead" in.
Als je een andere gebeurtenis dan "generate_lead" wilt meten, kan je de gebeurtenisnaam hier ook veranderen
Selecteer je aangemaakte trigger uit stap 5.
Sla de tag op.
Parameters zoals e-mailadres meesturen
Als je ook gegevens van je bezoeker die het formulier invult mee wilt sturen (voor enhanced conversies bijvoorbeeld) kan je die als parameter meesturen. Hieronder volgen de stappen om die gegevens uit de DataLayer op te halen en als parameter met je GA4 event mee te sturen.
Open je GTM web container in de preview mode.
Vul je Contactform7 of Gravity Forms formulier in.
Check de stap van het DataLayer event 'trytagging_generate_lead'. Onder het kopje 'DataLayer' zou je iets wat lijkt op het volgende moeten zien (dit hangt af van welke invoervelden je gebruikt):
In die DataLayer gegevens, zal je alle gegevens van je ingevulde invoervelden moeten zien.
In bovenstaande screenshots zijn er 4 DataLayer Keys aanwezig:
form_data.your-name
form_data.your-email
form_data.your-subject
form_data.your-message
Deze DataLayer Keys kunnen voor jouw situatie anders zijn, vandaar dat je in bovenstaande stappen het moet testen.
Ga in je GTM web container naar 'Variabelen'.
Maak een nieuwe door de gebruiker gedefinieerde variabele aan.
Als variabele type kies je DataLayer Variabele / Variabele voor Gegevenslaag.
Als naam van de Variabele en als DataLayer Variabele naam vul je een van je DataLayer Keys in.
Sla je variabele op en open nu je GA4 event die je eerder aangemaakt hebt.
Voeg een nieuwe Event Parameter toe aan je GA4 event.
Vul bij de parameters de Event Parameter "user_data.email_address" in en de value je aangemaakte variabele voor het e-mailadres van je bezoeker.
Bij de andere invoervelden kan je gebruik maken van de volgende parameternamen:
naam van bezoeker = user_data.email_address
formulier naam = form_name
formulier ID = form_id
formulier bedankpagina = form_destination
ingevuld bericht = vrije keuze, zo lang je dit ook wel als aangepaste statistiek in GA4 toevoegt
Ook zou je een User-Provided Data variabele kunnen gebruiken voor het e-mailadres en/of naam, telefoonnummer, etc. van de bezoeker:
Als je alle gewenste parameters toegevoegd hebt, kan je de tag opslaan.
Dit is hoe je tag er uiteindelijk uit moet zien:
Nu dat je je setup klaar hebt is het tijd om te valideren dat deze werkt. Hiervoor gebruiken we de Preview mode van Google Tag Manager.
Ga in Google Tag Manager naar "Preview".
Vul in de Preview mode een form in op je website en kijk of de tag "GA4 - generate_lead" vuurt bij het submitten van de form.
Wanneer dit het geval is kan je deze workspace aanpassing naar je live container pushen. Dat doe je door rechtsboven op publiceer te klikken.
Je gebruikt een andere manier van tracking voor je form
Als je al je een GravityForms of Contactform7 formulier trackt en dit wilt updaten hoef je alleen de trigger van je huidige tag te veranderen en eventueel de parameters aan te passen.
Ga naar de tag die je wilt veranderen, je gebruikt waarschijnlijk op dit moment de trigger CSS element visibility of een bedankpagina. Dit is niet de meest accurate manier van tracken.
Verwijder die trigger in de tag.
Selecteer het trigger vlak. Maak een nieuwe Trigger aan door rechtsboven op het blauwe plusje te klikken.
Noem de Trigger "trytagging_generate_lead".
Noem het event ook "trytagging_generate_lead" en selecteer "All Custom Events" als trigger voorwaarde. Sla de trigger daarna op.
De "trytagging_generate_lead" trigger is zo door ons ontworpen dat hij alleen afgaat bij een form submit van Gravity Forms of van Contactform7.
Sla de tag op.
Als je ook gegevens van je bezoeker die het formulier invult mee wilt sturen (voor enhanced conversies bijvoorbeeld) kan je die als parameter meesturen. Hieronder volgen de stappen om die gegevens uit de DataLayer op te halen en als parameter met je GA4 event mee te sturen.
Open je GTM web container in de preview mode.
Vul je Contactform7 of Gravity Forms formulier in.
Check de stap van het DataLayer event 'trytagging_generate_lead'. Onder het kopje 'DataLayer' zou je iets wat lijkt op het volgende moeten zien (dit hangt af van welke invoervelden je gebruikt):
In die DataLayer gegevens, zal je alle gegevens van je ingevulde invoervelden moeten zien.
In bovenstaande screenshots zijn er 4 DataLayer Keys aanwezig:
form_data.your-name
form_data.your-email
form_data.your-subject
form_data.your-message
Deze DataLayer Keys kunnen voor jouw situatie anders zijn, vandaar dat je in bovenstaande stappen het moet testen.
Ga in je GTM web container naar 'Variabelen'.
Maak een nieuwe door de gebruiker gedefinieerde variabele aan.
Als variabele type kies je DataLayer Variabele / Variabele voor Gegevenslaag.
Als naam van de Variabele en als DataLayer Variabele naam vul je een van je DataLayer Keys in.
Sla je variabele op en open nu je GA4 event die je eerder aangemaakt hebt.
Voeg een nieuwe Event Parameter toe aan je GA4 event.
Vul bij de parameters de Event Parameter "user_data.email_address" in en de value je aangemaakte variabele voor het e-mailadres van je bezoeker.
Bij de andere invoervelden kan je gebruik maken van de volgende parameternamen:
naam van bezoeker = user_data.email_address
formulier naam = form_name
formulier ID = form_id
formulier bedankpagina = form_destination
ingevuld bericht = vrije keuze, zo lang je dit ook wel als aangepaste statistiek in GA4 toevoegt
Ook zou je een User-Provided Data variabele kunnen gebruiken voor het e-mailadres en/of naam, telefoonnummer, etc. van de bezoeker:
Als je alle gewenste parameters toegevoegd hebt, kan je de tag opslaan.
Bijgewerkt op: 18/12/2024
Dankuwel!