.svg){kind=small}
Each time you set up a form in Zuko, you are given two pieces of code:
Activity Tracking Tag - this tracks all interaction with your form and fields, and needs to be fired when a visitor views your form. This needs to be loaded only after the form itself has loaded on the page
<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>Zuko.trackForm({target:document.body,slug:'77be08c531587063'}).trackEvent(Zuko.FORM_VIEW_EVENT);</script>
PLEASE NOTE THIS IS DUMMY CODE ONLY AND SHOULD NOT BE USED IN YOUR TAGS. THE CODE YOU SHOULD USE IS PROVIDED IN THE APP WHEN YOU SET UP THE FORM.
Completion Tracking Tag - this tracks successful completions of your form and should be fired when you consider the form to be successfully submitted
<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>Zuko.trackForm({slug:'77be08c531587063'}).trackEvent(Zuko.COMPLETION_EVENT)</script>
PLEASE NOTE THIS IS DUMMY CODE ONLY AND SHOULD NOT BE USED IN YOUR TAGS. THE CODE YOU SHOULD USE IS PROVIDED IN THE APP WHEN YOU SET UP THE FORM.
Each pair of codes contains a unique slug, so you cannot simply fire the tracking code on all pages - you need to be a bit more targeted.
Activity tracking code
Open up your GTM container and select new tag
Rename the Tag to reflect that it is the Zuko activity tag then open up Tag configuration:
You’ll want to select Custom HTML tag from the list of options:
From here, you should have Zuko open in a different tab. After you’ve added a form, Zuko will give you the two pieces of code you need. Copy the tracking code:
Paste this code into the Custom HTML text area:
Next we need to decide where to fire this code, and we do so in triggers.
If you already have a trigger set up to fire for your form you may be able to use that but we usually advise setting up a new one for Zuko.
When choosing a trigger type, we have a few options.
Which one you choose will depend on how your form is built and works on your website. Here are some options:
Pageview - fires a code as soon as the page is viewable by a visitor. Whilst this may work for most forms, sometimes this causes the Zuko code to load before the form is presenting the page. This will mean that Zuko can’t see the form when loaded and will not continue to send across events
Window Loaded - this is a good option. This waits until the window loaded event is sent to GTM, usually after everything on the page has been loaded and is ready to interact with. This option overcomes the issue with the pageview event above.
Clicks - if your form is for example contained in a modal that is only visible after clicking on a button on a page, you may want to only fire the Zuko code when a visitor on the button itself.
Timer - if the window loaded event still does not work and your page takes a while to load (a few seconds for example) - you can set a timer to fire Zuko after a set period of time to ensure when it does your form is loaded. You will need to make sure Zuko is only fired once per page.
For most forms however, window loaded should do the trick.
Once you’ve selected Page View - Window Loaded, you will then also need to select Some Window Loaded Events and define some conditions.
For some forms, you will be able to copy and paste a static URL, like so:
You may however have a slightly more complicated URL structure:
In these cases you can use another matching rule offered by GTM:
Choose a rule that targets your form wherever it appears.
Important note - when adding your form into Zuko, you will have entered a URL when setting it up. Don’t worry if this URL does not reflect everywhere the form appears - you can fire the Zuko code on multiple URLs even if some of them are different to the one you have configured in Zuko. When data arrives at the Zuko servers, it looks for your domain and the slug, so as long as those two match your previously added form, data will be collected and shown.
The second code you have to add on your website must fire whenever your form is successfully submitted.
In the same way you did for the activity tracking code, add the completion tag as a custom HTML snippet:
For many forms, when a visitor submits the form they will be taken to a new URL:
https://www.example.com/checkout/orderconfirmed
https://www.example.com/checkout/orderconfirmed?orderid=98765698987
https://www.example.com/checkout/thankyou
https://www.example.com/enquiryreceived
In this instance, you can set up a trigger to fire when this page is viewed by a customer:
Note - for the completion tag, you can use pageview as the completion code can fire as soon as the page is viewable - it does not have to wait for any content to be loaded.
You can use GTM to set up a form that appears across multiple URLs. You can find our general guide here - https://www.zuko.io/guides/setting-up-a-multi-step-form-in-zuko
You can apply the same principles mentioned above to fire on each step.
For some forms, a visitor will not be taken to a new URL when the form is submitted successfully. In this instance you will need to find another way to trigger the completion code for your form.
We advise against using a click event on the submit button - since it will be possible for a visitor to try and submit the form by clicking this and failing (if they have validation errors for example). You will therefore get false positives where it seems like visitors have submitted the form but have not.
You may to try to use the Form Submission trigger:
Or a custom event:
It is really up to you how you choose to fire the completion code as long as you are doing so to reflect when the form has been successfully submitted.
The best way to set up SPAs in Zuko is as a single form. You only need to fire the activity code once when the form loads for the first time. You then need to fire the completion code at the very end of the journey when the entire form is submitted (not between each step).
You may want to fire Zuko only on a proportion of your visitors, you can use one of GTMs variables to help you. Configure a new user set variable and select Random Number:
You can then change your trigger to fire on Window Loaded, then set a matching rule based on the random number. For example you could set a rule where if the number ends with a one, Zuko fires:
This would fire for 10% of traffic. You can also use regex matching to change the matching rules and fire on different proportions of traffic.
You can check your setup either by using Preview Mode in Google Tag manager and completing your own form.
You can also follow our guide using the network tab here - https://www.zuko.io/guides/checking-your-code-installation
It may be worth trying a few different approaches to adding the tracking and completion codes if you are struggling, using preview mode each time to check your set up.
