HTML Element Selections

You can use various approaches to identify and select the website element you wish to track, un-track or customize in SkyGlue. The SkyGlue visual interface is easy to use and enables you to identify desired HTML element in most cases. If needed, you can also use any valid CSS selector to select the element of interest.

To track an event, after you have selected the desired element, you can either give it a static event name or name it dynamically. See the details on options for event names.

Visual interface-based HTML element selection

SkyGlue event tracking customization allows users to identify HTML elements using any attribute for the HTML or the structure location of the HTML web page (“RootPath”, which means the HTML element path from the HTML root node.)

Track web elements using attributes under Simple Click Event (on the SkyGlue visual interface attribute popup window)
In this section, you can identify any HTML element using the following attributes related to the element.

  • id
  • name
  • linkText (for A tag only)
  • RootPath

Once you click on an HTML element, the SkyGlue visual setup interface will display the available attributes under the “Attributes for Simple Click Event” section. If your HTML element does not have ID or name attribute, you will not see these two attributes.

Track web elements using attributes under Customized Click Events (on the SkyGlue visual interface attribute popup window)

If attributes in the Simple Click Event section can not uniquely identify the HTML element you want to track, you can use HTML attributes in the  “Attributes for Customized Click Events” section. In this section, you need the HTML tag name (e.g. tag name like “A”, “INPUT”, etc). Besides the tag name, you will see more HTML attributes for the HTML element, such as class (used by CSS style), title, or ANY attribute in your HTML element.

Add attributes to identify HTML elements or specify event name

With the attributes above, you should be able to track most of the HTML elements on your website.  If you are still unable to find an attribute that can uniquely and persistently identify your HTML element (or the element group), you need to ask your website developer to add some attributes to the HTML element that can uniquely and persistently identify the element.  You can see details here.

Advanced CSS-based selection

If it is hard to select an element with the attributes in the visual interface, you can specify the elements you want to track using any valid CSS selector.

Use CSS selector to select one or more elements

You can add css: prefix to the CSS selector and add the selector in the simple event tracking section, for example: css:ul.submenu a. Following is a screenshot:

css-selector

Select elements dynamically added after pageload

If an element is loaded after the initial page load, you can add a late: prefix in the CSS selector to specify that. SkyGlue will then try to match the element when new HTML elements are added to the web page. Following is an example screenshot.

latecss