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 visitor 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 visitor 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 visitor 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:

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>}

2. 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 visitor 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 visitor 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 visitors 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:

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