Dans ce guide, nous vous expliquons comment suivre les événements de vos formulaires Formaloo à l’aide de Google Analytics et de Google Tag Manager (GTM).
En suivant les événements de formulaire, comme les soumissions, les chargements et les erreurs, vous pouvez mieux comprendre comment les visiteurs interagissent avec vos formulaires.
Ce tutoriel est idéal pour toute personne souhaitant surveiller les performances de ses formulaires, suivre les conversions ou déclencher des actions spécifiques dans le cadre de ses actions marketing.
Que votre formulaire soit hébergé sur un sous-domaine, un domaine personnalisé ou intégré à un autre site, ce guide vous fournit des étapes simples pour intégrer Google Analytics à vos formulaires Formaloo.
Événements personnalisés dans Formaloo
Les formulaires Formaloo disposent de plusieurs événements intégrés qui peuvent être suivis avec Google Tag Manager.
Vous pouvez choisir parmi les événements suivants, selon vos besoins :
formaloo_beforeLoad: lorsque le formulaire est détecté mais pas encore entièrement chargé.formaloo_load: lorsque les données du formulaire sont chargées avec succès.formaloo_loadFail: si le chargement du formulaire échoue.formaloo_submitRequest: lorsque le formulaire est en cours de soumission.formaloo_submitSuccess: lorsque le formulaire est soumis avec succès.formaloo_submitFail: lorsque la soumission du formulaire échoue.
📝 Informations complémentaires :
Pour améliorer votre configuration de suivi et explorer le suivi avancé des événements, consultez notre guide Comment suivre des événements personnalisés dans Formaloo avec JavaScript.
Cet article vous explique comment utiliser JavaScript pour surveiller les principaux événements de formulaire et créer des déclencheurs personnalisés pour des analyses plus approfondies.
Guide étape par étape :
1. Installer Google Tag Manager (GTM) :
Pour suivre les événements de votre formulaire avec GTM, procédez comme suit :
Accédez à Google Tag Manager et connectez-vous avec votre compte Google. Découvrez comment créer un compte Google.
Dans Tag Manager, cliquez sur l’onglet Accounts (en haut à gauche), puis sélectionnez Create Account (en haut à droite). Découvrez l’interface de Tag Manager.
Dans la section Account Setup, procédez comme suit :
Saisissez un nom de compte.
Sélectionnez le pays du compte.
Dans la section Container Setup, procédez comme suit :
Saisissez un nom de conteneur (par exemple, le lien de votre site web ou le nom de votre projet d’application)
Sélectionnez « Web » comme type de conteneur.
Cliquez sur Create et acceptez les conditions d’utilisation.
Dans l’onglet Workspace, sélectionnez l’ID de votre conteneur (qui commence par « GTM ») et copiez cet ID.
2. Ajouter le code GTM à votre formulaire
Si votre formulaire se trouve sur un sous-domaine ou un domaine personnalisé,
remplacez « YOUR_GTM_ID » dans le code ci-dessous par votre véritable ID GTM :
<script>
(function() {
// Google Tag Manager script
(function(w,d,s,l,i){
w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),
dl=l!='dataLayer'?'&l='+l:'';
j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR_GTM_ID');
// Create the noscript element
var noscript = document.createElement('noscript');
var iframe = document.createElement('iframe');
iframe.src = 'https://www.googletagmanager.com/ns.html?id=YOUR_GTM_ID';
iframe.height = '0';
iframe.width = '0';
iframe.style.display = 'none';
iframe.style.visibility = 'hidden';
noscript.appendChild(iframe);
// Insert the noscript element into the body
document.body.appendChild(noscript);
})();
</script>
Comment utiliser ce code :
Copiez le code.
Ouvrez votre formulaire dans l’éditeur.
Cliquez sur l’icône des paramètres dans l’en-tête.
Faites défiler le panneau latéral jusqu’à Custom JS
Collez le code dans Custom JS
Assurez-vous que votre formulaire est enregistré, puis ouvrez-le dans un autre onglet.
Si votre formulaire est intégré à une autre page via une balise script
Remplacez « YOUR_GTM_ID » dans le code par votre ID, puis collez-le le plus haut possible dans la balise head de la page hôte.
Code d’en-tête GTM :
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR_GTM_ID');</script>
<!-- End Google Tag Manager -->
Remplacez « YOUR_GTM_ID » dans le code par votre ID, puis collez-le immédiatement après la balise body d’ouverture de la page hôte.
Code body GTM :
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=YOUR_GTM_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
4. Configurer les balises dans Google Tag Manager :
Ouvrez le conteneur Tag Manager que vous venez de créer. Découvrez l’interface de Tag Manager.
Dans l’onglet Workspace, cliquez sur Tags (à gauche) et sélectionnez New (en haut à droite).
Choisissez Google Analytics comme type de balise et configurez-la avec votre ID de suivi. Dans Tag ID, saisissez votre ID de balise. Découvrez comment trouver votre ID de balise.
Définissez le déclencheur sur « All Pages » pour un suivi général, ou personnalisez-le selon vos besoins. Dans la section Triggering, sélectionnez Initialization - All pages trigger. En savoir plus sur chaque type de déclencheur.
Cliquez sur Save.
5. Prévisualiser et publier votre configuration GTM :
Une fois vos balises configurées, utilisez le mode Preview de Google Tag Manager pour vérifier que le suivi fonctionne correctement. Après le test, cliquez sur Submit pour publier la configuration.
Vérifier les balises
Accédez à Google Tag Manager et ouvrez le conteneur Tag Manager.
Dans l’onglet Workspace, cliquez sur Preview (en haut à droite) pour lancer Google Tag Assistant dans un nouvel onglet.
Saisissez l’URL de votre site web et cliquez sur Connect. Découvrez comment déboguer avec Tag Assistant.
Publier les balises
Dans l’onglet Workspace, cliquez sur Submit (en haut à droite)
Dans la section Submission Configuration, procédez comme suit :
Sélectionnez Publish and Create Version pour publier les modifications sur votre site. Pour enregistrer les modifications sans les publier, sélectionnez plutôt Create Version.
Saisissez un nom et une description pour la version.
Sélectionnez Activity History pour passer en revue les modifications effectuées depuis la version précédente.
Cliquez sur Publish (en haut à droite).
6. Activer le mode débogage dans GTM :
Utilisez le mode aperçu et débogage de GTM pour vérifier que tout fonctionne correctement. Ouvrez votre formulaire dans un nouvel onglet pendant que GTM est en mode aperçu et vérifiez que les événements sont correctement enregistrés.
Pour activer le mode aperçu et débogage pour l’espace de travail actuel :
Accédez à Google Tag Manager.
Connectez-vous à votre compte Google. Découvrez comment créer un nouveau compte Google.
Ouvrez le conteneur Tag Manager que vous souhaitez modifier.
Dans l’onglet Workspace, cliquez sur Preview (en haut à droite) pour lancer Google Tag Assistant dans un nouvel onglet.
Saisissez l’URL de votre site.
Certains sites ou certaines pages peuvent ne pas fonctionner correctement en raison du paramètre de débogage ajouté à l’URL. Dans ce cas, vous pouvez décocher la case Include debug signal in the URL.
Cliquez sur Connect. Votre site s’ouvre dans une nouvelle fenêtre et affiche Connected en bas à droite.
Revenez à l’onglet Tag Assistant et cliquez sur Continue pour accéder à l’interface de débogage.
7. Quitter le mode aperçu et débogage
Pour quitter le mode aperçu et arrêter le débogage :
Cliquez sur le X dans le coin supérieur gauche de l’interface de débogage de Tag Assistant.
Cliquez sur Stop debugging sur la page d’activation de Tag Assistant.
8. Ajouter le suivi d’événements personnalisés :
Pour commencer à suivre ces événements avec Google Analytics, procédez comme suit :
Si votre formulaire est hébergé sur un sous-domaine ou un domaine personnalisé, collez le code suivant dans le Custom JS du formulaire, juste après la balise script d’installation de GTM.
Si votre formulaire est intégré à une autre page, ajoutez le code après le script d’installation de GTM dans l’en-tête de la page hôte.
Remplacez l’espace réservé « formaloo_custom_event » dans le code suivant par l’événement Formaloo de votre choix (par exemple, formaloo_submitSuccess pour suivre les soumissions réussies) :
Exemple : utiliser les événements personnalisés Formaloo avec GTM :
<script>
window.addEventListener('formaloo_custom_event', function(){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'your_event_name' // name the event you want to see in the GTM event logger
// add optinal details
});
});
</script>
Exemple : si vous souhaitez suivre une soumission de formulaire réussie, vous pouvez utiliser l’exemple suivant avec l’événement formaloo_submitSuccess
<script>
window.addEventListener('formaloo_submitSuccess', function(){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'form_success_submit'
});
});
</script>