In this guide, we will walk you through how to track your Formaloo form events using Google Analytics and Google Tag Manager (GTM).
By tracking form events such as submissions, loads, and errors, you can gain insights into how visitors interact with your forms.
This tutorial is perfect for anyone who wants to monitor form performance, track conversions, or trigger specific actions in their marketing efforts.
Whether your form is hosted on a subdomain, custom domain, or embedded on another site, this guide will provide you with easy-to-follow steps to integrate Google Analytics with your Formaloo forms.
Custom events in Formaloo
Formaloo forms have various built-in events that can be tracked using Google Tag Manager.
You can choose from the following events, depending on your needs:
formaloo_beforeLoad: When the form is detected but not yet fully loaded.formaloo_load: When the form’s data is successfully loaded.formaloo_loadFail: If the form fails to load.formaloo_submitRequest: When the form is submitting.formaloo_submitSuccess: When the form is successfully submitted.formaloo_submitFail: When the form submission fails.
📝 Additional insights:
To enhance your tracking setup and explore advanced event tracking, check out our guide on How to Track Custom Events in Formaloo using JavaScript.
This article walks you through how to use JavaScript to monitor key form events and create custom triggers for deeper insights.
Step-by-Step guide:
1. Installing Google Tag Manager (GTM):
To track your form events using GTM, follow these steps:
Go to Google Tag Manager and sign in with your Google Account. Learn how to create a Google Account.
In Tag Manager, click the Accounts tab (top left), then select Create Account (top right). Find your way around Tag Manager.
In the Account Setup section, follow these steps:
Enter an account name.
Select the country location for the account.
In the Container Setup section, follow these steps:
Enter a container name (for example, use your website link or app project name)
Select from these container type as "Web".
Click Create and agree to the Terms of Service.
In the Workspace tab, select your container ID (which starts with 'GTM') and copy the this ID.
2. Adding GTM code to your form
If your form is on a subdomain or custom domain,
replace "YOUR_GTM_ID" in the code below with your actual GTM ID:
<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>
How to use this code:
Copy code.
Open your form inside the editor.
Click on the settings icon on the header.
Scroll down to Custom JS inside the sidebar
Paste the code into Custom JS
Make sure your form is saved and then open your form in another tab.
If your form is embedded into another page via script tag
Replace the ID with "YOUR_GTM_ID" in the code, then paste it as high in the head tag of host page.
GTM header code:
<!-- 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 -->
Replace the ID with "YOUR_GTM_ID" in the code, then paste it immediately after the opening body tag of host page.
GTM body code:
<!-- 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. Configuring tags in Google Tag Manager:
Open the Tag Manager container you just created. Find your way around Tag Manager.
In the Workspace tab, click on Tags (on the left) and select New (top right).
Choose Google Analytics as the tag type and configure it with your tracking ID. In Tag ID, enter your Tag ID. Learn how to find your Tag ID.
Set the trigger as "All Pages" for general tracking or customize it based on your specific needs. In the Triggering section, select Initialization - All pages trigger. Learn more about each trigger type.
Click Save.
5. Preview and publish your GTM setup:
Once your tags are set, use Google Tag Manager's Preview mode to test if the tracking is working correctly. After testing, click Submit to publish the setup.
Verify tags
Go to Google Tag Manager, and open the Tag Manager container.
In the Workspace tab, click Preview (top right) to launch Google Tag Assistant in a new tab.
Enter your website URL and click Connect. Learn to debug with Tag Assistant.
Publish tags
n the Workspace tab, click Submit (top right)
In the Submission Configuration section, follow these steps:
Select Publish and Create Version to publish the changes to your site. To save the changes without publishing them, select Create Version instead.
Enter a name and description for the version.
Select Activity History to review the changes you've made since the previous version.
Click Publish (top right).
6. Enabling debug mode in GTM:
Use GTM's preview and debug mode to ensure everything is running smoothly. Open your form in a new tab while GTM is in preview mode, and check if the events are being logged properly.
To enable preview and debug mode for the current workspace:
Go to Google Tag Manager.
Sign in to your Google Account. Learn how to create a new Google Account.
Open the Tag Manager container you want to edit.
In the Workspace tab, click Preview (top right) to launch Google Tag Assistant in a new tab.
Enter your site's URL.
Some sites or pages might be broken by an additional debug parameter added to the URL. If so, you can uncheck the box Include debug signal in the URL.
Click Connect. Your site opens in a new window and displays as Connected in the bottom right.
Click back on the Tag Assistant tab and click Continue to access the debug interface.
7. Exit preview and debug mode
To exit preview mode and stop debugging:
Click the X in the upper left corner of the Tag Assistant debug interface.
Click Stop debugging on the Tag Assistant activation page.
8. Adding custom event tracking:
To start tracking these events with Google Analytics, follow these steps:
If your form is hosted on a subdomain or custom domain, paste the following code into the form's custom JS, just after the GTM installation script tag.
If your form is embedded on another page, add the code after the GTM installation script in the header of the host page.
Replace the "formaloo_custom_event" placeholder in the following code with your chosen Formaloo event (e.g., formaloo_submitSuccess for tracking successful submissions):
Example: Using Formaloo custom events with 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>
Example: If you want to track a successful form submission, you can use the following example with formaloo_submitSuccess event
<script>
window.addEventListener('formaloo_submitSuccess', function(){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'form_success_submit'
});
});
</script>