Zuko Guides - Setting Up Zuko in Google Tag Manager

05/01/2023, 13:08 Zuko Guides | Setting up Zuko in Google Tag Manager
Product  Pricing Consultancy Blog Demo Guides

Log In  GetContact
Started
Setting up Zuko
in Google Tag
Manager
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:'77be08c53158706
3'}).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.
https://www.zuko.io/guides/setting-up-zuko-in-google-tag-manager 1/11
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.
Setting these up in Google Tag Manager

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:
1. https://example.com/checkout/step1/customerID-XXXXXXXX
2. https://example.com/checkout/step1?
customerid=XXXXX&products=coolstuff
3. https://example.com/checkout/customerID-XXXXXXXX/step1
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.
Completion tracking tag

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.
For multi step forms

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 forms where no new page is loaded when

submitted
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.
For Single Page Applications

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).
Sampling your visitors

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.
Checking your set up
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.
See more guides
What is Form Analytics? Formisimo Ltd, Colony, 5 Piccadilly Place,
Testimonials Manchester, M1 3BR

VAT Number: GB181252425
About Us
Registered in England as company number
Privacy Policy 08859680
New Business: sales@zuko.io
Terms and Conditions Support: support@zuko.io
Technical Information
Documentation
Competitor Feature
Comparison
FORMISIMO LTD
COPYRIGHT 2023

Zuko Guides - Setting Up Zuko in Google Tag Manager

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Zuko Guides - Setting Up Zuko in Google Tag Manager

Uploaded by

Copyright:

Available Formats

05/01/2023, 13:08 Zuko Guides | Setting up Zuko in Google Tag Manager

Product  Pricing Consultancy Blog Demo Guides

Setting these up in Google Tag Manager

Open up your GTM container and select new tag

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.

When choosing a trigger type, we have a few options.

For most forms however, window loaded should do the trick.

You may however have a slightly more complicated URL structure:

Choose a rule that targets your form wherever it appears.

Completion tracking tag

For multi step forms

For forms where no new page is loaded when

You may to try to use the Form Submission trigger:

For Single Page Applications

Sampling your visitors

Checking your set up

See more guides

What is Form Analytics? Formisimo Ltd, Colony, 5 Piccadilly Place,

Testimonials Manchester, M1 3BR

You might also like