How to track form submissions on AJAX forms using Google Tag Manager

Author:

Tracking form submissions on AJAX-based forms using Google Tag Manager (GTM) can be a bit tricky because AJAX forms don’t trigger the traditional page reload event when a form is submitted. Instead, AJAX forms typically submit data in the background and update parts of the page dynamically without a full page refresh. Therefore, GTM’s built-in form submission trigger won’t work for these types of forms.

To track AJAX form submissions, you can follow a set of steps to capture the event using Google Tag Manager. Here’s how to track form submissions on AJAX forms:

Step 1: Ensure the AJAX Form Trigger is Firing

Since AJAX forms do not cause a page refresh, we need to detect when the form is successfully submitted and when the AJAX call completes. There are two main approaches to achieve this:

  • Using JavaScript/jQuery events: Many AJAX form submissions trigger JavaScript events on success or failure. You can listen to these events and push them into the GTM data layer.
  • Listening for DOM changes: If the form submission results in dynamic content changes (e.g., a thank-you message or confirmation), you can use GTM to listen for DOM changes and trigger your tag when they occur.

Step 2: Set Up the Data Layer to Capture Form Submissions

To ensure that the form submission event is sent to GTM, we can push the form submission event to the GTM Data Layer. The data layer is a JavaScript object that GTM listens to for events and data.

  1. Add a Custom JavaScript Event to the AJAX Form:
    • In the AJAX success callback or at the end of the form submission process, use JavaScript to push a custom event to the data layer.
    • Example code to add to the form submission handler:
    javascript
    <script>
    // Example using jQuery, adjust based on your form's setup
    $('form#your-form-id').on('submit', function(e) {
    e.preventDefault(); // Prevent the default form submission

    // Perform AJAX submission (replace with your AJAX call)
    $.ajax({
    url: 'your-ajax-submit-url',
    type: 'POST',
    data: $(this).serialize(),
    success: function(response) {
    // Push an event to the data layer after the form is successfully submitted
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'event': 'ajaxFormSubmission', // Custom event name
    'formName': 'Contact Form' // Add any custom variables to track
    });
    },
    error: function(xhr, status, error) {
    // Handle error (if needed)
    }
    });
    });
    </script>

    In this example:

    • ‘event’: ‘ajaxFormSubmission’ is the custom event name that GTM will listen for.
    • You can also add custom variables, such as formName, to identify which form was submitted.
  2. Alternative for Non-jQuery Forms: If you’re not using jQuery, you can achieve the same using vanilla JavaScript:
    javascript
    document.getElementById('your-form-id').addEventListener('submit', function(e) {
    e.preventDefault();

    // Example AJAX request with Fetch API
    fetch('your-ajax-submit-url', {
    method: 'POST',
    body: new FormData(this),
    })
    .then(response => response.json())
    .then(data => {
    // Push event to dataLayer on successful form submission
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'event': 'ajaxFormSubmission',
    'formName': 'Contact Form'
    });
    })
    .catch(error => {
    // Handle error if needed
    });
    });

Step 3: Set Up a Trigger in GTM for the Custom Event

Now that the form submission event is pushed to the data layer, the next step is to configure Google Tag Manager to listen for this event and fire the appropriate tag.

  1. Create a Trigger for the Custom Event:
    • In Google Tag Manager, go to the Triggers section and click New.
    • Choose the trigger type Custom Event.
    • In the Event Name field, enter the custom event name you pushed to the data layer. In this example, it would be ajaxFormSubmission.
    • Optionally, add additional conditions, such as firing the trigger only for certain form names (e.g., based on the formName variable).
  2. Set Trigger Conditions (Optional):
    • If you want to track different forms, you can add a condition to only trigger the event for a specific form. For instance, if the data layer includes the formName, you can add a condition like:
      • Form Name equals ‘Contact Form’
  3. Save the Trigger:
    • After setting up the custom event trigger, save it.

Step 4: Set Up the Tag for Tracking the Form Submission

Once you’ve created the custom event trigger, you can now set up the tag that will be fired when the AJAX form is submitted.

  1. Create a New Tag in GTM:
    • Go to the Tags section in GTM and click New.
    • Choose the tag type based on what you want to track. Common tags for form submissions include:
      • Google Analytics Event (for tracking form submissions as events).
      • Google Ads Conversion Tracking (for tracking form submissions as conversions).
  2. Configure the Tag:
    • For a Google Analytics Event:
      • Set Category to something like “Form Submission”.
      • Set Action to the form’s name or ID (e.g., Contact Form).
      • Optionally, set a Label to include additional context, like the page URL.
    • For Google Ads Conversion Tracking:
      • Enter the conversion ID and label from your Google Ads account.
  3. Assign the Trigger:
    • In the tag configuration, assign the trigger you created in Step 3 (i.e., the ajaxFormSubmission trigger).
  4. Save and Publish:
    • Once the tag is set up and the trigger is assigned, click Save and then Publish your changes.

Step 5: Test the Form Submission Tracking

Before going live, it’s essential to test your setup:

  1. Use GTM’s Preview Mode:
    • Click Preview in Google Tag Manager to enter Debug Mode.
    • Visit your website and fill out the form.
    • After submission, check the GTM debug console at the bottom of the page to ensure that the ajaxFormSubmission event is firing and that the associated tag is triggering.
  2. Verify in Google Analytics:
    • If you’re tracking form submissions in Google Analytics, go to the Real-Time reports to see if the event shows up.
  3. Use Tag Assistant (Chrome Extension):
    • You can also use the Google Tag Assistant Chrome extension to verify that your tags are firing correctly on your website.

Conclusion

By following these steps, you can successfully track AJAX form submissions using Google Tag Manager. The key is to push the form submission event into the GTM data layer during the AJAX form submission process and then configure GTM to listen for this custom event. With this setup, you can track form submissions on dynamic, AJAX-powered forms without relying on traditional page reloads.

Categories: Digital Marketing