How to measure form abandonment using Google Tag Manager

Author:

Measuring form abandonment using Google Tag Manager (GTM) is an essential task for understanding user behavior on your website. By tracking when users start filling out a form but leave before completing it, you can gain valuable insights into potential issues with your forms, such as design flaws, usability problems, or friction in the conversion process. This allows you to optimize your forms and improve conversion rates.

Here’s how you can set up form abandonment tracking with Google Tag Manager:

Why Track Form Abandonment?

Tracking form abandonment helps to:

  • Identify potential barriers in your forms that might be causing users to leave before submitting.
  • Understand at what point users abandon the form (e.g., after filling in specific fields).
  • Optimize forms to increase conversion rates by removing unnecessary steps, making them more user-friendly, or improving the overall user experience.

Steps to Track Form Abandonment Using Google Tag Manager

Step 1: Identify the Forms You Want to Track

To track form abandonment, first, you need to identify which forms on your website are important to measure. These could be:

  • Contact forms
  • Registration forms
  • Checkout forms
  • Lead generation forms

Each form may need to be tracked separately if they serve different purposes. Identify the forms by their HTML element IDs or classes to set up accurate triggers.

Step 2: Enable Built-In Variables in GTM

Before setting up triggers and tags for form abandonment, ensure that you have enabled the built-in variables in Google Tag Manager to capture relevant data. These variables include:

  1. Click Classes
  2. Click Element
  3. Form Classes
  4. Form ID
  5. Page URL
  6. URL

To enable these variables:

  1. Go to Variables in Google Tag Manager.
  2. Click on Configure.
  3. Check the boxes for the variables mentioned above (especially Form ID, Form Classes, and Click Classes).

Step 3: Set Up a Trigger to Track Form Interactions

You need to set up triggers to capture when users interact with the form and when they abandon it. There are two main triggers to set up for form abandonment:

  1. Form Submission Trigger: This trigger will fire when the form is successfully submitted. It will be used to track form completions (for comparison with abandonment).
  2. Form Focus and Blur Events Trigger: This helps track when users start interacting with the form (e.g., focusing on the first field) and when they leave the form (e.g., blur events).
3.1 Set Up a Form Submission Trigger
  1. Go to the Triggers Section:
    • In Google Tag Manager, go to Triggers and click New.
  2. Choose the Trigger Type:
    • Select Form Submission as the trigger type.
  3. Configure the Trigger:
    • Choose All Forms or Some Forms, depending on which forms you want to track.
    • If you want to track a specific form, you can specify the Form ID or Form Class that identifies it.

    Example condition:

    • Form ID equals contact-form
    • This will fire the trigger only when the form with the ID contact-form is successfully submitted.
  4. Save the Trigger:
    • Name it something descriptive (e.g., “Form Submission – Contact Form”) and save.
3.2 Set Up Focus (Start) and Blur (Abandon) Triggers

Form abandonment typically happens when users interact with the form and then leave it before completing the submission. You can track both the focus (when users click on a field) and blur (when they leave the form or field) events to monitor abandonment.

  1. Go to the Triggers Section:
    • Create a new trigger for Focus or Blur events.
  2. Choose Trigger Type:
    • Choose Click – All Elements as the trigger type.
  3. Configure Trigger for Focus Events:
    • Use the condition:
      • Click Element matches a specific form field (e.g., an input field in your form).
    • This can be done by targeting the form fields based on Element ID or Classes.
  4. Configure Trigger for Blur Events:
    • Use the condition:
      • Click Element matches the form field that was abandoned.
      • Alternatively, you can track a Page View or use a timeout trigger to detect if the user navigates away from the page without completing the form.

    These triggers can help detect abandonment based on interaction patterns.

Step 4: Create Tags to Send Data to Google Analytics (or Other Platforms)

Once the triggers are set up, you need to create tags to send the form submission and abandonment events to Google Analytics (or another platform for tracking).

  1. Create a Tag for Form Submission:
    • Tag Type: Google Analytics (Universal Analytics or GA4 Event)
    • Track Type: Event
    • Category: Form
    • Action: Submit
    • Label: Form Name (you can dynamically capture the form name using variables like {{Form ID}} or {{Form Classes}}).

    Example:

    • Category: Form
    • Action: Submit
    • Label: {{Form ID}}
  2. Create a Tag for Form Abandonment:
    • Tag Type: Google Analytics (Universal Analytics or GA4 Event)
    • Track Type: Event
    • Category: Form
    • Action: Abandon
    • Label: Form Name or Page URL (capture the specific form or page URL to know which form was abandoned).

    Example:

    • Category: Form
    • Action: Abandon
    • Label: {{Page URL}} or {{Form ID}}
  3. Set the Triggers:
    • Attach the form submission trigger to the form completion tag.
    • Attach the form abandonment triggers (focus, blur, or timeout) to the abandonment tag.
  4. Save the Tags:
    • Give descriptive names like “Form Submission – Contact Form” and “Form Abandonment – Contact Form”.

Step 5: Test Your Tags and Triggers

Before going live, you must test to ensure everything is working correctly.

  1. Preview Mode: Use GTM’s Preview mode to test the form submission and abandonment tags.
  2. Test on Your Website: Open your website with the GTM debug console and perform the following actions:
    • Submit a form and check that the form submission tag fires.
    • Start filling out the form, then leave the page (e.g., by clicking a link or navigating away) and ensure that the form abandonment tag fires.
  3. Check Google Analytics: Go to Real-Time in Google Analytics and check if both form submission and abandonment events are being tracked.

Step 6: Publish the Container

Once everything is tested and confirmed, publish the GTM container to make the tracking live.

Advanced Form Abandonment Tracking (Optional)

  1. Track Partial Form Entries:
    • Use the Focus and Blur triggers to measure specific fields that users fill out before abandoning the form. This can give you insights into which form fields cause the most drop-offs.
  2. Track Time Spent on Form:
    • You can track how long users stay on the form before submitting or abandoning it. For example, a custom timer can be set up to fire when a user starts the form, and if the timer reaches a certain threshold without submission, you can fire an abandonment event.
  3. Track Form Abandonment on Multiple Forms:
    • You can use different variables (like Form ID or Page URL) to track abandonment for multiple forms on the same page or across different pages.

Conclusion

Tracking form abandonment with Google Tag Manager allows you to understand where users drop off in your form processes. This data is valuable for improving user experience, streamlining form designs, and optimizing your conversion funnels. By setting up triggers for form submissions and abandonment and sending these events to Google Analytics or another analytics platform, you can gain actionable insights to improve your forms and increase conversion rates.