If you track a multistep form the same way you track a standard one, as per our other article here: https://d.pr/ZlcqMo, then only the number of final form submissions will be tracked. People who submitted the previous steps without finalizing the process will not be counted.
This article will show you how to track each step individually instead. We advise informing your page visitors of this through a line of text near the form or other means so that they can consent.
This method will allow you to count how many people submitted each step, not collect the actual data they submitted.
If you would like to learn more about the way our multistep forms work, please refer to this article: https://d.pr/IjsKlA.
Instructions
1. Create your page and make sure that you know how many steps your multistep form will have in the final version.
2. Add the GTM ID to the page using our direct integration as seen here: https://d.pr/Pfag9y(or, alternatively, by adding the Google tag to the Javascript > Footer section in the page editor)
3. Add the following code snippet to the Javascript > Footer section of the page.
4. Publish the page using the publishing method of choice as shown here: https://d.pr/He0Eq1. You can use the Demo Page option if you are not ready to publish to your own domain yet.
5. On the live URL, right-click on the form, choose Inspect, and then you will see the element ID of each step button under the multistep-form class.
You will need the element IDs of the steps that are hidden when the visitor first sees the page. In our example, those are element-4 (the second step of the form) and element-12 (the third and final step of the form).
Keep this tab open and proceed to the next step in a new tab.
6. Log into your GTM account and go to the Triggers tab.
7. Create a new trigger with the following configuration:
- Trigger type - Element Visibility
- Selection method - ID
- Element ID - the ID from the previous step of this article
- When to fire this trigger - Once per page
- Minimum percent visible - 50
- Observe DOM changes
We suggest naming the trigger something descriptive and including the name of the landing page. This is because different landing pages will have different element IDs for various elements, including the steps of a multistep form.
8. Repeat the above for each additional step that your multistep form has. In the case of an N-step form, you will create (N-1) visibility triggers - two visibility triggers for a 3-step form, three visibility triggers for a 4-step form, and so on.
Please make sure to change the element-ID accordingly. In our example, we will create one additional visibility trigger for element-12.
9. Create the trigger for the final form submission in the following way:
Important note: You must keep the event name and condition as exactly formSubmissionSuccess because that is what the code snippet from step #3 of this article will send to Google Tag Manager.
10. Navigate to the Tags tab in GTM because next, we will create a tag for each trigger.
11. The first tag will be paired with the first trigger from step 7 of this article. It should follow the structure of the image below.
Choose Google Analytics: GA4 Event for the tag type, then select your Configuration Tag (or add it manually), choose an Event Name, then add your Event Parameters. The parameters of this event are up to you, but we recommend setting some that will make it clear what event happened, on which page, the meaning of it, and so on.
For the trigger, choose the first one that you created previously. Your final setup for the tag should look something like this:
12. Repeat the same steps for the second tag:
13. Create a tag for the final form submission:
Now you are done! Don't forget to Submit the changes that you made to your GTM container from the upper right corner in order for the changes to go live. After that, you can test the setup by submitting some steps on the live URL of your page. You can see the events in Google Analytics -> Reports -> Engagement -> Events tab.