Using Google Tag Manager to Track AJAX Form Submissions

I've been wrestling with AJAX form tracking for years, and let me tell you – it's one of those things that seems simple until you actually try to implement it. Traditional forms? Easy. They submit, the page reloads, and your tracking fires. AJAX forms? They just sit there, silently submitting data in the background while your analytics remain completely oblivious.

If you're losing sleep over missing conversion data (like I was), this guide will walk you through the exact process I use to track AJAX form submissions with Google Tag Manager. No fluff, just the practical stuff that actually works.

The Problem with AJAX Forms

Here's the thing about AJAX forms – they're great for user experience but terrible for tracking. When someone fills out a regular HTML form and hits submit, the browser loads a new page. That page load is something Google Analytics can easily detect and track.

AJAX forms don't play by these rules. They send data to your server without refreshing the page, which means no page load event, no automatic tracking, and no conversion data in your reports. I learned this the hard way when I discovered we were missing about 40% of our lead form submissions.

The result? Your conversion funnels look broken, your ROI calculations are wrong, and you're making optimization decisions based on incomplete data.

Before we dive in, make sure you have these basics covered:

• Google Tag Manager is installed and working on your site

• You've got either GA4 or Universal Analytics set up

• You can access your website's code (or can convince someone who can)

• You're comfortable with basic HTML and JavaScript

After trying various approaches, I've found that the most reliable method is to modify your AJAX code to tell GTM when a form submission happens. It requires a small code change, but it's worth it for the accuracy.

Updating Your AJAX Code

You'll need to add a dataLayer.push() call to your existing AJAX success function. Here's what that looks like:

// Your existing AJAX form submission code
$.ajax({
    type: 'POST',
    url: '/submit-form',
    data: formData,
    success: function(response) {
        // Whatever you're already doing when the form succeeds
        showSuccessMessage();
        
        // Add this part for GTM tracking
        dataLayer.push({
            'event': 'ajax_form_submit',
            'form_name': 'contact_form',
            'form_id': $('#contact-form').attr('id'),
            'submission_url': '/submit-form'
        });
    },
    error: function(xhr, status, error) {
        // Your error handling stays the same
    }
});

The key here is that dataLayer.push() only fires when the AJAX call actually succeeds. This means you're only tracking legitimate form submissions, not failed attempts.

Setting Up the GTM Trigger

Now head over to your GTM container and create a new trigger:

1. Click "Triggers" then "New"

2. Select "Custom Event" as the trigger type

3. Enter "ajax_form_submit" as the event name

4. If you want to track only specific forms, add some conditions. For example, set "form_name equals contact_form" to track just your contact form

Creating Your Analytics Tag

Time to create the tag that will actually send the data to Google Analytics:

1. Create a new tag in GTM

2. Choose your analytics type (I'm using GA4 these days)

3. Set it up like this:

   • Event Name: "form_submit"

   • Add custom parameters if you want more detail

4. Set the trigger to your custom event trigger from above

Don't Forget the Variables

You'll want to create some Data Layer Variables in GTM so you can use that form data in your tags:

• Go to Variables > New

• Choose "Data Layer Variable"

• Create variables for: form_name, form_id, and submission_url

Testing Your Setup

This is crucial – don't just assume it's working. Use GTM's Preview mode to test your form submission. Fill out your form, submit it, and check that your custom event fires in the GTM debugger. You should see your "ajax_form_submit" event appear with all the data you pushed to the dataLayer.

Alternative: Element Visibility (When You Can't Edit Code)

Sometimes you can't modify the AJAX code directly. Maybe it's a third-party form, or maybe your developer is too busy. In these cases, you can try tracking based on success messages that appear after form submission.

Create a trigger based on "Element Visibility" and target the success message that appears after someone submits the form. It's not as reliable as the dataLayer method, but it's better than nothing.

Common Gotchas

A few things I've learned from implementing this across dozens of sites:

Make sure you're only pushing to dataLayer on successful submissions, not on form validation errors or failed submissions. Otherwise, you'll inflate your conversion numbers.

Test with different browsers and devices. Some AJAX implementations behave differently across platforms.

If you're tracking multiple forms, make sure your form_name values are unique and descriptive. Future you will thank present you for this.

Wrapping Up

AJAX form tracking doesn't have to be complicated, but it does require a bit of setup. The dataLayer approach I've outlined here has been rock solid for me across multiple projects. Once you get it working, you'll finally have visibility into all your form conversions, not just the ones that happen to reload the page.

The key is testing thoroughly and making sure you're only tracking successful submissions. Get this right, and you'll have much more accurate conversion data to work with.