In this guide, we will walk you through how to track custom events in Formaloo using JavaScript.
Formaloo forms have built-in events that help you track and monitor form interactions at different stages.
By integrating with tracking tools like Google Tag Manager (GTM) or Facebook Pixel, you can easily monitor form activity and set up custom triggers for your marketing efforts.
Whether you're tracking submissions or form loads, this guide provides a straightforward, code-free solution for beginners and advanced users alike.
Step-by-Step Guide:
Formaloo forms have some built-in events that help make them easier to track and work with services like Google Tag Manager (GTM) and Facebook Pixel.
These events happen at different stages of the form’s activity, so you can use them to track form interactions more accurately.
In the following, you can see a list of key events;
List of key events
formaloo_beforeLoad: Happens when the form is detected by your browser, but before it’s fully loaded.formaloo_load: Triggered when the form’s data is successfully retrieved from the server.formaloo_loadFail: Occurs when there’s an issue retrieving the form’s data from the server.formaloo_init: Triggered when the form’s states and values are set up and ready to use.formaloo_submitRequest: Happens when the form is being submitted.formaloo_submitSuccess: Triggered when the form is submitted successfully.formaloo_submitFail: Occurs when form submission fails.
By using JavaScript, you can monitor these events or link them with GTM or Facebook Pixel. This allows you to set up custom tracking or triggers tailored to your needs.
Example: Tracking a form submission with custom JavaScript
You can use the formaloo_submitSuccess event to track when a form has been successfully submitted.
Below is a basic example of using JavaScript to track this event and trigger a custom alert message.
JavaScript code example:
<script> document.addEventListener('formaloo_submitSuccess', function() { alert('hello world!') }) </script>In this example, a simple "Hello World!" message will be displayed when the form is successfully submitted.
This is a basic implementation, but you can easily modify it to trigger more advanced actions, like sending data to Google Tag Manager (GTM) or Facebook Pixel.
Step-by-step setup with this example
Navigate to your form settings – In the form editor, open the settings menu.
Locate the “Custom JS” field – Scroll down to find the “Custom JS” field in the settings panel.
Add your JavaScript code – Paste the code shown above in the Custom JS field.
View your form – Click View to ensure your changes are applied.
Here’s a demo showing how to add the custom JS code and trigger the event:
Using these events and custom JavaScript, you can monitor form interactions more precisely and integrate them with your tracking tools for better data insights.