Tracking Multi-Step Form Progress with GA4

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

Published by Marty Paukstys, founder of D2CEBL. 20+ years of Google PPC & Analytics experience. Google Ads Search and Google Analytics certified.
 

Multi-step forms, also known as wizard forms, are commonly used for checkout processes, registration funnels, and complex lead-generation flows. While they provide an improved user experience by breaking complex forms into manageable steps, they also introduce challenges for tracking user progress and abandonment.

This guide provides step-by-step instructions for accurately tracking multi-step form progress using custom JavaScript, Google Tag Manager (GTM), and Google Analytics 4 (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:

 

GTM Variable NameData Layer Variable Name
DLV - formStepNumberformStepNumber
DLV - formStepIdformStepId

 

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):
Parameter NameValue (DLV Variable)
step_number{{DLV - formStepNumber}}
step_id{{DLV - formStepId}}
  • 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:
 

Dimension NameEvent ParameterScope
Form Step Numberstep_numberEvent
Form Step IDstep_idEvent

 

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

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

Event NameForm Step NumberForm Step IDEvent Count
multi_step_form_progress1form-step-1250
multi_step_form_progress2form-step-2190
multi_step_form_progress3form-step-3145
multi_step_form_progress4form-step-submit100


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.

Sources

Back to How To
  • Share
  • facebook
  • icon_linkedin
  • icon_x