Le suivi des événement e-commerce est indispensable aux propriétaires de sites de vente pour pouvoir évaluer au mieux les performances de leurs efforts marketing. Mais si votre activité consiste plutôt à générer du trafic pour initier des contacts qui se transformeront en ventes dans un second temps alors c’est le suivi des différents points de contact présents sur votre site qui vous permettra de faire ce travail.
D’une « simple » inscription à une newsletter jusqu’à une demande de devis ou de RDV toutes ces actions, plus ou moins qualifiées et engageantes, vont passer le remplissage de formulaires qu’il est donc nécessaire de suivre dans GA4. Or, selon la technologie de votre formulaire ou l’extension que vous aurez utilisé pour le placer sur votre site, ce suivi pourra être plus où moins difficile à mettre en place.
Nous allons donc voir dans cette article 3 méthodes qui vous sortiront d’affaire dans quasiment 100% des situations.
Pose du tag Google sur le site par GTM
Vous le savez probablement déjà, notamment si vous avez lu d’autres articles du site, mais avant d’avancer dans le moindre tracking d’événement pour GA4 il faut d’abord mettre en place la balise Google principale sur toutes les pages de votre site.
Sans entrer trop dans le détail pour cet article rendez vous donc dans la partie admin de votre propriété GA4 au niveau du flux de données pour récupérer son identifiant de mesure (au format G-XXXXXXXXXX).
Direction ensuite Google Tag Manager pour créer une nouvelle balise du type « Balise Google » à déclencher sur toutes les pages dans laquelle vous collerez votre ID de mesure sans oublier le paramètre « send_page_view ».
Je ne rentre pas dans le détail ici de tout les paramètres de base d’une configuration GA4 ou de la gestion du consentement des visiteurs car ces points sont déjà traités dans d’autres articles mais ce sont évidemment des choses à mettre en place acec attention.
Une fois cette balise en place il va donc falloir ajouter des balises de suivis d’événements pour GA4 qui se déclencheront lors du remplissage validé de vos formulaires par les visiteurs. Or c’est la création de ces déclencheurs qui pourra être l’étape la plus complexe de ce tracking car tous les formulaires n’ont pas le même comportement une fois remplis :
- Certains redirigent les internautes vers une page de remerciements avec une url dédiée
- D’autres envoient un événement à GTM qui acte leur remplissage réussi (avec ou sans rechargement de page)
- Et d’autres enfin ne font qu’afficher un message de succès sans autre action complémentaire
Test du comportement des formulaires dans Google Tag Manager
Pour préparer au mieux la création de vos déclencheurs la meilleure solution consiste donc à tester le comportement des formulaires de votre site en mode prévisualisation de GTM.
Avant de lancer cette prévue rendez vous dans la section variables de votre conteneur GTM pour activer toutes les variables liées aux formulaires. Ces 6 variables (Form Classes, Form Element, Form ID, Form Target, Form Text et Form URL) vont en effet être capables de capter dans un certain nombre de cas des données très utiles pour la création des déclencheurs.
Vous aurez peut être la surprise de constater que dans votre cas ces variables de s’alimentent pas lors du remplissage de vos formulaires ; ce n’est pas une anomalie en soi mais simplement une spécificité liée à certaines technologies de sites.
Lancez donc la prévue GTM (le bouton « Prévisualiser » en haut à droite) et remplissez vos formulaires comme le feraient vos visiteurs. Vous rencontrerez alors l’un des 3 cas suivants.
Le formulaire redirige vers une page de confirmation de son remplissage
Il s’agira du cas le plus simple à suivre car vous aurez alors dans GTM des variables pre-alimentées avec le chemin et l’url de cette page de confirmation. Historiquement la majorité des formulaires fonctionnaient ainsi. C’est aujourd’hui un peu moins courant mais beaucoup d’extensions (comme Contact Form 7 ou Ninja Form pour WordPress) permettre encore, soit nativement soit avec des modules complémentaires, de reproduire ce type de configuration.
Le formulaire envoie un événement lisible par GTM et alimente les variables Form
Ce second cas sera lui aussi assez facile à gérer car nous avons directement des éléments sur lesquels nous appuyer pour créer les déclencheurs. L’événement « Form Submit » lisible par GTM nous permettra de créer le déclencheur et les variables Form Classes, ID, Target, etc… nous donneront la possibilité si nécessaire de différencier les formulaires. Par exemple les formulaires WordPress crées avec les très populaires extensions Contact Form 7 ou WPForms ont nativement ce type de comportement.
Le formulaire affiche un message de confirmation mais n’envoie aucune donnée à GTM
Ce dernier cas sera le plus complexe à traiter car vous n’aurez alors aucune donnée envoyée à GTM (ni événement, ni variables Form) pour vous permettre de créer un déclencheur. L’extension WordPress Ninja Forms, dans son fonctionnement initial, produit par exemple ce type de résultat. Il faudra donc passer par une configuration de GTM un peu plus avancée pour suivre ce type de formulaire comme nous allons le voir un peu plus loin.
Méthode 1 : création d’un déclencheur sur la vue de page de destination
Si vous êtes dans le premier cas des tests ci-dessus il vous suffira de créer un déclencheur dans GTM basé sur la vue de la page de confirmation affichée après le remplissage du formulaire. Dans la section déclencheurs de GTM créez en donc un nouveau. Vous prendrez alors « Page vue » en type de déclencheur avec une condition sur le chemin de la page affichée.
Repassez ensuite dans la section balises de GTM pour créer une balise d’événements pour GA4 qui utilisera le déclencheur que vous venez de créer. Pour ce qui est du nom de l’événement envoyé à GA4 vous pouvez soit utiliser l’une des recommandations faite page sa documentation soit créer un nom plus parlant pour vous. Dans le second cas le nommage reste totalement libre ; je vous conseille toutefois pour plus de cohérence avec les événement « standards » de GA4 de respecter ces 3 consignes (non obligatoires) :
- N’utiliser que des minuscules
- Remplacer les espaces par des underscores « _ »
- Ne pas utiliser de caractères accentués
Et comme toujours si vous souhaitez tester le résultat lancez d’une part une prévisualisation de GTM et d’autre par un DebugView GA4 pour simuler de nouveau le remplissage du formulaire. Si tout fonctionne comme prévu vu verrez a balise se lancer dans la fenêtre tag assistant de GTM et vous aurez la remonté d’événement dans GA4.
Méthode 2 : création d’un déclencheur sur l’événement d’envoi de formulaire
Si vous êtes dans le second cas des tests précédents la configuration du déclencheur GTM sera également très rapide. Créez en donc un nouveau en sélectionnant « Envoi de formulaire en type de déclencheur ». Dans le cas présent nous n’allons pas ajouter de contrainte supplémentaire mais vous pourrez, si vous le souhaitez, limiter le déclenchement à certaines conditions prises sur les variables Form ID et autres que nous avons vues précédemment. Par exemple vous pourriez souhaiter créer un déclencheur spécifiques à certains ID de formulaires afin d’utiliser pour eux un autre nom d’événement dans GA4 que pour les autres.
Puis comme dans le cas précédent vous pourrez ensuite créer une balise d’événement pour GA4 basée sur ce déclencheur.
Et de nouveau pour le test passez par le DebugView GA4 et la prévisualisation de GTM.
Méthode 3 : création d’un déclencheur sur la visibilité du message de confirmation de remplissage du formulaire
Le dernier cas de nos tests précédents semblait le plus complexe puisque nous n’avions ni page de remerciement affichée ni aucun envoi d’événement vers GTM lié au remplissage du formulaire. Dans cette situation il va falloir s’intéresser au message affiché dans la page après la soumission.
Nous allons faire un clic droit sur ce message puis choisir « inspecter » pour ouvrir la console de notre navigateur à la recherche d’un élément de code html spécifique à ce message. L’élément le plus précis que nous pourrions trouver serait un id associé à la balise permettant son affichage.
<div id="abc">Message de confirmation</div>Malheureusement ce cas n’est pas très fréquent car les id de balises ne sont pas trop répandus. Par contre beaucoup de balises html, et surtout celles ayant ce type de comportement, ont une classe css associée qui va permettre de gérer leur affichage et dans notre cas de les distinguer.
<div class="style-du-message">Message de confirmation</div>C’est ce second cas que nous avons ici et nous allons donc noter le nom de la classe css associée au message.
Avec cette valeur nous pouvons retourner dans GTM pour créer un déclencheur de type « Visibilité de l’élément » (qui ne se vérifie que lorsque l’éléments concerné devient visible dans la page) ayant pour mode de sélection « Sélecteur CSS » (nous aurions pris ID si nous avions trouvé un) et comme valeur le nom de la classe que nous avons noté (toujours précédée d’un point).
Nous choisirons pour finir une exécution une seule fois par page (pour éviter les doublons en cas de rechargements intempestifs) et nous cocherons « Observer les modifications DOM » dans les paramètres avancés.
Le plus difficile étant fait nous pouvons créer enfin notre balise d’événement pour GA4 en sélectionnant ce déclencheur d’activation.
Quant à sa vérification en mode prévue de GTM il faut chercher dans Tag Assistant l’événement « Element Visibility » qui doit être maintenant présent à chaque affichage du message de confirmation lié au remplissage du formulaire et sur lequel la balise GA4 est envoyée.
Conclusion
Le suivi du remplissage de vos formulaires dans GA4 représente une étape capitale de la mesure des performances de votre site web. Selon la technologie de votre site et/ou de vos formulaires, la méthode pour effectuer ce suivi pourra différer mais en suivant ce guide vous trouverez forcément une solution compatible avec votre configuration.
