In order for Zuko to track your form correctly, you'll need to add two pieces of code to your site.
A typical activity code will look like this:
This tag loads the Zuko library onto the page, starts tracking the form ready for interaction events from the visitor, then sends the form view event.
Importantly, nothing in the above code contains details about a URL, so provided you fire the above code in the right place on your site, data from your forms will always end up in the right place, because Zuko uses the slug and domain to know where to put the data.
The above code also does not have to be fired on page load. If your form is only visible when a visitor clicks a button for example, you can choose to fire the Activity Tracking Code after that event.
A typical completion code will look like this:
A completion event can be fired on a certain URL, page load, or triggered on an event, as long as it accurately represents the point that a visitor has completed your form.
Following on from the above examples, ensure that a tag like the following is configured to fire in GTM or be added to the page when a visitor has completed your form.
This is the simplest form of set up. The Activity tracking code just needs to be fired on the form page, and Completion code on the thank you page.
This might be the case on a homepage which has a contact form that appears after clicking a button. You may not want to load Zuko on every page load as this will count towards your visit allowance for the month. You would therefore fire the Activity Tracking code when and only when the form becomes visible to your visitor. This might be on a click event when the button is clicked, or another event that represents the loading of the form.
So for some forms there may not be a brand new URL loaded for the thank you message. In this case, you may need to fire the Zuko completion code when the confirmation message is made visible (and only then) - this can be triggered by an event on your website that signifies that this message has been shown.
This is the best guide for this- https://www.zuko.io/guides/setting-up-a-multi-step-form-in-zuko
In short - each step is added as a new form in Zuko (with a different slug) and then the Activity and Completion codes are added in a chain throughout the form journey. Check the guide for more information on this!
This would be tracked as a single form within Zuko with a single slug. The Zuko code should be loaded once at the start of the journey and the completion code should be loaded when the entire journey is completed at the end. Zuko will take care of the rest.
Guide for this - https://www.zuko.io/guides/setting-up-a-multi-step-form-in-zuko
In short - each step is added as a new form in Zuko (with a different slug) and then the activity and completion codes are added in a chain throughout the form journey.
Completion codes are added in every place that a visitor might get taken after completing a step.
For example completing Step 1 might take someone to Step 2A, Step 2B or Step 2C, so the completion code for Step 1 should be added to all three.
Thank you page
This can be added into Zuko as a single form using any of URLs - remember Zuko only looks at the domain and slug.
Then they can add the same tracking and completion codes to every single version of the forms.
This can be done in the same way as above - simply adding the same tracking and completion codes to each form. If the slug is the same, Zuko will merge all of the data into one form in Zuko.
Set up as a single form in Zuko, with the activity tracking code added at the start, and the completion code fired right at the end on form submission.
Sometimes you may not want to target the whole page with Zuko. For example, if you have two forms on the same page Zuko would pull in data for them both. In these cases, you would want to narrow your target down to the form or an element containing the form. More information this can be found in the guide to setting up the Zuko target.