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 Name | Data Layer Variable Name |
---|---|
DLV - formStepNumber | formStepNumber |
DLV - formStepId | formStepId |
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 Name | Value (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 Name | Event Parameter | Scope |
---|---|---|
Form Step Number | step_number | Event |
Form Step ID | step_id | Event |
Step 8/8: Example of Analyzing Multi-Step Form Data
In GA4 reports, you’ll clearly see the progression through each step (example):
Event Name | Form Step Number | Form Step ID | Event Count |
---|---|---|---|
multi_step_form_progress | 1 | form-step-1 | 250 |
multi_step_form_progress | 2 | form-step-2 | 190 |
multi_step_form_progress | 3 | form-step-3 | 145 |
multi_step_form_progress | 4 | form-step-submit | 100 |
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.