Contact Form 7 conversies meten met GA4 en Google Tag Manager

Wil je meten hoeveel bezoekers een contactformulier op je WordPress-website succesvol versturen? Met Contact Form 7 kun je formulierconversies meten in Google Analytics 4 (GA4). Dat kan via een plugin, met een dataLayer-event in Google Tag Manager of door een webhook naar server-side Google Tag Manager te sturen.

Welke methode het beste past, hangt af van je trackinginrichting en hoeveel controle je wilt over de gegevens die je verstuurt.

Hoe meet je Contact Form 7-conversies in GA4?

Er zijn drie gangbare manieren om formulierinzendingen te meten:

1. Via een plugin. Een plugin verzorgt de integratie met Google Analytics of Google Tag Manager.
2. Via de dataLayer en web-GTM. Contact Form 7 stuurt bij een succesvolle verzending een gebeurtenis naar de dataLayer, waarna GTM deze naar GA4 doorstuurt.
3. Via een webhook naar server-side GTM. WordPress stuurt vanuit de server een HTTP-verzoek naar een endpoint van je servercontainer.<

Contact Form 7 meten met een plugin

De eenvoudigste manier om formulierconversies te meten, is met een plugin die Contact Form 7 ondersteunt. Je hoeft dan niet zelf JavaScript te schrijven om een succesvolle inzending te herkennen.

Gebruik je Google Tag Manager al op je website? Dan kun je een plugin kiezen die formuliergebeurtenissen naar de dataLayer stuurt. Vervolgens configureer je in GTM welke gebeurtenissen naar GA4 worden doorgestuurd.

Gebruik je Google Site Kit om GA4 te installeren? Dan is de basis voor Analytics ingericht, maar dat betekent niet automatisch dat succesvolle Contact Form 7-inzendingen worden gemeten. Daarvoor is aanvullende configuratie of een geschikte integratie nodig.

Controleer bij het kiezen van een plugin of deze daadwerkelijk een succesvolle verzending meet. Een klik op de verzendknop is namelijk niet hetzelfde als een geslaagde formulierinzending.

Wanneer kies je deze methode?

Deze aanpak is geschikt als je snel formulierconversies wilt meten en zo min mogelijk eigen code wilt onderhouden.

Contact Form 7 meten via de dataLayer en web-GTM

Gebruik je Google Tag Manager al op je website? Dan kun je Contact Form 7 rechtstreeks laten communiceren met de dataLayer.

Contact Form 7 biedt hiervoor het JavaScript-event wpcf7mailsent. Dit event wordt geactiveerd wanneer een formulier via Ajax succesvol is verzonden en de e-mail is verstuurd.

Stap 1: voeg een script toe aan WordPress

Plaats het volgende JavaScript op je website, bijvoorbeeld via een eigen JavaScriptbestand of een geschikte code-invoegplugin. Alternatief kun je ook in GTM een HTML tag maken en deze op de paginaweergave aanroepen.

<script>document.addEventListener('wpcf7mailsent', function (event) {
    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({
        event: 'form_submit_success',
        form_id: String(event.detail.contactFormId)
    });
});</script>

Het script luistert naar succesvolle verzendingen van Contact Form 7. Bij iedere geslaagde verzending wordt het event form_submit_success naar de dataLayer gestuurd, samen met de ID van het formulier.

De formulier-ID kun je gebruiken om onderscheid te maken tussen bijvoorbeeld een contactformulier en een offerteaanvraag.

Stap 2: configureer Google Tag Manager

Open je webcontainer in Google Tag Manager en maak de volgende configuratie aan:

1. Maak een trigger van het type Aangepaste gebeurtenis.
2. Vul bij de gebeurtenisnaam form_submit_success in.
3. Maak een GA4-eventtag aan die op deze trigger wordt geactiveerd.
4. Gebruik bijvoorbeeld generate_lead als gebeurtenisnaam voor een succesvolle leadinzending.
5. Voeg eventueel form_id toe als gebeurtenisparameter, zodat je in GA4 kunt zien welk formulier is verstuurd.

