WordPress représente de très loin le CMS le plus utilisé au monde et Contact Form 7 est l’une de ses extensions de création de formulaire les plus connues. Difficile donc de compter le nombre de sites web utilisant cette configuration pour gérer leur formulaires de contact ou de demandes de devis.

Le point commun de tous ses sites va être le besoin de mesurer dans leur outil d’analytics le nombre de remplissages de ces formulaires afin d’analyser leur performances et les résultats de leurs actions de marketing d’acquisition.

Nous allons donc voir ici comment mettre ce type de suivi en place pour Google Analytics 4 à l’aide de Google Tag Manager.

Mise en place la balise Google principale sur votre site

Cette première étape peut sembler évidente mais elle reste indispensable à tout suivi GA4. Sans entrer dans le détail car cela a déjà été fait sur beaucoup d’autres articles du blog il s’agit de déclencher la Balise Google disponible dans GTM sur l’ensemble des pages du site en y intégrant l’ID de votre flux de données pour GA4 et le paramètre send_page_view réglé sur vrai.

Pour les sujets liés aux conditionnement des tags dans le cadre de la RGPD et à la mise en place du Consent Mode V2 de Google vous pouvez vous référer à cet article.

Une fois cette balise en place le but du jeu va être d’envoyer en complément une balise GA4 de suivi d’événement lorsque le formulaire Contact From 7 que vous souhaitez suivre sera correctement complété par l’un de vos visiteurs. Mais cet envoi de balise n’est pas si simple car, sauf configuration complémentaire, le remplissage réussi de ces formulaires ne fait pas changer de page (ce qui aurait pu servir de déclencheur dans GTM) et n’envoie pas de données dans le Data Layer de votre site.

Envoi des événements DOM générés par Contact Form 7 au Data Layer

Heureusement pour notre suivi la documentation de Contact Form 7 stipule que lors des soumissions de formulaires des événements DOM sont générés automatiquement :

  • wpcf7invalid – Quand la soumission a été faite mais que le mail n’a pas été envoyé à cause de champs mal renseignés.
  • wpcf7spam – Quand la soumission a été faite mais que le mail n’a pas été envoyé à cause d’une possibilité de spam.
  • wpcf7mailsent – Quand la soumission a été faite et que le mail a bien été été envoyé.
  • wpcf7mailfailed – Quand la soumission a été faite mais que le mail n’a pas été envoyé à cause d’une erreur.
  • wpcf7submit — Quand la soumission a été faite sans prendre en compte le succès ou l’échec de l’envoi de mail.

L’événement « wpcf7mailsent » est donc celui qui nous intéresse car il marque le succès complet de l’envoi du formulaire par l’internaute.

Nous allons donc mettre en place une balise GTM qui va lire cet événement DOM et créer un événement de Data Layer équivalent avec en plus l’ID du formulaire concerné. Vous trouverez ci-dessous le code de cette balise html.

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

Cette balise peut être placée sur toutes les pages du site ou uniquement sur celles contenant des formulaires. Nous avons créé ici un déclencheur sur l’url de la page d’un formulaire de contact.

Création d’un déclencheur sur l’envoi réussi des formulaires

Si vous lancez une prévisualisation de GTM à cette étape vous pourrez constater que nous disposons maintenant d’un Data Layer enrichi pour chaque envoi réussi de formulaire.

Pour passer à l’étape suivante nous allons créer une variable dans GTM qui va récupérer l’ID du formulaire qui a été remplis par l’internaute. Il s’agit d’une variable de couche de données récupérant le « formId » du Data Layer ci dessus.

Avec cette variable et l’événement de Data Layer nous pouvons maintenant créer un déclencheur qui sera vérifié lors du remplissage réussi des formulaires Contact Form 7 et uniquement si l’ID du formulaire concerné est celui du formulaire de contact que nous voulons suivre.

Création de la balise d’événement pour GA4

La dernière étape de notre tracking consiste à créer dans GTM une balise d’événement pour GA4 qui s’appuie sur le déclencheur que nous venons de créer.

A partir du moment où toutes les étapes précédentes ont bien été complétées, la création de cette balise d’événement est très simple. Pensez simplement à bien alimenter l’ID de mesure avec l’ID de votre flux de données GA4 et à utiliser le déclencheur créé juste avant.

Pour ce qui est du nom de l’événement vous pouvez utiliser celui que vous souhaitez de manière libre ou vous appuyer sur l’événement « generate_lead » qui fait partie des événement recommandés par GA4. Je vous conseille toutefois pour une meilleure lisibilité dans GA4 de rester sur un nommage ne contenant que des minuscules et des underscores comme séparateurs de mots.

Test du bon fonctionnement de l’envoi d’événement à GA4

Avant de déployer toutes les modifications que vous venez de faire dans GTM la bonne pratique consiste à tester le résultat de ces mises en places. Il s’agit donc :

  • De cliquer sur le bouton « Prévisualiser » en haut à droite de votre GTM
  • De lancer le « DebugView » depuis l’administration de votre propriété GA4

Une fois ces deux étapes complétées rendrez vous depuis la prévisualisation GTM vers la pages contenant le formulaire à suivre et complétez le.

Si tout fonctionne comme prévu dans la fenêtre du Tag Assistant de GTM vous retrouverez dans la colonne de gauche l’événement reçu par GTM qui nous sert de déclencheur et dans la zone centrale la confirmation que la balise GA4 a bien été lancée.

Et dans le mode debug de GA4 vous verrez apparaitre l’événement envoyé par la balise, ce qui confirmera que tout fonctionne comme prévu. Il ne restera donc plus qu’à déployer la version de GTM avec toutes ses modifications.

Bascule de l’événement en conversion

Environ 24 heures après votre test vous verrez l’événement remonter dans les rapports de GA4. Et s’il représente une action majeure pour votre activité vous pourrez alors le marquer comme une conversion.

Pour cela rendez vous dans les paramètres de votre propriété GA4, dans la rubrique « Affichage des données > Evénements ». Vous y retrouverez tous les événements reçus par votre propriété et à droite de chacun d’eux un bouton pour le transformer en conversion.

Conclusion

Comme vous aurez pu le constater la configuration du suivi des remplissages Contact Form 7 dans GA4 est tout à fait réalisable dans GTM sans avoir à ajouter d’extension supplémentaire à votre site WordPress. Pour cela il suffit de suivre la méthode que nous venons de décrire.

  • Pose de la balise de configuration Google sur votre site
  • Création d’une balise Event Listener pour transmettre à GTM les infos sur le succès du remplissage des formulaires
  • Création d’un déclencheur GTM sur ce succès
  • Envoi d’une balise d’événement GA4 par ce déclencheur
  • Bascule de l’événement reçu par GA4 en conversion (optionnel)

Leave a Reply

Your email address will not be published.