.svg){kind=small}
One of the great things about custom event tracking in Zuko is that it is a really open and flexible system - you are not restricted in the type of events that you can track. If you think the event may be affecting visitor behaviour in your online form, you can push it into Zuko and see for yourself.
NOTE - For custom event tracking, you will be setting up a new tag or tags, completely separate to your Activity and Completion tracking codes. If you have already added those to your website, you don't need to change or amend those at all - the below tags would be added as completely separate tags in addition to those.
This assumes that there is a specific event that you would like to track (as opposed to a category of event). This might include a user clicking on a chat widget or other button, a particular error message.
The Tag will be a piece of Custom HTML within GTM and can be used independently to your Zuko tracking and completion scripts (so if you are already tracking form data, you do not need to amend those Zuko tags).
You can find this tag here - https://docs.zuko.io/knowledge-base/installation/#tracking-custom-events
<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
Zuko
.trackForm({slug: 'YOUR FORM SLUG'})
.trackEvent({type: 'THE EVENT NAME THAT WILL APPEAR IN ZUKO'})
</script>
You can see that two parts of this code will need to be changed:
YOUR FORM SLUG - this must match the slug in your tracking and completion codes, which you can find in Zuko under the settings for your form.
EVENT NAME - this is how your event will appear in the Zuko reporting - you name this as you like (it does not have to match anything within GTM, since it is the trigger that is picking out the event itself).
This is the important part. You need to configure a trigger that will fire when your event occurs during a users session.
Tag Manager offers a number of built-in options for your trigger:
Note - since we are interested in tracking things that happen during a users session, we probably don’t want to use Page View, DOM Ready or Window Loaded as triggers (we will use those for Custom attributes instead).
Clicks - can be used to track users clicking on non-form elements on your page such as a chat widget or input that sits outside the form itself.
Element Visibility - can be used to track the occurrence of error messages or other pop up messages within your form.
Custom Event - if you’re already tracking other custom events that occur on your form page, you can easily link into them here.
Javascript Error - something broken that is preventing users from submitting your form? Latch onto Javascript errors to show you how often this is happening.
So tying this all together we have:
1. A tag that pushes a specific event name into Zuko
2. A trigger that fires when that event occurs.
Simple! Once published, events will start to be sent to Zuko.
If set up correctly, they will appear on your Form Data page:
Note - the above describes a method for pushing one specific event into Zuko - using this method you would have to set up multiple tags and triggers if you were looking to track the occurrence of different events. If you set up multiple triggers for the above, each time the event pushed into Zuko would be the same. For example if you named the event ‘Email error’ but set up a trigger for all error messages, they would all be pushed into Zuko as ‘Email error’.
Firing a click event on a submit button (not just a successful submission)
Tag:
Trigger:
The ID has been used here as the button has an ID which you can see here:
The following is a simple way to track events that you are already able to latch onto in GTM using variables. For example you can see a list of variables configured here:
You can use any of these (and any of your User-Defined Variables) to push events into Zuko.
This looks similar to the one above, but with one major difference - the use of {{}}:
<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
Zuko
.trackForm({slug: 'YOUR FORM SLUG'})
.trackEvent({type: '{{THE VARIABLE NAME YOU WANT PUSHED}}'})
</script>
Here there is a key difference and that is the use of {{VARIABLE}} after the event type. We are using a variable to push in different information into Zuko depending on the value when the event occurred. Basically what we’re saying here is to ‘push the event, and push the value of this thing that is specific to this event.’
Handily in GTM as soon as you type ‘{{‘ a dropdown will appear to give you the options on what you can use:
You can see above that my options include all variables that I have set up in GTM. I can push Click IDs, Error Messages and anything else from this list.
You might have something like this:
.trackEvent({type: {{Click ID}}})
Which means that every time the event is fired, if the Click ID has been set as a variable for the user session, it will be sent to Zuko.
You want to make sure that your event is sent at the most appropriate time given the type of thing you arte tracking with the tag above.
For example, if I am wanting to send across information about something a user clicked, I also want this to be triggered when a user clicks things on the page I am interested in.
In this case I would set something up like this:
This will track ALL clicks on my chosen webpage. You can tweak and change the conditions to suit your needs.
If instead I wanted to send information about an error message, then I might instead choose to fire the tag when the message is visible to a user:
You’ll need to do some digging to pick out the HTML ID of the message, or use the CSS selector to choose the right one.
The above will push the Click Class into Zuko as the event name - essentially I am tracking all clicks on the page (which may include non form-based clicks_ by people who interact with the form.
Since I want to track clicks on my page, I have set up a trigger to fire whenever a user clicks on something on the page I am interested in tracking.
This essentially pushes information from your website and about your users into a place that other Google products can then access them. Basket size, products, and anything else can be pushed into this data layer.
https://support.google.com/tagmanager/answer/6164391?hl=en
This allows you to turn that information you’ve pushed into the data layer into variables you can view inn GTM and then set triggers based on them:
https://www.analyticsmania.com/post/data-layer-variable/
These can be used to clean up noisy variable values and make them nice and easy to read. For example you can create a lookup table that turn
'?utm_source=twitter.com&utm_medium=social&utm_campaign=tweets'
Into
'Twitter'
Find out more here - https://www.searchviu.com/en/lookup-tables-google-tag-manager/
