How to Track Form Submissions on AJAX Forms using Google Tag Manager

Author:

Google Tag Manager (GTM) is a powerful tool for managing tags (snippets of code) on your website, allowing you to track user interactions, collect data, and trigger specific actions. One common use case is tracking form submissions, which can provide valuable insights into user behavior and help you optimize your forms for better conversion rates. In this comprehensive guide, we’ll walk you through the process of tracking form submissions on AJAX forms using Google Tag Manager.

Understanding the Challenges of Tracking Form Submissions

Before we dive into the solution, it’s essential to understand the challenges of tracking form submissions:

  1. AJAX Forms: Modern web applications often use AJAX (Asynchronous JavaScript and XML) to dynamically update content without reloading the entire page. This makes it challenging for traditional page-view-based tracking methods to capture form submissions.
  2.  Form Submissions are Not Page Views: Form submissions are not traditional page views, as they don’t trigger a full page reload. This means that standard page-view-based tracking methods won’t capture these events.
  3. Need for Custom Solution: To overcome these challenges, you need a custom solution that can detect form submissions and trigger tags accordingly.

Setting up Google Tag Manager (GTM)

To track form submissions with GTM, you’ll need to set up the following:

  1.  Create a GTM Account: If you haven’t already, create a GTM account and set up your tracking container.
  2. Create a Form Tracking Tag: In your GTM container, create a new tag and choose the “Custom HTML” tag type.

Tracking Form Submissions with Custom HTML Tags

To track form submissions, you’ll need to create a custom HTML tag that detects when the form is submitted. You’ll add this tag to your form’s submit event listener.

 1. Create a Custom HTML Tag

  • In your GTM container, create a new tag and choose the “Custom HTML” tag type.

 2. Add the Tag Code

  • In the “HTML” field, add the following code:
    “`html
    <script>
    // Get the form element
    var form = document.querySelector(‘form’);
  • // Add an event listener to the form’s submit event
    form.addEventListener(‘submit’, function(event) {
    // Prevent default form submission behavior
    event.preventDefault();
  • // Send a track event to GTM
    dataLayer.push({
    ‘event’: ‘formSubmission’,
    ‘formId’: ‘{{form.id}}’,
    ‘formData’: JSON.stringify({
    ‘name’: ‘{{form.name}}’,
    ’email’: ‘{{form.email}}’,
    // Add more form fields as needed
    })
    });
    });
    </script>
    “`
    This code gets the form element, adds an event listener to the submit event, prevents default form submission behavior, and sends a track event to GTM with the form ID and form data.

 3. Configure the Tag Trigger

  • In the “Triggering” section, select “Custom Event” and set the trigger name to “Form Submission”.

 4. Set up the Triggering Conditions

  • In the “Triggering Conditions” section, add a condition to trigger the tag when the event is “formSubmission”.

 5. Configure the Tag Firing Options

  • In the “Firing Options” section, set “Firing” to “On all hits” and “Firing Sequence” to “First hit”.

6. Deploying the Tag

  • Once you’ve set up the custom HTML tag and trigger, deploy it to your website by clicking “Publish” in GTM.

7. Verifying Form Submission Tracking

To verify that your form submission tracking is working correctly:

  1. Open your browser’s developer tools (e.g., Chrome DevTools) and inspect the network requests.
  2. Submit your form and observe that a request is sent to Google’s measurement protocol (e.g., `https://www.google-analytics.com/collect`).
  3. In your GTM account, go to the “Audience” section and select “Real-Time” > “Behavior” > “Events”. You should see a count of form submissions.

Advanced Use Cases and Best Practices

To get more out of your form submission tracking:

  1.  Use variables: Use variables in your custom HTML code to make it easier to modify or extend your tracking setup.
  2. Track additional data: Capture additional data from your forms by adding more properties to your `dataLayer.push()` call.
  3. Use GTM’s built-in functions: Utilize GTM’s built-in functions (e.g., `dataLayer.push()` , `gtm.map()`) to simplify your code.
  4.  Configure tags for different forms: Set up separate tags for different forms on your website by using different trigger names or conditions.
  5.  Monitor and optimize: Regularly monitor your form submission tracking performance and optimize your tags for better data quality.

In conclusion, tracking form submissions with Google Tag Manager requires a custom solution that detects form submissions and triggers tags accordingly. By following this comprehensive guide, you’ll be able to set up accurate and reliable form submission tracking for your AJAX forms.

Categories: Digital Marketing