Le plugin le plus populaire pour intégrer des formulaires au sein d’un site WordPress est Contact Form 7. Comptant plus de cinq millions d’installations actives, son succès ne se dément pas.
En revanche, combien d’utilisateurs du plugin mesurent les envois via l’API proposé par le plugin lui-même ? Certainement beaucoup moins 🙂
Mauvaise méthode : Mesurer les envois via les clics sur le bouton depuis GTM
Si on souhaite mesurer les clics depuis un tag management system tel que GTM, la première idée va être de récupérer un sélecteur CSS sur le bouton d’envoi, pour tenter de catcher les clics générés sur celui-ci.
Je déconseille cette méthode pour plusieurs raisons, notamment car les CSS d’un site peuvent évoluer et il est toujours dangereux de rendre la collecte de données dépendante au front (HTML / CSS).
Bonne méthode : Mesurer les envois de manière fonctionnelle
La bonne méthode, de manière générale, est de tracker les boutons « critiques » en collaborant avec le développeur front-end du site web en question. L’idée va être d’envoyer l’événement que l’on souhaite récupérer via la fonction qui contrôle les actions du bouton.
Ainsi, la fonction qui renvoi un message à l’internaute du type « Merci pour votre envoi » doit être idéalement la même fonction qui renvoi vers votre container GTM un dataLayer.push() contenant les infos comme quoi un envoi vient d’être effectué et réussi.
Merci Contact Form 7
Contact Form 7 met à disposition des DOM events qui permettent justement de catcher les événements qui nous intéressent qui sont les suivants :
- wpcf7invalid : soumission envoyée, mais erreur au sein du formulaire
- wpcf7spam : soumission envoyée, mais email considéré comme un spam
- wpcf7mailsent : soumission envoyée et email envoyé
- wpcf7mailfailed : soumission envoyée mais email non envoyé
- wpcf7submit : soumission envoyée, sans tenir compte de si l’email a été correctement envoyé ou non (il s’agit de mon point de vue de l’event le plus pertinent à utiliser dans une majorité de cas)
En plus des événements, Contact Form 7 met également à disposition plusieurs propriétés permettant de contextualiser l’événement telles que :
- detail.contactFormId : l’ID du formulaire de contact
- detail.pluginVersion : la version du plugin
- detail.contactFormLocale : la locale (langue) du formulaire
- detail.containerPostid : l’ID du post dans lequel le form est inclus
A partir de ces informations, il suffit de créer un listener JavaScript standard pour écouter et catcher l’événement souhaité, en l’occurrence la soumission de notre formulaire. Grâce aux propriétés embarquées au sein de l’événement, on peut connaître l’ID du formulaire soumis pour le comparer à l’ID du formulaire pour lequel on souhaite collecter de la donnée.
Ensuite, il suffit de réaliser un dataLayer.push() pour envoyer à GTM la donnée sous forme d’événement et de variables GTM. A noter que l’on peut embarquer ce code dans un tag GTM sous forme d’HTML personnalisé que l’on peut charger sur toutes les pages ou bien l’embarquer directement au sein de WordPress, à vous de voir.
Voici un exemple de code que l’on peut écrire pour envoyer à GTM un événement lorsque le formulaire ayant pour ID « 1234 » vient d’être remplis et soumis avec succès :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> // Track the Contact Form 7 event document.addEventListener( 'wpcf7submit', function( event ) { // Check the form ID if ( '1234' == event.detail.contactFormId ) { // If it's the right form, perform a dataLayer.push() dataLayer.push({ 'event':'userAction', 'user_action_1': 'lead_form', 'user_action_2': 'submission', 'user_action_3': 'ok', }); } }, false ); </script> |
On voit ici qu’on peut facilement écouter l’événement, vérifier qu’il s’agit du formulaire qui nous intéresse et réaliser un dataLayer.push() pour en notifier GTM. Et tout ça sans être dépendant du front et sans devoir s’appuyer sur un sélecteur CSS, Jquery ou autre.
Il suffit ensuite de traiter la donnée pour l’envoyer là où vous le souhaitez, par exemple dans Google Analytics sous forme d’événement GA.
Note : vous trouverez la documentation officielle de Contact Form 7 concernant les événements DOM ici.