No products in the cart.
Table of Contents
Tracking WPForms submissions is vital for measuring form engagement, lead conversions, and user intent. Because WPForms primarily uses AJAX (Asynchronous JavaScript) submission, standard GA4 event detection often fails.
The most reliable method is to listen specifically for the internal JavaScript event that WPForms fires only upon a successful, valid submission.
Method 1: Track WPForms Using the Success Listener (Recommended)
This method ensures you track only successful submissions, offering the highest level of accuracy for your conversion data.
Step 1: Add the WPForms Success Listener in GTM
We deploy a small script in GTM that listens for the specific native event name (wpforms.form.submitted) and pushes a custom event to the Data Layer.
1. In Google Tag Manager, go to Tags → New.
2. Choose Custom HTML.
3. Paste this code:
<script id=”gtm-jq-ajax-listen” type=”text/javascript”>
(function() {
‘use strict’;
var $;
var n = 0;
init();
function init(n) {
// Ensure jQuery is available before anything
if (typeof jQuery !== ‘undefined’) {
// Define our $ shortcut locally
$ = jQuery;
bindToAjax();
// Check for up to 10 seconds
} else if (n < 20) {
n++;
setTimeout(init, 500);
}
}
function bindToAjax() {
$(document).bind(‘ajaxComplete’, function(evt, jqXhr, opts) {
// Create a fake a element for magically simple URL parsing
var fullUrl = document.createElement(‘a’);
fullUrl.href = opts.url;
// IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
var pathname = fullUrl.pathname[0] === ‘/’ ? fullUrl.pathname : ‘/’ + fullUrl.pathname;
// Manually remove the leading question mark, if there is one
var queryString = fullUrl.search[0] === ‘?’ ? fullUrl.search.slice(1) : fullUrl.search;
// Turn our params and headers into objects for easier reference
var queryParameters = objMap(queryString, ‘&’, ‘=’, true);
var headers = objMap(jqXhr.getAllResponseHeaders(), ‘\n’, ‘:’);
// Blindly push to the dataLayer because this fires within GTM
dataLayer.push({
‘event’: ‘ajaxComplete’,
‘attributes’: {
// Return empty strings to prevent accidental inheritance of old data
‘type’: opts.type || ”,
‘url’: fullUrl.href || ”,
‘queryParameters’: queryParameters,
‘pathname’: pathname || ”,
‘hostname’: fullUrl.hostname || ”,
‘protocol’: fullUrl.protocol || ”,
‘fragment’: fullUrl.hash || ”,
‘statusCode’: jqXhr.status || ”,
‘statusText’: jqXhr.statusText || ”,
‘headers’: headers,
‘timestamp’: evt.timeStamp || ”,
‘contentType’: opts.contentType || ”,
// Defer to jQuery’s handling of the response
‘response’: (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || ”)
}
});
});
}
function objMap(data, delim, spl, decode) {
var obj = {};
// If one of our parameters is missing, return an empty object
if (!data || !delim || !spl) {
return {};
}
var arr = data.split(delim);
var i;
if (arr) {
for (i = 0; i < arr.length; i++) {
// If the decode flag is present, URL decode the set
var item = decode ? decodeURIComponent(arr[i]) : arr[i];
var pair = item.split(spl);
var key = trim_(pair[0]);
var value = trim_(pair[1]);
if (key && value) {
obj[key] = value;
}
}
}
return obj;
}
// Basic .trim() polyfill
function trim_(str) {
if (str) {
return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ”);
}
}
})();
</script>
4. Trigger: Select the DOM ready trigger
5. Save the tag as: 👉 WPForms – Success Listener
Step 2: Create Custom Event Trigger
We create a trigger that listens for the specific event name (wpform_success) pushed by the script.
1. Go to Triggers → New.
2. Choose Custom Event.
3. Event Name: Enter the exact string: ajaxComplete .
4. Name the trigger: 👉 WPForms – Form Success Trigger and Save.
Step 3: Create GA4 Event Tag
This tag sends the conversion signal to Google Analytics 4.
1. Go to Tags → New.
2. Choose Google Analytics: GA4 Event.
3. Configuration Tag: Select your existing GA4 Configuration Tag.
4. Event Name: Use a standard name, e.g., Wp_Form_Submit
5. Under Triggering → Select: 👉 WPForms – Form Success Trigger.
6. Save the tag as: GA4 – WPForms Submission
Step 4: Test in GTM Preview Mode
Testing is crucial to confirm the listener is working.
1. Click Preview in GTM.
2. Submit your WPForm on your website.
3. In the Tag Assistant panel, look in the left column for the event: ajaxComplete.
4. Click that event and confirm your tag, GA4 – WPForms Submission, fired under “Tags Fired.”
Step 5: Verify in GA4 DebugView
- Open your GA4 property.
- Go to Admin → DebugView.
- Submit the form again.
- Look for the event: Wp_Form_Submit in the timeline.
