Voici quelques points à garder à l’esprit lorsque vous ajoutez du JS personnalisé à votre formulaire :
1. Placez votre code JavaScript dans une balise <script>
<script> // Your JavaScript code here </script>
2. Veillez à n’ajouter que du code JavaScript dans la zone
Les balises HTML (à l’exception de la balise script) ou d’autres langages ne fonctionneront pas.
➔ Code valide :
<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','GTM-XXXXXX'); // Create the noscript element var noscript = document.createElement('noscript'); var iframe = document.createElement('iframe'); iframe.src = 'https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX'; 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>
➔ Code non valide avec des balises HTML dans la zone Custom JS :
<!-- 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', 'GTM-XXXXXX'); </script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"> </iframe> </noscript> <!-- End Google Tag Manager (noscript) -->
3. Vérifiez la syntaxe de votre code dans un éditeur de code comme VSCode
Après vous être assuré qu’il n’y a pas d’erreur de syntaxe, copiez-le et collez-le dans la zone Custom JS du formulaire.
4. Si vous devez ajouter du code HTML à votre page, utilisez les méthodes de manipulation du DOM en JavaScript
Reportez-vous au point 2 pour des exemples valides de manipulation du DOM en JavaScript.
5. Lorsque vous ajoutez plusieurs codes JS avec plusieurs balises script dans Custom JS, évitez d’imbriquer les balises script
➔ Code valide :
<script> console.log("inside script 1") </script> <script> console.log("inside script 1") </script>
➔ Code non valide :
<script> console.log("inside script 1") <script> console.log("inside script 1") </script> </script>
6. Voici tous les événements personnalisés Formaloo que vous pouvez écouter et suivre en JS :
"formaloo_beforeLoad"
"formaloo_load"
"formaloo_loadFail"
"formaloo_init"
"formaloo_submitRequest"
"formaloo_submitSuccess"
"formaloo_submitFail"