Creating Zuko Overrides in Google Tag Manager

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.

As a working example, let's use the situation where you have field elements that do not have HTML names or IDs and want to add them:

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. 

Let’s look at this step-by-step:

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.

Submit button console view

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 : 


var submit = document.getElementsByClassName('submit-button-2 w-button')[0]; 

if (submit) {

submit.dataset.zukoId = 'submit-button' ;



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. 

GTM Tag setup

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!  

Zuko override tag configuration

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.

Zuko GTM override trigger

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: 

Zuko GTM Submit

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. 

Zuko GTM review

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:

Zuko GTM console review

The process to follow to write your override tag

  1. Find the HTML element you want to override by hovering over the button, clicking on Inspect and you should see it in the HTML of the page:

For this example, this <input> does not have a unique id. However, it has a class that we can target. 

  1. This HTML element will become your variable and the override code will target this variable. 

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.

  1. Use the override code to assign it a Zuko id in an if function: 




For the above example, the tag will look like this:

if (button) {

    button.dataset.zukoId = "send-message-button"; 


  1. To test your tag, you can paste it into the Console. You can then inspect the HTML again, and you should then see the override within the HTML element you have targeted. This will appear as data-zuko-id = ‘your label’ :

This is how Zuko will read interactions with this field. 

See more guides
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: