Setting up a Multi Step Form in Zuko

Zuko allows you to track online journeys that take place across multiple steps. How you configure and set that up in Zuko is largely up to you, but there are two main ways you can do it:

1. Tag it up as you would a single step form

The simplest way to get your form tracking set up and running is to use the standard set up and tag the form as if it were a single step - adding the Activity Tracking tag to the initial form load and then the Completion Tracking tag to the thank you page.

As long as all form stages are on the same domain Zuko will keep tracking your form and will pull in each of the fields and user interactions as usual. Note that this works even if you have sub-domains that the form is on. For example, the below example would track across both pages:

https://example.com/page1

https://example.com/page2

If you have a Single Page App (SPA) where a user completes multiple steps of a journey but the URL does not change, this would also work - you only need to load your Activity Tracking tag once (when the journey is first loaded) and fire a single Completion tag at the very end of the journey when a user submits the whole form (not each individual step).

Generally, Zuko users start with this method as it is simpler to get everything set up and to start pulling in data quickly.

If you have a form that is split across different domains you will need to use the second technique outlined below.


2. Split the form reporting by step

If you have a form that is split across different domains OR you simply want to break out the reports for individual steps within the form (to construct a mini-funnel for example) you will need to spend a little more time setting the form so each stage is individually tagged up.

Example 1 - A linear form

As an example; you may have an online buying journey that looks something like this:

Step 1 - Delivery details - https://example.com/checkout/delivery

Step 2 - Billing details - https://example.com/checkout/billing

Step 3 - Payment - https://example.com/checkout/payment

Order Confirmation - https://example.com/checkout/orderconfirmation

For this kind of multi-step journey, you would set each step up as a new form in Zuko, like this:


Adding Form Screenshot


Each time you complete the setup process for each step in your journey, you’ll generate a pair of codes, each containing a unique slug:

  1. Activity Tracking Tag - used to track interactions with a given form step. It will look like this:

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>

<script>Zuko.trackForm({target:document.body,slug:'298137691826'}).trackEvent(Zuko.FORM_VIEW_EVENT);</script>

  1. Completion Tracking Tag - used to track successful completions of a given step. It will look something like this:

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>

<script>Zuko.trackForm({slug:'298137691826'}).trackEvent(Zuko.COMPLETION_EVENT)</script>


You’ll notice that the tags themselves do not contain any information about the URL of your form. Zuko looks only at the domain and slug when determining where to send your data.

Note - The final step in this process (the Order Confirm or Thank you page) does not need to be added to Zuko as a form, since the page itself does not have a form on it. It only acts to fire the completion code for the previous step.

Notes on what URL to enter during setup in Zuko:

Each URL may also contain UTM parameters - when adding this into Zuko, you can either include the full URL or strip out the end. Zuko will ignore this if included - the domain and slug are the important things used to determine where your data is coming from.

Each URL may contain a customer ID - for example https://www.example.com/checkout/1298376123/step1 - this is fine - you can simply enter this entire URL as part of the setup process - Zuko will only be looking at the domain and slug when data arrives at our servers, so this unique ID will not affect your tracking.

Adding tags to your site

Next you need to fire these tags on your site. If your journey is a linear one, with a user working their way through each step towards the end, you can use the next step in the process to fire the completion tag for the previous one.

So your tag firing could look something like this:



You can see above that the next step in a journey acts as the completion step for the previous one. You’re ‘chaining’ up tags as a user progresses through your journey. 

Our usual recommendation is that the activity tags should be fired as late as possible on each step, to ensure that the form has been loaded. The completion tracking tags can be fired at any point. If using a tag manager, we would recommend that you fire the activity tracking on Window Loaded or Dom Ready. You may also want to ‘combine’ the tags above and use the same firing rule for both the Activity and Completion tracking for Steps after the first one.


Example 2 - A multi-step form with optional steps on different URLs, or a non-linear journey

If you have an online journey that has steps that some users have to go through, but not others, add every step into Zuko as above.

When adding the activity and completion tracking tags to your site, you can fire each activity code on each step as normal, but you’ll need to think about where to fire the completion codes. Since completion codes need to track successful completions of a step, you need to fire the completion code on every possible next step in the process.

For example, if someone completes Step 1, and depending on their inputs, may be taken to Step 1A, Step 1B or Step 1C, you need to fire the completion tag for Step 1 on all of those steps.

You may therefore end up with a tag setup like this:



Here you can see that Step 1a has the completion code for Step 1, and Step 2 has two completion tags on it - for Step 1 and Step 2.

If you need further guidance on any of this please contact us on support@zuko.io

See more guides
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io
This website stores data such as cookies to enable important site functionality including analytics, targeting, and personalization. By remaining on this web site you indicate your consent.