Contact Form 7 & Analytics Conversion Tracking

Uit De Vliegende Brigade
Ga naar: navigatie, zoeken

In de loop van 2017 heeft AdWords-conversion tracking aan belang ingeboet ivm. beperkingen gebruik third party cookies door Apple. In de praktijk is alleen nog Analytics Conversion Tracking relevant. Bij gebruik van Contact Form 7-formulieren op een site, wil ik uiteraard conversies kunnen detecteren. Hoe doe je dat?

Vereisten

Er zijn twee vereisten qua conversion tracking:

  1. Hoe detecteer je ingevulde Contact Form 7-formulieren (conversion tracking)?
  2. Als er meer dan één formulier op een site staat, hoe kun je conversies van de verschillende formulieren los van elkaar bijhouden? Ik wil uiteraard weten of bv. Formulier A het beter doet dan Formulier B.

Conclusie

Er is vermoedelijk een oplossing (zie verderop), maar die is me te bewerkelijk → Overstappen op een ander formulier-plugin. De eerste tekenen wijzen erop dat ( WPForms-Lite) een prima alternatief is.

Mogelijke oplossingen

on_sent_ok (werkt niet)

Je kon een JavaScript-event programmeren als de verzend-knop is ingedrukt, het bekende on_sent_ok-event. De maker van Contact Form 7 had al een tijdje aangegeven dat deze functionaliteit eind 2017 wordt verwijderd. Mijn ervaring in de loop van 2017 was echter, dat ik foutmeldingen kreeg als ik gebruik wilde maken van dit event. Blijkbaar was het al eerder met pensioen gestuurd.

wpcf7mailsent + ga-aanroep (werkt niet)

De maker van Contact Form 7 noemt deze procedure voor tracking:

  • Zorg dat je Analytics hebt geïnstalleerd op je site
  • Registratie van een evenement (zoals een ingevuld formulier), gaat via aanroep van de ga-functie. Je kunt deze aanroep conditioneel maken, zodat-ie alleen plaatsvindt als een formulier met succes is verstuurd. Gebruik daarvoor deze code:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    ga('send', 'event', 'Contact Form', 'submit');
}, false );
</script>
  • Plaats deze code in de header van alle pagina's van je site, of alleen op de pagina's met een formulier
  • Code in de header van alle pagina's plaatsen, kan op twee manieren: Binnen het <head></head>-gedeelte van het theme-bestand header.php, of via de wp_head-action hook in het theme's functions.php-bestand
  • In bovenstaande ga-aanroep, is Contact Form de eventCategory en submit de action. Die info heb je nodig om Goals in Analytics te configureren.

Evaluatie

  • Ik heb de indruk dat je op deze manier geen onderscheid kunt maken tussen verschillende formulieren
  • Het is abstract en daardoor lastig te verifiëren
  • Ik kreeg het niet binnen zo'n twee uur aan de praat.

wpcf7mailsent + redirect (werk niet)

Dan maar terug naar de basis: gewoon redirecten naar een dankjewel-pagina, want da's altijd te tracken. De maker van de plugin suggereert deze aanpak:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
</script>

Dit werkt niet, want er wordt geen onderscheid gemaakt tussen verschillende formulieren. Ze gaan allemaal naar dezelfde dankjewel-pagina.

Redirect + contactFormId (werkt?)

In deze thread wordt gesuggereerd om op de volgende manier per formulier een aparte redirect te maken:

document.addEventListener( 'wpcf7mailsent', function( event ) {
	if ( 'your-form-id' == event.detail.contactFormId ) {
		window.location = 'http://www.website.com/redirect/page';
		
	} else if ( 'your-other-form-id' == event.detail.contactFormId ) {
		window.location = 'http://www.website.com/redirect/page2';
	} else if {...}
}, false );

Evaluatie

Ik vermoed dat dit werkt, maar het is voor mij de aanleiding om over te stappen op een andere module:

  • Veel te tijdrovend om te implementeren
  • Niet-intuïtief, omdat deze code (geloof ik) in een theme-bestand moet worden geplaatst. Da's een onlogische plek
  • Slecht te onderhouden
  • Keep it simple - Dit is te complex.

Zie ook

Bronnen