How to track form submissions with Google Tag Manager

Author:

Tracking form submissions with Google Tag Manager (GTM) is an essential way to gather insights about user engagement, especially if you want to measure conversion rates or interactions with forms on your website. By setting up form submission tracking, you can send this data to Google Analytics or other tools, helping you analyze the performance of your forms and optimize the user experience.

Here’s a step-by-step guide to tracking form submissions using GTM:

1. Set Up Google Tag Manager on Your Website

Ensure that GTM is properly installed on your website before you start tracking form submissions. If not, follow these steps to install it:

  • Create a GTM Container: Go to Google Tag Manager and log in with your Google account. Create a new container for your website.
  • Install GTM Code: GTM will provide two code snippets, one for the <head> and another for the <body> sections of your website. Copy and paste these into your website’s code.

Once GTM is installed, you can begin setting up form submission tracking.

2. Identify Form Submission Type

Forms on websites can submit data in different ways, which affects how you track them. Common submission types include:

  • Form Submission with a Page Reload: The page reloads after the form is submitted.
  • AJAX Form Submission: The form is submitted without a page reload, typically using JavaScript or AJAX.
  • Redirect after Submission: The user is redirected to a thank-you page or another URL after submission.

3. Enable Built-In Form Variables

Before setting up form submission tracking, you’ll need to enable the built-in form variables in GTM to capture key information about the form that is being submitted.

  1. Open GTM: Log in to your GTM account and open the container for your website.
  2. Go to Variables: On the left-hand side menu, click Variables.
  3. Configure Built-In Variables: Scroll down to the Forms section, click Configure, and enable the following variables:
    • Form Element
    • Form Classes
    • Form ID
    • Form Target
    • Form URL

These variables will capture important information about the forms on your site, such as the form’s ID, class, and the URL where the form submits.

4. Create a Trigger for Form Submissions

Now, you need to create a trigger that tells GTM to listen for form submission events on your site.

For Regular Form Submissions:

  1. Go to Triggers: On the left-hand side menu, click Triggers.
  2. Create a New Trigger: Click New to create a new trigger.
  3. Trigger Configuration: Name the trigger (e.g., “Form Submission Trigger”).
  4. Choose Trigger Type: Click on Trigger Configuration and select Form Submission.
  5. Wait for Tags: Enable the options Wait for Tags and Check Validation. This ensures that the trigger fires only when the form is successfully submitted.
  6. Trigger for All Forms or Some Forms: You can choose to trigger this event for all forms or specific forms. If you want to track all forms, select All Forms. To track only specific forms, choose Some Forms and specify the form conditions. For example:
    • Form Classes equals “contact-form”
    • Form ID equals “newsletter-signup”
    • Form URL contains “thank-you”

For AJAX or JavaScript Forms (No Page Reload):

  1. Create a Click Trigger: Since AJAX forms don’t reload the page, the form submission won’t fire automatically. Instead, use a Click Trigger on the submit button.
  2. Go to Triggers: Click on Triggers and create a new trigger.
  3. Select Click Trigger: Choose Click – All Elements.
  4. Trigger Type: Select Some Clicks, then define the trigger based on the button’s properties, such as:
    • Click Classes contains “submit-button”
    • Click ID equals “form-submit”
  5. Save: Once you’ve configured the click trigger, save it.

5. Create a Tag to Send Form Submission Data

Once the trigger is ready, create a tag that will send the form submission data to Google Analytics or another tool of your choice.

For Google Analytics (GA4) Users:

  1. Go to Tags: In the left-hand menu, click Tags and then New.
  2. Tag Configuration: Click Tag Configuration and select Google Analytics: GA4 Event.
  3. Event Name: Name the event something descriptive, like “form_submission.”
  4. Add Event Parameters: To capture more details about the form, add parameters such as:
    • form_id: Set this to {{Form ID}}.
    • form_class: Set this to {{Form Classes}}.
    • form_url: Set this to {{Form URL}}.
  5. Measurement ID: Enter your Google Analytics Measurement ID (found in your GA4 property under Admin → Data Streams).
  6. Assign Trigger: Attach the form submission trigger you created earlier.
  7. Save the Tag.

For Universal Analytics Users:

  1. Go to Tags: Click Tags and then New.
  2. Tag Configuration: Select Google Analytics: Universal Analytics.
  3. Track Type: Choose Event.
  4. Event Tracking Parameters:
    • Category: Enter “Form Submission.”
    • Action: Enter “Submit.”
    • Label: You can use {{Form ID}} or {{Form Classes}} to provide more specific details about the form.
  5. Google Analytics Settings: Add your Tracking ID.
  6. Assign Trigger: Attach the form submission trigger.
  7. Save the Tag.

6. Test the Form Submission Tracking

Before publishing your tag, test it in Preview Mode to make sure everything is set up correctly.

  1. Enable Preview Mode: In GTM, click the Preview button at the top-right of the screen. This will open a new tab where you can enter your website URL and connect the debugger.
  2. Test Form Submission: Submit the form on your website. In the GTM Debugger window, you should see the form submission event fired under Tags Fired.
  3. Verify Variables: Check that the appropriate variables (e.g., Form ID, Form URL) are being passed correctly in the debugger.

7. Publish Your Changes

Once you’ve confirmed that the form submission tracking is working as expected:

  1. Exit preview mode.
  2. Click Submit in GTM.
  3. Provide a name for this version (e.g., “Form Submission Tracking”).
  4. Click Publish to push your changes live.

8. View Form Submission Data in Google Analytics

Once your tag is live, you can track the form submission data in Google Analytics.

For GA4 Users:

  1. Go to Google Analytics.
  2. Navigate to Reports → Engagement → Events.
  3. Look for your custom event (e.g., “form_submission”).

For Universal Analytics Users:

  1. Go to Google Analytics.
  2. Navigate to Behavior → Events → Overview.
  3. Look for your event category (e.g., “Form Submission”) to see how often the event was triggered.

9. Advanced Options

You can further customize your form submission tracking by:

  • Tracking Different Forms Separately: Create multiple triggers or use conditions to track specific forms.
  • Redirecting to a Thank-You Page: Track users who land on a thank-you page after form submission, which can serve as a conversion goal.
  • Form Validation: Only track submissions where the form is validated successfully by the browser or server.

Conclusion

Tracking form submissions with Google Tag Manager is an effective way to gather detailed insights into how users are interacting with your forms. By setting up GTM triggers and tags, you can track form submissions, send data to Google Analytics, and use that information to optimize your site’s performance. This guide provides a comprehensive overview, allowing you to adapt it to your specific form types and submission methods.

Categories: Digital Marketing