Tracking form submissions on your WordPress website is essential for understanding user interactions and improving conversions. Follow this step-by-step guide to set up Elementor Form tracking using Google Tag Manager (GTM).
Step 1: Copy the Tracking Code
First, copy the tracking code from my website. This code will help detect form submissions on your site.
Step 2: Add the Code to Google Tag Manager
Go to Google Tag Manager (GTM).
Go to Google Tag Manager (GTM).
Paste the copied tracking code into the HTML field.
Set the trigger to "All Pages" so the code runs across your site
Step 3: Submit the Tag
Once you’ve added the tag, click Submit in GTM.
Important: If you don’t submit, the tag will only work in preview mode, not in the live environment.
Step 4: Test the Setup in Preview Mode
Submit the form on your website
If everything is set up correctly, you should see a form submission event triggered in GTM.
Step 5: Capture the Event and Create a Tag
Step 6: Set Up the Final Tracking Tag
Use the event trigger you just captured.
Configure it to send form submission data to Google Analytics, Google Ads, or any other platform you want to track conversions in.
Submit it
That’s it! Now, your Elementor Form submissions are successfully tracked in GTM.
Need help setting this up? Feel free to reach out! 🚀
📺 Watch the Step-by-Step Tutorial
For a detailed walkthrough, check out my YouTube video on this topic: 👉 Watch Now That's it! Now, your WP Forms submissions are successfully tracked in GTM. Need help setting this up? Feel free to reach out! 🚀
Elementor Form DataLayer Code
/**
* Author: Md Hasanuzzamna
* Linkedin: https://linkedin.com/in/md-h
* Youtube: https://youtube.com/@leomeasure
* Email: [email protected]
*/
(function() {
var origXMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function() {
var requestURL;
var requestMethod;
var requestBody;
var xhr = new origXMLHttpRequest();
var origOpen = xhr.open;
var origSend = xhr.send;
// Override the `open` function.
xhr.open = function(method, url) {
requestURL = url;
requestMethod = method;
return origOpen.apply(this, arguments);
};
xhr.send = function(data) {
// Only proceed if the request URL matches what we're looking for.
if (/.+\/admin-ajax\.php/.test(requestURL)) {
xhr.addEventListener('load', function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success && (data instanceof FormData)) {
requestBody = {};
data.forEach(function(value, key) {
requestBody[key] = value;
});
if(requestBody.action === "elementor_pro_forms_send_form") {
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'elementor_form_submit',
inputs: requestBody
});
}
}
}
}
});
}
return origSend.apply(this, arguments);
};
return xhr;
};
})();
