Tracking non-standard form elements in Zuko

Zuko, by default, tracks interactions on these types of HTML elements:

Along with a field’s tagName, Zuko records three optional HTML attributes for each field: type, name and id.

Sometimes however form elements may be coded using different HTML elements.

For example you may have a form element like this:

     <div class="dropdown-button" type="button"></div>

This doesn’t use any standard form element types and would not track in Zuko without changes made to the page.

You can however add additional attributes to your field elements so that Zuko can track them by editing your HTML.

These are the attributes you can add:

     data-zuko-tag-name = "input"

       will show 'input’ within the TagName column in Zuko

       NOTE - For this attribute, you must use one of the standard input element types mentioned above: INPUT, TEXTAREA, SELECT, BUTTON

     data-zuko-type = "yellow"

       will show 'yellow' in type column in Zuko

      data-zuko-name = "penguin"

       will show 'penguin' in name column in Zuko

     data-zuko-id = "toast"

      will show 'toast' in ID column in Zuko

So by adding one of more of the above, you can ‘force’ Zuko to track non standard form elements. For example, you could add attributes to a <div> being used as a button:</div>

     <div data-zuko-tag-name="button" data-zuko-id="divAsButton">Click me</div>

With this change, the above element would be tracked by Zuko as:

     <button id="divAsButton">Click me</button>



      <div class="dropdown-button" type="button"></div>






This will mean that Zuko tracks the field as this:

     <select class="dropdown-button" type="select" id="appointmentTypeSelect"></select>

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: