Track Elementor form submissions through Google Analytics with Google Tag Manager can be a bit daunting. Numerous online tutorials offer guidance, but many fall short in providing a comprehensive and foolproof approach. In this guide, we’ll explore a method that relies on data layers and window events, steering away from the common but less reliable practices like DOM changes or element visibility adjustments.

Content
TogglePrerequisites:
Before delving into the step-by-step process, ensure you have Google Analytics and Google Tag Manager properly set up on your website. Familiarity with both tools is assumed, and the Google Tag Manager for WordPress plugin is recommended for its capacity to integrate various data layers seamlessly.
Leveraging Data Layers and Window Events to Track Elementor Form Submissions:
Unlike conventional approaches, this method capitalizes on the ‘submit_success’ event triggered by Elementor upon successful form submission. This event takes place in the window object, signifying a background process invisible to users.
To implement this:
Add Custom Event to Data Layer:
Employ the following code snippet in your website’s footer using methods like directly modifying the ‘footer.php’ file (risky), embedding an HTML widget in the footer (requires remembering the custom HTML), or using the Header Footer Code Manager plugin (recommended):
<script>
jQuery( document ).ready(function( $ ){
jQuery( document ).on('submit_success', function(e) {
const data = {
event: 'ElementorFormSubmitted',
}
dataLayer.push(data)
console.log('New dataLayer: ', dataLayer)
});
});
</script>
This code listens for the ‘submit_success’ event, adding a custom event (‘ElementorFormSubmitted’) to the dataLayer. Google Tag Manager (GTM) will use this as a trigger to notify Google Analytics of a successful form submission.
Testing the Elementor Form Submissions conversion:
Create a new page with an Elementor form (even a single-field form will do). Assign an ID title to your form under ‘Additional Options.’ Save the page, ensuring the form doesn’t redirect to another page upon submission. Open the page in a new tab, access the browser console (Ctrl+Shift+J or Cmd+Shift+J), and submit the form. You should observe a new object in the dataLayer with the key ‘event’ and the value ‘ElementorFormSubmitted.’
If this is successful, proceed to set up the GTM part.
Configuring Google Tag Manager:
Go to GTM and navigate to ‘Variables’ > ‘Configure.’ Ensure that Event, Form ID, and Page Path are enabled.
Move to ‘Triggers’ > ‘New’ > ‘Other’ > ‘Custom event.’ Set the Event name as ‘ElementorFormSubmitted’ (or your chosen custom event name) and give the trigger a name. Save the trigger.
Setting up Google Analytics Tag:
In GTM, go to ‘Tags’ > ‘New’ > ‘Google Analytics: Universal Analytics.’
Choose ‘Event’ as the Track Type. Define the Category (e.g., FormSubmission).
Click on the block icon next to the Action field, select ‘Form ID,’ and set ‘Page Path’ as the label.
Testing in Google Analytics
Enable Preview in GTM and test if everything is functioning correctly in Google Analytics Realtime Events.
Conclusion: Why is important to track Elementor Form Submissions
This method, focusing on data layers and window events, offers a robust and reliable way to track Elementor form submissions in Google Analytics through Google Tag Manager. By following these steps and customizing as needed, website owners and marketers can gain deeper insights into user interactions, measure campaign success, and make informed decisions to optimize their online presence.
Navigating the intricacies of web development tools like Elementor, Google Analytics, and Google Tag Manager empowers businesses to stay ahead in the ever-evolving digital landscape, ensuring a seamless user experience and achieving online objectives with precision.