Google Tag Manager AJAX Form Tracking
Updated: May 12th, 2021
This blog post contains Google Analytics 4 examples. If you are looking for Universal Analytics examples, read this guide instead.
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.
A video tutorial (with Universal Analytics examples)
Even though this article will be showing GA4 examples, I have an older tutorial shows the same thing but with Universal Analytics (GA3). So if you find this interesting, take a look at the video below.
GA4 event tag
You are probably already familiar with the main Google Tag Manager concept: every interaction you want to track needs a tag and a trigger. If you want to track all form submissions with Google Analytics 4, 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.
After you have a GA4 config tag in your GTM container, it’s time to create a GA4 event tag that will be used in all of the examples of this article.
- Go to Tags
- Press New button
- In Tag Configuration choose Google Analytics: GA4 Event
- In the Configuration Tag field, select your current GA4 configuration tag. The event tag that we are creating will reuse some of the settings from the configuration tag (e.g. Measurement ID)
- In the Event Name field, I enter generate_lead
- Leave the Triggering part empty (for now) and click Save. We’ll get back to it later.
Let me quickly explain some of the choices. The reason why I used generate_lead as an event name is that it is in the list of GA4 Recommended events. But if you want, you can name it something else.
Custom HTML tag with the AJAX listener
If you are reading this blog post, your form is probably not supported by the built-in Form Submission trigger and is not redirecting users to a “thank you” page. It probably just refreshes itself and then displays “You have successfully filled in the form” message without the actual page refresh.
There’s a big chance that this form is using AJAX. I suggest skipping all the technical details here. The only thing here you should know is AJAX listener.
Bounteous have shared an awesome AJAX listener for GTM everyone can use for free. Here we’ll borrow their code to track form submissions. Copy the code below and paste it in the Custom HTML tag on Google Tag Manager:
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.
- Try submitting the form on your website (with no errors).
- Did the ajaxComplete event appear in the Preview and debug console?
- If yes, the form is using AJAX.
- If no, then read this blog post.
If your answer to the previous questions was Yes, let’s take a look at what can we do with that AJAX form. Click ajaxComplete event in Preview and Debug mode, then expand the API call:
Looks difficult for a non-developer, right? But it’s easier than you think.
This is data 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 dataLayer variable in GTM.
Now you should look for something that helps identify successful form submission. Scroll down and look for “response”.
Let’s take a closer look at it. Can you see a message “Thanks for contacting us! We will be in touch with you shortly”? Bingo! We can use it as a trigger.
Data Layer Variable and Custom Event Trigger
First, let’s create a Data Layer 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.data.message
You’re probably guessing why I entered attributes.response.data.message as Data Layer Variable Name, instead of just response. Let’s take a closer look at Data Layer in Preview and Debug mode.
In line 2 you see the event named ajaxComplete – that’s the same name that 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.
Within that response (2), we see data (3) and within that, we see message (4).
Think of this as accessing folders. First, you have to access the attributes, then you go to response, then you go do the data folder and then you access message.
IMPORTANT: in your case, the structure of the data can be different and parameters can be named differently. It will always start with attributes.response but after that, things might differ in every form. It might be attributes.response.message or something like that. You will need to adapt.
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 the Data Layer variable in Google Tag Manager, let’s debug. Refresh Preview and Debug mode (by clicking the Preview button in the GTM interface).
Fill in the form and submit. Click the most recent ajaxComplete event in Preview and Debug console, then navigate to the Variables tab and find the new variable dlv – attributes.response.data.message. If you did everything correctly, it should look like this:
That’s a message of the successfully submitted form. If the value of that variable is undefined, then you should start looking for mistakes. The most common ones are typos in the variable name or inaccurately defined variable’s path. Some people just try using response instead of attributes.response.data.message.
Now let’s create a trigger that fires when the event is ajaxComplete AND our new Data Layer variable contains “Thanks for contacting us”.
- Go to Triggers and click New
- Choose Trigger Type – Custom Event
- Enter Event name – ajaxComplete
- This trigger should fire on Some Custom Events.
- Define a condition when the trigger will fire – dlv – attributes.response.data.message contains Thanks for contacting us!
- Assign this new trigger to the Google Analytics 4 Event Tag that you created at the beginning of this blog post.
- Open (or refresh) a Preview and Debug mode
- Then fill in the AJAX form and submit it. After successful submission, Google Analytics 4 Event Tag should fire (it will be displayed in Preview and Debug mode. You should also check Google Analytics 4 Debug View.
Things to keep in mind when tracking AJAX forms:
- The response of your form might look different so you should adjust your Data Layer Variable and Custom Event trigger.
- If developers change the 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.
If 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.