Google Tag Manager AJAX Form Tracking

Updated: June 6th, 2020. In this post, I’ll show you how to implement Google Tag Manager AJAX Form Tracking. This article is a part of a much larger and comprehensive guide – Google Tag Manager Form Tracking.

You are probably already familiar with the main GTM concept: every interaction you want to track needs a tag and a trigger. If on the other hand, you’re very new to Google Tag Manager, first read this tutorial for a beginner.

If you want to track all form submissions with Google Analytics, you’ll need to create a Google Analytics Tag and a Trigger (rule) when a tag must fire.

Creating a tag is the easy part of this process. Let’s make one – you’ll need it in the next chapter of this blog post):

Go to Tags
Press New button
In Tag Configuration choose Universal Analytics:
1. Choose Track Type – Event
2. Event Category – Form submission (feel free to choose another appropriate title)
3. Event Action – Contact Form (feel free to choose another appropriate title)
4. Event Label – {{Page URL}}. P.S. Feel free to choose other values for an event category, action and label.
5. Select Google Analytics Settings Variable.
Leave the Triggering part empty (for now) and click Save. We’ll get back to it later.

Let’s Create a Listener and Trigger

The challenge with AJAX form is that when the form is successfully submitted, the built-in GTM Form Submission trigger does not catch that. Also, the visitor is not redirected to a “Thank you” page (therefore, this tracking method will also not work).

When you submit your form, it probably just refreshes itself and then displays “You have successfully filled in the form” message without the actual page refresh or changed URL, right? If yes, then (most likely) this blog post is exactly what you need.

There’s a big chance that form you’re dealing with is using AJAX technology. I suggest skipping all the technical mumbo-jumbo here (since I am not a developer + I don’t think I am capable of clearly explaining how it works). The only thing here you should know is AJAX listener.

Bounteous have shared an awesome AJAX listener for GTM everyone can use for free. If you want to read more about how it works, you can do that on Bounteous blog. Here we’ll borrow their code to track form submissions. Copy the code below and paste it in the Custom HTML tag on GTM:

<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, '');

 }

 }


 })();
 /*
 * v0.1.0
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

(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, '');

}

})();

* v0.1.0

* Created by the Google Analytics consultants at http://www.lunametrics.com

* Written by @notdanwilkerson

* Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/

* Licensed under the Creative Commons 4.0 Attribution Public License

</script>

Set that Custom HTML tag to fire on all pages. Now, let’s check whether a form is built on AJAX:

Enable (or refresh) Preview and Debug mode.
Refresh the web page with a form.
Try submitting the form (with no errors).
Did the ajaxComplete event appear in the Preview and debug console?
1. If yes, the form is using AJAX.
2. If no, try using other Google Tag Manager Form Tracking methods mentioned in this blog post.

Let’s see what can we do with that AJAX form. Click ajaxComplete event in Preview and Debug mode, then click Data Layer:

Looks difficult for a non-developer, right? But it’s easier than you think. This is the data that was passed to the data layer after successful submission of the form, each line is a separate dataLayer data point that can be used as a Data Layer variable in GTM. Keep looking for something which helps identify successful form submission. Scroll down and look for “response”.

Let’s take a closer look at it. Can you see a message “This message has been successfully sent”? Bingo! We can use it as a trigger. Note: in your case, the response will probably be different.

First, let’s create a dataLayer variable in Google Tag Manager.

Go to Variables
Scroll down to User-Defined variable and hit New
Click Variable configuration and choose variable type – Data Layer Variable
Enter Data Layer Variable Name – attributes.response. Leave all other settings as they are.
My recommendation for the Title of this GTM variable is dlv – attributes.response (“dlv” stands for Data Layer Variable).

You’re probably guessing why I entered attributes.response as Data Layer Variable Name, instead of just response. Let’s take a closer look at Data Layer in Preview and Debug mode. On line 2, you see event name ajaxComplete – that’s the same name which appears in Preview and Debug console’s left side. Then we see attributes, which is an object containing various data points (key-value pairs). And the response is one of those keys.

So when we want to tell Google Tag Manager that we are interested in response’s value, we need to tell the exact path to that data. In our case, it’s attributes → response. Each level of the path must be separated with dot → attributes.response . Another example: let’s say you’re interested in Server data (from that very exact AJAX response). In that case, the Data Layer Variable’s Name should be attributes.headers.Server .

After we created attributes.response Data Layer variable in Google Tag Manager, let’s debug. Refresh Preview and Debug mode and refresh the page where the AJAX form is.

I filled in the form and submitted it. Then I clicked the most recent ajaxComplete event in Preview and Debug console, navigated to the Variables tab, and found the new variable dlv – attributes.response. Here’s how it looked to me:

That’s a message of a successfully submitted form. If in your case, the value of that variable is undefined, then you should start looking for mistakes. The most common ones are typos in a variable name or inaccurately defined variable’s path. Some guys just try using response instead of attributes.response.

Now let’s create a trigger that fires when the event is ajaxComplete AND our new dataLayer variable contains text The message has been successfully sent.

Go to Triggers and click New
Choose Trigger Type – Custom Event. If you’re new to this, Custom event = Data Layer event. Bounteous’ AJAX listener creates a Data Layer event (via dataLayer.push method) each time an AJAX request is made.
Enter Event name – ajaxComplete
This trigger should fire on Some Custom Events.
Define a condition when the trigger will fire – dlv – attributes.response contains The message has been successfully sent.

Important: there is no single answer

Not all AJAX forms return the same response after the form is submitted. In some cases, attributes.response is enough to get the value of a response. However, in other cases, the response object might contain even more keys, for example:

attributes: {
  response: {
    message: "form submitted" 
  } 
}

attributes: {

response: {

message: "form submitted"

}

In this case, we have attributes object. Inside of it, there is a response object. And within that, there is a message object. If you wanted to access the message key, you would need to enter attributes.response.message in your Data Layer Variable.

Let’s Test

Assign this new trigger to Google Analytics Tag that you created at the beginning of this blog post.
Open (or refresh) a Preview and Debug mode, refresh a web page with a form you want to track.
Then fill in the AJAX form and submit. After successful submission, Google Analytics Tag should fire (it will be displayed in Preview and Debug mode. You can also check Google Analytics Real-time event reports). If you see your tag firing but the event is not visible in the GA realtime reports, read this guide.

Things to keep in mind when tracking AJAX forms:

The response of your form might look different so try adjusting my tutorial to your situation.
If developers change response’s data, your trigger will fail. Inform developers about your GTM implementation.
If the page contains more than one AJAX form, try looking for more information in Data Layer which can help Google Tag Manager tell the difference between those forms.

In Case Google Tag Manager AJAX Form Tracking Doesn’t Work for You

I have created a very detailed Google Tag Manager form tracking guide that includes a bunch of different form tracking techniques. If this Google Tag Manager AJAX form tracking method didn’t work for you, make sure you check other options mentioned here.

If you have questions, feel free to contact me via social media accounts or write a comment in this blog post.