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 below you can find a guide to how Zuko users typically set things up.

For multi-step form across different URLs

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 will probably set each step up as a new form in Zuko, like this:



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.

For 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.

Form multiple steps contained on the same URL, such as an SPA

If you have a Single Page App (SPA) where a user completes multiple steps of a journey but the URL does not change, it’s probably most straightforward to set this up as a single ‘form’ in Zuko. This is because the page is never refreshed - new content is simply pulled in and revealed to the user as they make their way through the form. 

The good news is, once Zuko is loaded on the page, it will track and pick up interactions with fields and inputs even if they are only loaded after a certain period of time (for example when a user moves from Step 1 to Step 2). Conditional fields are the same - if certain fields only appear based on the options a user selects, Zuko will track these too.

You therefore 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).


See more guides
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.