How to Track Forms with Multiple Steps

Marketers tend to track "conversions" based on "thank you pages." But what happens when you need more data? For example, what happens when you have a multiple-step form, and you need to understand how users progress through the form funnel, calculate drop-off rates, and track the resulting conversions accurately? Well, you could hire a programmer to build and manage a complex setup, or you could spend a few minutes configure ListenLayer to do it for you - giving you the power and flexibility to control and scale your tracking framework without limits!

Form Funnel Tracking for Multi-step Forms

It isn’t easy to track user progress through most multi-step forms until now. ListenLayer automates the process. All you do is turn on the Listener for your form application and watch events and variables flow into the data layer. Then use Google Tag Manager to send step activity to all of your marketing platforms.

Steps & Code Examples

Step 1: Add Your Domain Name Inside ListenLayer
Step 1: Add Your Domain Name Inside ListenLayer

Navigate to the Website screen of your ListenLayer account and add your website domain name. Then copy the Website Script to place on your website using Google Tag Manager.

Step 2: Deploy Your ListenLayer Website Script
Step 2: Deploy Your ListenLayer Website Script

Create a Custom HTML Tag inside of Google Tag Manager that fires on All Pages. Place the tracking script from your ListenLayer account. A sample is shown here, but you must use the code from your account, not this example code!

<script type="text/javascript">(function(c,a,d,b,e) {c[b] = c[b] || [];
c=a.getElementsByTagName(d)[0];a=a.createElement(d);b="dataLayer"!= b ?"&l="+b:"";a.async = !0;
a.src = "https://assets.listenlayer.com/datalayer.min.js?id="+e+b;
c.parentNode.insertBefore(a,c)})(window,document,"script","dataLayer",
"00000000-0000-0000-0000-0000000000000");</script>
Step 3: Enable Your Form Listener & Features
Step 3: Enable Your Form Listener & Features

Enable the listener for your website forms by navigating to the Listener Library. Then turn on Form Activity Features on the main Features screen for the form Listener. If your form system supports multi-step or multi-page forms, our Listener will likely have a specific feature to track this activity.

Don’t forget to publish your ListenLayer changes once the features are turned on.

Step 4: Create an Event Triggers for Step Changes & Form Submission
Step 4: Create an Event Triggers for Step Changes & Form Submission

Inside Google Tag Manager, create two new Custom Event triggers: one for the form step change event and one for the form submissions event.  Use the Event name that ListenLayer generates every time a form is submitted for the application you are using. In this example, we are using Gravity Forms.

An example of the Step Change trigger configuration inside of Google Tag Manager is shown here.

gfFormStepChange

gfFormStepsSubmitted
Step 5: Create Tags that Fire For Your Triggers
Step 5: Create Tags that Fire For Your Triggers

In Google Tag Manager, create the tags you want to fire when a form step changes or a final step is submitted. You can choose to modify your triggers or tags based on variables in the data layer.

You can also configure variables to capture information such as the “step number” inside Google Tag Manager and push this into your analytics platform. In the example shown here, we are sending an event to GA4 called Form_Step_Change along with a parameter that identifies the step number to build a funnel report in Google Analytics.