Aujourd’hui on va se pencher sur les techniques que vous permettront de mesurer et tracker un formulaire CF7 (Contact Form 7) sur WordPress avec Google Tag Manager (GTM).

Push l’événement de succès du formulaire CF7 rempli

Le plugin CF7 ne permet malheureusement pas de remonter nativement les différents événements liés à la complétion de ses formulaires. Par conséquent, il est nécessaire que vous utilisiez l’une de ces 2 méthodes pour push l’event ainsi que tous les détails de remplissage du formulaire.

• Méthode 1 : push script via gtm
• Méthode 2 : plugin wordpress

Méthode 1 : Push Script via GTM

Nous allons ajouter morceau de code (dit auto-event listener) via GTM qui permettra de push un event de succès lorsque le formulaire est rempli ainsi que des données importantes dans le datalayer (nom de l’event, ID du formulaire, valeurs des champs remplis).

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

Pour ajouter ce code il vous suffit de :

• Créez une balise HTML personnalisée

• Copier-collez le script et ajouter le déclencheur “All Pages”

• Testez le script. Lancez une prévisualisation puis remplissez votre formulaire. Si l’event “cf7submission” apparaît après la complétion, c’est tout bon !

Méthode 2 : Plugin WordPress

• Installez le plugin GTM4WP puis cochez la case de tracking CF7 dans la section “Intégrations”

• Maintenant vous pouvez prévisualiser votre complétion de formulaire sur GTM et vous devriez avoir l’event “gtm4wp.contactForm7Submitted” qui s’active.

Créer la variable et le déclencheur de l’événement CF7

Créer la variable pour récupérer l’ID du formulaire CF7

Pour tracker un formulaire Contact Form 7 (CF7) avec GTM, il sera nécessaire de bien le distinguer parmi les divers formulaires que vous aurez en place sur votre site. Pour ce faire :

Lancez une prévisualisation puis réalisez un test de formulaire rempli.

Rendez-vous dans la section “Datalayer” (couche de données) où vous retrouverez tous les détails du formulaire dont les champs remplis et l’ID.

Il faudra donc créer une “variable de couche de données” dans GTM pour récupérer dynamiquement la valeur du formulaire et l’exploiter dans notre déclencheur.

Pour la méthode GTM4WP : remplissez la variable avec “gtm4wp.cf7formid”

Pour la méthode event-listener : remplissez la variable avec “formId”

Exemple de variable avec l’event listener :

Vous pouvez vérifier que votre variable remonte bien la donnée choisie en refaisant un test et en vérifiant dans la section Variable.

Créer le déclencheur

• Créez un déclencheur “événement personnalisé”
• Nom de l’événement : “cf7submission” ou ““gtm4wp.contactForm7Submitted” selon la méthode choisie
• Conditions dans lesquelles le déclencheur est exécuté :
• Sélectionner la variable que vous avez créé (moi je l’avais nommée Form_contact)
• Valeur : ID du formulaire (sans forcément effectuer de test, vous pouvez trouver les divers ID de formulaire sur le plugin CF7 dans WordPress)

Et voilà ! Le tour est joué ! (exemple ci-dessous avec la méthode event-listener)

Vous n’avez plus qu’à créer une balise et tester son déclenchement

Finaliser le tracking CF7 : créer une Balise Google Analytics 4

Balise événement GA4 simple

Voici l’étape ultime pour pouvoir tracker un formulaire Contact Form 7 (CF7) avec GTM en remontant les données sur Google Analytics 4 afin d’analyser les résultats à l’avenir.

Pour la configuration de base de Google Analytics 4 avec GTM, veuillez vous référer à cet article dédié (2 minutes de lecture). Nous allons ici créer directement une balise “événement GA4” :

Ici, je prends l’exemple d’un formulaire de contact pour l’un de mes clients qui est spécialisé en installation énergétique. J’ajoute simplement le nom de l’événement qui remontera dans GA4 tel que “demande_contact” ainsi que le déclencheur précédemment créé lors de la complétion d’un formulaire CF7.

Et c’est fini ! Mais vous pouvez aller plus loin si vous le souhaitez

Remonter les champs du formulaire CF7 dans GA4

Exemple : mon client souhaite remonter sur GA4 les réponses concernant le type d’installation énergétique choisi dans son formulaire de contact.

Voici le datalayer une fois le formulaire rempli et nous souhaitons remonter dynamiquement la valeur du champ encadré en jaune :

Il s’agit d’une variable de couche de données.

Pour récupérer la valeur “Pompe à chaleur” (ou autre réponse du champ nommé “field-4-residence”), il faut donc indiquer dans la variable la valeur suivante : response.6.value

Attention ce n’est pas response.7.value même si c’est la 7ème ligne, car la première ligne est considérée comme response.0.value.

Il ne vous reste plus qu’à indiquer cette variable dans vos paramètres GA4 et le tour est joué :

Si vous avez besoin d’un spécialiste en tracking avec GTM, vous pouvez me contacter via mon formulaire de contact.

Bon tracking à tous !