How to track multi-step form progress with GTM and GA4

Real-World Hypothetical Scenario

Consider a SaaS company’s signup process with a four-step registration form:

• Step 1: Basic user information
• Step 2: Company details
• Step 3: Subscription plan selection
• Step 4: Payment method submission

The company notices significant drop-offs at various steps but cannot identify precisely where and why users abandon. Using the approach below, they can precisely track progression and drop-off points, optimizing the form for increased completion rates.

Step 1/8: Review Your Multi-Step Form HTML Structure

Ensure your multi-step form includes clear identifiers for each step or section.

Example HTML structure:

<div id="form-step-1" class="form-step">
<input type="text" name="user_name" required>
<button class="next-step">Next</button>
</div>

<div id="form-step-2" class="form-step" style="display:none;">
<input type="text" name="company_name" required>
<button class="next-step">Next</button>
</div>

<div id="form-step-3" class="form-step" style="display:none;">
<select name="subscription_plan" required>
  <option>Plan A</option>
  <option>Plan B</option>
</select>
<button class="next-step">Next</button>
</div>

<div id="form-step-4" class="form-step" style="display:none;">
<input type="text" name="card_number" required>
<button id="submit-btn">Submit</button>
</div>
 

Step 2/8: Create the Custom JavaScript Listener for Form Step Progression

We'll use custom JavaScript to detect clicks on the "next-step" buttons, track progression, and send events to GTM via the dataLayer.

Custom HTML Tag in GTM:

• In GTM, go to Tags → New → Custom HTML.
• Paste the following JavaScript code:

<script>
document.addEventListener('DOMContentLoaded', function () {
function trackFormStep(stepNumber, stepId) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'formStepProgress',
    'formStepNumber': stepNumber,
    'formStepId': stepId
  });
}

var nextStepButtons = document.querySelectorAll('.next-step');
nextStepButtons.forEach(function(button, index) {
  button.addEventListener('click', function() {
    var currentStep = index + 1; // steps numbered starting from 1
    var stepElement = button.closest('.form-step');
    var stepId = stepElement ? stepElement.id : 'unknown-step';

    trackFormStep(currentStep, stepId);
  });
});

// Submit button tracking (final step)
var submitBtn = document.getElementById('submit-btn');
if (submitBtn) {
  submitBtn.addEventListener('click', function() {
    trackFormStep(nextStepButtons.length + 1, 'form-step-submit');
  });
}
});
</script>

How This Listener Works:

• Adds click event listeners to all "next-step" buttons.
• Each click event sends a custom event formStepProgress to GTM with the step number and step ID.
• Captures the final submit button as the last step.

Step 3/8: Create Data Layer Variables in GTM

We’ll capture step details as variables in GTM.

In GTM, go to Variables → New → Data Layer Variable and create the following variables:

Step 4/8: Create GTM Custom Event Trigger

Set up a trigger to detect the form-step progression event:

• Go to GTM → Triggers → New → Custom Event.
• Event Name: formStepProgress (exact match to your dataLayer event).
• Trigger fires on: All Custom Events.
• Name the trigger: Trigger - Form Step Progress.
• Save this trigger.

Step 5/8: Create GA4 Event Tag to Track Form Steps

Next, configure a GA4 event tag to capture each form step event:

• Go to GTM → Tags → New → Google Analytics: GA4 Event.
• Configuration Tag: select your existing GA4 Configuration Tag.
• Event Name: use a descriptive name, such as multi_step_form_progress.
• Event Parameters (recommended):

• Under Triggering, select your trigger: Trigger - Form Step Progress.
• Name the tag: GA4 Event - Multi-Step Form Progress.
• Save your tag.

Step 6/8: Test, Preview, and Debug the Setup in GTM

Always verify before publishing:

• Enter GTM’s Preview mode.
• Go to your form’s page and navigate through the form steps.
• Confirm that the formStepProgress event appears in GTM’s preview and fires the GA4 tag correctly.

Step 7/8: Verifying Events in Google Analytics (GA4)

Check your GA4 data:

• Navigate to GA4 → Reports → Engagement → Events.
• Look for the new event: multi_step_form_progress. (Events typically appear in real-time in DebugView or within 24 hours in standard reports.)

Create Custom Dimensions for Enhanced GA4 Reporting:

For improved analysis, set up custom dimensions based on parameters:

Go to GA4 → Admin → Custom Definitions → Create Custom Dimensions:
 

Step 8/8: Example of Analyzing Multi-Step Form Data

In GA4 reports, you’ll clearly see the progression through each step (example):
 

You can clearly identify drop-off points—like significant abandonment between steps 1 and 2—providing actionable insights to optimize each step.

Why Is Custom JavaScript Required Here?

• GTM alone doesn't inherently track multi-step form interactions.
• JavaScript enables granular tracking, capturing user progression without reliance on page reloads or default GTM events.