.svg){kind=small}
Zuko has an inbuilt flexibility to allow it to track non-standard form elements or to override the HTML attributes of an element. The linked guides show you how to create the code to add directly to your site to enable these overrides. However, you are also able to add these codes to your site using Google Tag Manager. This guide shows you how.
Occasionally, fields and buttons on your form may not have unique HTML identifiers, but several may have the same tag name. For example, you may have two buttons, one being <button>Next</button> and another <button>Submit</button>. These buttons do not have a unique ID or name, but carry the same tag name; as Zuko has no way to identify these buttons separately without a unique identifier, so data for interactions will combine and appear as one field in your Zuko data as BUTTON. The same principle would apply to other fields which do not carry a unique id, such as dropdowns with the tag <select>; if multiple dropdowns appear on your form, the data would appear as one field in Zuko as SELECT.
You can apply Zuko overrides to your form code to allow Zuko to treat these as separate elements in your reports, either by hardcoding a Zuko override in the form HTML or by adding a tag and trigger in Google Tag Manager. Often this is the quickest solution if your developers are tied up with other tasks.
In much the same way you would add your Zuko activity and completion tags and triggers in GTM (covered by the guide here), you can apply the same process to add Zuko override code- you simply need to add a tag for Zuko in GTM, and apply a trigger to tell it when to fire the tag.
First, you need to establish the code to add to the tag (you can review Zuko's technical documents to help you do that). At the bottom of this guide, you will find an example of a step-by-step process by which to identify and override a targeted element using a Javascript tag.
In the example above, the submit button has a class but no unique id. Class names aren’t read by the Zuko tracking code so data from other elements in this class will combine in Zuko. We can write a Zuko override using Javascript to assign it an id in Zuko that will only be used in the Zuko app to distinguish it from the other similar elements :
<script>
var submit = document.getElementsByClassName('submit-button-2 w-button')[0];
if (submit) {
submit.dataset.zukoId = 'submit-button' ;
}
</script>
This is the example override code that will be the tag in Google Tag Manager.
Once you have your code, head over to your Google Tag Manager, click on Tags on the left toolbar, and select New.
Then on Tag Type, select Custom HTML
In Tag Configuration, insert your Zuko override code, and don’t forget to give the tag a name so you don’t struggle to find it later!
Next, you want to tell GTM when to trigger the tag. Underneath Tag Configuration, you will see Triggering. Select this and on the Choose a Trigger page, select the + icon on the top right hand corner to create a new trigger.
On the Trigger Configuration page, you can set when your tag will trigger. The simplest solution is to set your trigger on the Page View setting. Essentially, this means that the tag will be triggered when the page is loaded.
To do this, click on the Trigger Type and the sidebar will appear. Here, you will see several different options under Page View. We recommend that you select Window Loaded as you can be sure that the tag won’t fire until your form has loaded. Underneath, you can select All Window Loaded Events.
Once you’ve selected your trigger, you should now see the Tag and Trigger set up. Save your set up and you will be redirected to your list of Tags on your GTM account.
On your Toolbar, you can Preview and Submit your changes. It is recommended that you preview your changes before you submit them, just to check they work before you deploy them:
Google Tag Manager will now trigger your override tag according to your instructions, and hey presto! Zuko will now read interactions with your field according to the Zuko id you put in your tag. In our example, this button now has a unique id ‘submit-button’ and Zuko will now interpret the data using this id.
If you wish to check further, you can inspect the HTML and you will see that the tag has added the Zuko id we assigned to the button:
For this example, this <input> does not have a unique id. However, it has a class that we can target.
var button = document.getElementsByClassName("submit-button-2 w-button")[0];
NB. if you are targeting a class name, remember that this is an array and there may be several different elements within this class. To define the element, you may therefore need to define which element in the sequence you wish to target. Ie. [0] for the first element in the sequence, [1] for the second element, and so on.
if (VARIABLE_NAME) {
VARIABLE_NAME.dataset.zukoId = "THE ID YOU WANT TO ASSIGN";
}
For the above example, the tag will look like this:
if (button) {
button.dataset.zukoId = "send-message-button";
}
This is how Zuko will read interactions with this field.
