Introduction to the Zuko tracking codes

In order for Zuko to track your form correctly, you'll need to add two pieces of code to your site.

The Zuko Activity Tracking Code - this tracks views of your form and interactions with your form fields

A typical activity code will look like this:

_{<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>Zuko.trackForm({target:document.body,slug:'710d7ff81b890cd1'}).trackEvent(Zuko.FORM_VIEW_EVENT);</script>}

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. 

The Zuko Completion Tracking Code - this tracks successful completions of your online form

A typical completion code will look like this:

_{<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>Zuko.trackForm({slug:'710d7ff81b890cd1'}).trackEvent(Zuko.COMPLETION_EVENT)</script>}

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.

‍

Some illustrations of how Zuko codes would be added to a site

‍

Single URL, single form, different URL for completion

• Form page - www.example.com/contact
• Thank you page - www.example.com/thank-you 

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.

‍

Form contained within a pop up

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.

‍

No confirmation page forms

• ‍‍Form page - www.example.com/contact
• Thank you page - - www.example.com/contact (but with a message)

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.

‍

Multi step URLs across multiple URLs

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!

‍

Multi step forms on a single URL

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.

‍

Forms with multiple branches across different URLs

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.

‍

The same form on different URLs

Form pages

• ‍www.example.com/product1/contact
• ‍www.example.com/product2/contact
• www.example.com/product3/contact

Thank you page

• ‍www.example.com/product1/thank-you
• ‍www.example.com/product2/thank-you‍
• www.example.com/product3/thank-you

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.

‍

Treating different forms as the same form

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.

‍

Single Page Apps (SPAs)

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.

‍

More specific targeting

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.