Tracking non-standard form elements in Zuko

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

• INPUT
• TEXTAREA
• SELECT
• BUTTON
  

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>}

Example:

Before:

      _{<div class="dropdown-button" type="button"></div>}

After:

          _{type="button"}

          _{data-zuko-tag-name="select"}

          _{data-zuko-id="appointmentTypeSelect"}

          _{data-zuko-type="select">}

This will mean that Zuko tracks the field as this:

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