Tracker un Formulaire Contact Form 7 (CF7) avec GTM

Pour tracker un formulaire Contact Form 7 avec GTM, vous avez deux options : ajouter un event listener JavaScript via une balise HTML personnalisée dans GTM, ou installer le plugin GTM4WP sur WordPress. Les deux méthodes permettent de pousser un événement dans le dataLayer à chaque soumission de formulaire, que vous pouvez ensuite remonter dans Google Analytics 4. Voici les deux méthodes en détail.

• Méthode 1 : push script via GTM
• Méthode 2 : plugin WordPress

Méthode 1 : Push Script via GTM

Nous allons ajouter un 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).

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

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 :

1. Lancez une prévisualisation puis réalisez un test de formulaire rempli.
2. 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.

Sans forcément effectuer de test, vous pouvez trouver les divers ID de formulaire sur le plugin CF7 dans WordPress.

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éé (ex : Form_contact)
  • Valeur : ID du formulaire

Et voilà ! Le tour est joué ! 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.

Nous allons 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 — nous souhaitons remonter dynamiquement la valeur du champ encadré :

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 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 !