How to track AJAX form submissions with Google Tag Manager

Author:

Tracking AJAX form submissions with Google Tag Manager (GTM) can be a little tricky because the form submission happens asynchronously (without a full page reload). This means traditional form submission tracking methods won’t work, but there are still ways to set up accurate tracking for AJAX-based form submissions.

Here’s a step-by-step guide to help you track AJAX form submissions using Google Tag Manager.

Step 1: Add the GTM Data Layer to Your Site

First, ensure that the Google Tag Manager container is added to your website. It should already be included if you’re using GTM, but check to make sure that the GTM container snippet is present on all pages of your site.

For tracking AJAX form submissions, we’ll use the dataLayer.push method to send events to GTM. Here’s the standard GTM data layer setup:

html
<script>
window.dataLayer = window.dataLayer || [];
</script>

Step 2: Detect AJAX Form Submission

Since AJAX form submissions don’t trigger a traditional form submission event (like a page reload), we need to detect when the form submission happens and push relevant data into the dataLayer.

To do this, you’ll need to add a small JavaScript code snippet to your website that listens for AJAX form submission success. If you are using a jQuery-based form or any AJAX handler, you can hook into the success callback and push an event to the dataLayer.

Example (jQuery AJAX submission):

If you’re using jQuery to submit the form via AJAX, you can hook into the form’s success event and push an event into the dataLayer:

javascript
$('#yourFormID').on('submit', function(e) {
e.preventDefault(); // Prevent the default form submission
var form = $(this);

$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
success: function(response) {
// Push event into dataLayer on successful AJAX submission
window.dataLayer.push({
'event': 'ajaxFormSubmit', // Custom event name
'formId': 'yourFormID', // ID of the form
'formAction': form.attr('action'), // Action URL of the form
'formData': {
'field1': $('#field1').val(),
'field2': $('#field2').val()
}
});
},
error: function(error) {
console.log('Error:', error);
}
});
});

In the above example, we’re sending the form data (like field1 and field2 values) to the dataLayer on a successful AJAX submission. You can replace #yourFormID with the actual ID of your form and include any form fields you want to track.

Step 3: Create a Custom Event Trigger in GTM

Once the data is being pushed into the dataLayer, you need to create a trigger in Google Tag Manager to capture the event and fire a tag. In this case, we’ll use the custom event ajaxFormSubmit we defined in the previous step.

  1. Go to Google Tag Manager:
    • Navigate to Triggers in GTM.
    • Click New to create a new trigger.
  2. Configure Trigger Type:
    • Select Custom Event as the trigger type.
    • In the Event Name field, enter the event name you used in the dataLayer.push (e.g., ajaxFormSubmit).
  3. Configure Trigger Conditions (Optional):
    • If you want to track specific forms, you can set additional conditions. For instance, you can check the formId variable to only fire this trigger for certain forms:
      • Choose Some Custom Events.
      • Set the condition to formId equals yourFormID (replace yourFormID with the actual form ID or another form-specific identifier).
  4. Save the Trigger.

Step 4: Create a Tag to Send Data to Google Analytics (or other platforms)

After creating the trigger, the next step is to set up a tag that will fire when the form is successfully submitted.

  1. Go to Google Tag Manager:
    • Navigate to Tags.
    • Click New to create a new tag.
  2. Select the Tag Type:
    • For Google Analytics (Universal Analytics), select the Google Analytics: Universal Analytics tag type.
    • Choose the Track Type as Event.
  3. Configure the Event Tracking Parameters:
    • In the Category field, you can specify a name for the event (e.g., Form).
    • In the Action field, you can use the dynamic value from the dataLayer, such as the form ID or action URL, like {{formId}} or {{formAction}}.
    • Optionally, you can also add more details in the Label or Value fields (e.g., form fields).
  4. Choose the Trigger:
    • Select the Custom Event trigger you created earlier (e.g., ajaxFormSubmit).
  5. Save the Tag.

Step 5: Test the Setup in GTM

Before deploying the changes, make sure to test the setup in Preview Mode to ensure that the tag fires correctly when the AJAX form is submitted.

  1. Click on Preview in GTM and enter your website URL.
  2. Once the preview mode is activated, interact with the form and submit it.
  3. Check the GTM Debug Console to confirm that the ajaxFormSubmit event is detected and the tag fires correctly.

You can also open the browser’s Developer Console to check the dataLayer content:

javascript
console.log(window.dataLayer);

This will help you verify that the data is being pushed to the dataLayer as expected.

Step 6: Publish the Changes

Once you’ve confirmed everything is working in Preview Mode, you can publish your GTM container to make the tracking live.

Optional: Advanced Customization

  • Track specific form fields: You can modify the dataLayer.push event to capture specific form field values (e.g., email, phone number) and pass them into GTM.
  • Track form errors: You can also track failed AJAX submissions by adding an error handler to the AJAX call. Push an event to dataLayer if the form submission fails.
  • Multiple forms: If you have multiple forms, you can use dynamic form IDs, and adjust your triggers and tags accordingly to track them individually.

Conclusion

By using the dataLayer.push method, you can effectively track AJAX form submissions with Google Tag Manager. The key is to detect the successful submission of the AJAX form using JavaScript and then push an event to the dataLayer. After that, GTM can fire tags based on that event, allowing you to track form submissions for Google Analytics, Google Ads, or other platforms.

This method ensures that even asynchronous form submissions are tracked accurately, enabling you to capture valuable data for further analysis and optimization.

Categories: Digital Marketing