Test de configuratie met de previewfunctie van Google Tag Manager. Controleer of het event pas verschijnt na een succesvolle verzending.

Markeer de gebeurtenis vervolgens in GA4 als belangrijke gebeurtenis (key event) als je deze als conversie wilt rapporteren.

Wanneer kies je deze methode?

Deze aanpak is geschikt als je zelf controle wilt houden over je gebeurtenissen, triggers en GA4-tags. Je kunt dezelfde gebeurtenis bovendien gebruiken om andere tags in de webcontainer te activeren.

Contact Form 7 server-side doorsturen naar server-side GTM

Wil je formuliergebeurtenissen vanuit WordPress rechtstreeks naar server-side Google Tag Manager sturen? Dan kun je een webhook gebruiken.

Contact Form 7 biedt de PHP-hook wpcf7_mail_sent. Deze wordt aangeroepen nadat de e-mail succesvol is verzonden. Met deze hook kun je vanuit WordPress een HTTP POST-verzoek uitvoeren naar een endpoint van je servercontainer.

Stap 1: stuur een webhook vanuit WordPress

Voeg bijvoorbeeld de volgende PHP-code toe aan je eigen plugin of via een geschikte code-invoegplugin:

add_action( 'wpcf7_mail_sent', function ( $form ) {
    wp_remote_post( 'https://sgtm.example.com/contact-form', [
        'headers' => [ 'Content-Type' => 'application/json' ],
        'body'    => wp_json_encode([
            'event_name' => 'generate_lead',
            'form_id'    => $form->id(),
        ]),
        'timeout' => 5,
    ]);
});

Vervang https://sgtm.example.com/contact-form door het endpoint dat je voor deze koppeling hebt ingericht.

De code stuurt na een succesvolle verzending een JSON-bericht met de gebeurtenisnaam en de formulier-ID. Je hoeft hiervoor geen dataLayer-event in de browser te gebruiken.

Stap 2: configureer server-side GTM

Een server-side GTM-container accepteert niet automatisch iedere willekeurige JSON-webhook. Je moet de servercontainer zo configureren dat het inkomende verzoek wordt herkend en verwerkt. Daarvoor is een geschikte client of een eigen endpointimplementatie nodig.

Vervolgens kun je de ontvangen gegevens gebruiken om een gebeurtenis naar GA4 of een ander ondersteund platform te sturen.

Houd er rekening mee dat deze eenvoudige webhook alleen de gebeurtenisnaam en formulier-ID doorstuurt. Voor attributie aan advertentiecampagnes kunnen aanvullende gegevens nodig zijn, zoals de GA4-client-ID, sessiegegevens of advertentie-ID's. Die moet je afzonderlijk verzamelen en veilig doorgeven.

De voorbeeldcode bevat ook geen foutafhandeling of retries. Als het endpoint niet bereikbaar is, kan de gebeurtenis verloren gaan. Voor productiegebruik is het daarom verstandig om de aflevering en eventuele herhaalpogingen goed te regelen.

Wanneer kies je deze methode?

Deze aanpak is vooral interessant als je server-side GTM al gebruikt en zelf wilt bepalen welke gegevens WordPress aanlevert en hoe deze server-side worden verwerkt.

Welke methode past bij jouw website?

De drie methoden hebben elk hun eigen toepassing:

• Plugin: geschikt als je snel formulierconversies wilt meten met zo weinig mogelijk maatwerk.
• DataLayer en web-GTM: geschikt als je tracking vanuit de browser wilt beheren en gebeurtenissen naar GA4 of andere tags wilt sturen.
• Webhook naar server-side GTM: geschikt als je vanuit WordPress server-side gebeurtenissen wilt versturen en centraal wilt verwerken.

Welke methode je ook kiest, test altijd of alleen succesvolle formulierinzendingen worden gemeten. Een formulierpoging die mislukt, mag niet als een geslaagde lead worden geregistreerd.

Verwerk persoonsgegevens en advertentiegegevens daarnaast alleen op een manier die past bij de geldende privacyregels en de toestemming van de bezoeker.