How to set up and track multi-step forms with Google Tag Manager

Author:

Setting up and tracking multi-step forms with Google Tag Manager (GTM) allows you to gather data about user interactions and conversions, such as when users reach certain steps or submit the form. This can be invaluable for optimizing user experience and tracking form completion rates.

Here’s a step-by-step guide on how to set up and track multi-step forms using GTM:

1. Ensure Google Tag Manager is Installed on Your Website

Before you can start tracking with GTM, you need to ensure that Google Tag Manager is correctly installed on your website. If GTM is not installed, follow these steps:

  • Create a GTM account at tagmanager.google.com.
  • Set up a container and get the GTM container code.
  • Add the container code to your website’s <head> and <body> sections, as instructed by GTM.

2. Identify the Multi-Step Form Structure

You need to understand how the multi-step form works on your website. The most important thing to identify is how the form’s steps are triggered (e.g., by clicking buttons, form submissions, or navigating to the next page).

For example:

  • Is each step a separate page or a section on a single page (using JavaScript to load subsequent steps)?
  • Does the form use buttons or links to navigate between steps?
  • How does the form show when a user is on a specific step (e.g., via CSS classes or data attributes)?

This will help in deciding how to track user behavior across multiple steps.

3. Set Up Triggers for Each Form Step

You will need to create triggers in GTM to track user interactions with each form step. Here’s how you can set up these triggers:

a. Track Click Events on Form Navigation Buttons

If your form steps are navigated via buttons or links (e.g., “Next” or “Previous”), you can use GTM to track button clicks. For each step, you should:

  1. Create a Click Trigger:
    • Go to GTM > Triggers > New.
    • Select Click – All Elements.
    • Configure the trigger to fire on clicks of specific buttons. You may need to use CSS selectors (like #next-button, .form-step-2-button, etc.) to target the correct buttons.

    Example: If you have a “Next” button with an ID of next-step, you can set up the trigger to fire when this button is clicked.

  2. Track Step Data in Variables: To know which step the user is on, you can use Data Layer variables or custom JavaScript variables. For example, you could push a value into the Data Layer whenever a user clicks the “Next” button, such as:
    javascript
    dataLayer.push({
    'event': 'formStepChange',
    'formStep': 'step_1'
    });

    In GTM, you would:

    • Go to Variables > New > Data Layer Variable.
    • Set the variable to the name of the variable you pushed (formStep).

b. Track Form Submission

If the form submission is happening on the last step, you can create a trigger for form submissions:

  1. Create a Form Submission Trigger:
    • Go to GTM > Triggers > New.
    • Select Form Submission.
    • Set the trigger to fire only when the form is submitted, either by using the form’s ID, class, or specific action on the final form step (e.g., “Submit” button click).

    Example: Use a selector like #submit-form if your submit button has this ID.

4. Set Up Tags for Tracking Form Steps

Now that you have triggers in place, you need to create tags to send the data to your analytics tool (such as Google Analytics) or conversion tracking system.

a. Google Analytics Event Tracking

For each form step, you can create an event in Google Analytics to track how users are progressing through the form.

  1. Go to Tags > New > Tag Configuration.
  2. Choose Google Analytics: Universal Analytics.
  3. Set the tag type to Event and configure the event parameters:
    • Category: “Form”
    • Action: “Step [step number]”
    • Label: You can include the step’s name or ID to identify it further (e.g., “Step 1: Name”).
    • Value: You can include a numeric value to track, such as the step number.
  4. Under Triggering, choose the corresponding step trigger for the button click or form submission.

Example configuration for a button click event:

  • Category: “Form”
  • Action: “Step 1 – Name”
  • Label: “Step 1”
  • Value: 1
  1. Save the Tag.

Repeat this process for each form step, modifying the action and label accordingly.

b. Google Analytics Goal Tracking (Optional)

If you want to track conversions when a user completes the entire multi-step form, you can set up a goal in Google Analytics based on the form submission trigger.

  1. In GTM, create a tag for the form submission.
  2. Configure the tag to send a goal completion event to Google Analytics.
  3. Set up the goal in Google Analytics using the same parameters (like the event category or label).

5. Test the Setup Using GTM’s Preview Mode

Before going live, always test your setup using GTM’s Preview Mode:

  1. Click Preview in GTM.
  2. Visit your website and navigate through the multi-step form.
  3. Check that the triggers are firing correctly and that the data (such as form step and submission) is being sent to Google Analytics or your other tracking systems.

In the GTM debug console, you should see each trigger firing and the associated tags being sent.

6. Publish Your Changes

Once you’ve tested everything and confirmed that the tracking works, go back to GTM and Publish your changes. This will make the tracking live on your site.

7. Monitor and Analyze Form Data

After your form is live, use Google Analytics or your tracking platform to monitor the performance of the form:

  • Event Tracking: Look at the events in Google Analytics to see how many users are progressing through each step.
  • Conversion Tracking: Check goal completions to see how many users successfully submit the form.

You can use this data to analyze drop-offs at specific steps and optimize the user experience for better conversions.

Conclusion

By setting up and tracking multi-step forms in Google Tag Manager, you can gain valuable insights into user behavior and improve your forms’ performance. The ability to track each step, button click, and final submission allows you to optimize your forms for better engagement and conversion rates.

Categories: Digital Marketing