Dans ce guide, nous vous expliquons comment suivre des événements personnalisés dans Formaloo avec JavaScript.
Les formulaires Formaloo disposent d’événements intégrés qui vous aident à suivre et à surveiller les interactions avec le formulaire à différentes étapes.
En les associant à des outils de suivi comme Google Tag Manager (GTM) ou Facebook Pixel, vous pouvez facilement surveiller l’activité du formulaire et configurer des déclencheurs personnalisés pour vos actions marketing.
Que vous suiviez les soumissions ou les chargements de formulaire, ce guide propose une solution simple, adaptée aussi bien aux débutants qu’aux utilisateurs avancés.
Guide étape par étape :
Les formulaires Formaloo disposent de plusieurs événements intégrés qui facilitent leur suivi et leur utilisation avec des services comme Google Tag Manager (GTM) et Facebook Pixel.
Ces événements se produisent à différentes étapes de l’activité du formulaire : vous pouvez donc les utiliser pour suivre plus précisément les interactions avec le formulaire.
Vous trouverez ci-dessous la liste des principaux événements :
Liste des principaux événements
formaloo_beforeLoad: se produit lorsque le formulaire est détecté par votre navigateur, mais avant qu’il ne soit entièrement chargé.formaloo_load: déclenché lorsque les données du formulaire sont récupérées avec succès depuis le serveur.formaloo_loadFail: se produit en cas de problème lors de la récupération des données du formulaire depuis le serveur.formaloo_init: déclenché lorsque les états et les valeurs du formulaire sont configurés et prêts à l’emploi.formaloo_submitRequest: se produit lorsque le formulaire est en cours de soumission.formaloo_submitSuccess: déclenché lorsque le formulaire est soumis avec succès.formaloo_submitFail: se produit lorsque la soumission du formulaire échoue.
Avec JavaScript, vous pouvez surveiller ces événements ou les associer à GTM ou à Facebook Pixel. Vous pouvez ainsi configurer un suivi ou des déclencheurs personnalisés adaptés à vos besoins.
Exemple : suivre une soumission de formulaire avec du JavaScript personnalisé
Vous pouvez utiliser l’événement formaloo_submitSuccess pour savoir quand un formulaire a été soumis avec succès.
Voici un exemple simple d’utilisation de JavaScript pour suivre cet événement et déclencher un message d’alerte personnalisé.
Exemple de code JavaScript :
<script> document.addEventListener('formaloo_submitSuccess', function() { alert('hello world!') }) </script>Dans cet exemple, un simple message « Hello World! » s’affiche lorsque le formulaire est soumis avec succès.
Il s’agit d’une implémentation de base, mais vous pouvez facilement la modifier pour déclencher des actions plus avancées, comme l’envoi de données vers Google Tag Manager (GTM) ou Facebook Pixel.
Configuration étape par étape avec cet exemple
Accédez aux paramètres de votre formulaire : dans l’éditeur de formulaire, ouvrez le menu des paramètres.
Repérez le champ « Custom JS » : faites défiler le panneau des paramètres jusqu’au champ « Custom JS ».
Ajoutez votre code JavaScript : collez le code ci-dessus dans le champ Custom JS.
Affichez votre formulaire : cliquez sur View pour vérifier que vos modifications sont appliquées.
Voici une démonstration de l’ajout du code JS personnalisé et du déclenchement de l’événement :
Grâce à ces événements et à du JavaScript personnalisé, vous pouvez suivre plus précisément les interactions avec vos formulaires et les intégrer à vos outils de suivi pour obtenir de meilleures analyses.