HTML Element Selection used in SkyGlue Tracking

You can use various approaches to select the elements you want to track in SkyGlue. Visual interface is easy to use and can select your desired HTML elements in most cases. If needed, you can also use any valid CSS selector to select  the elements you want to track.

After you selected the desired elements, you can either give them static event names or dynamic event names. See the details on options for event names

Visual interface-based HTML element selection

SkyGlue event tracking customization allows users to track 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.)

Tracking using attributes for Simple click event
In this section, you can track any HTML element using the following attributes related to the HTML element.

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

Once you click on the HTML element, SkyGlue visual setup interface will show you the available attributes for simple event tracking in 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.

Tracking using Attributes for Customized click events

If attributes for simple event tracking can not uniquely identify the HTML element you want to track, you can try using HTML attributes in the  “Attributes for Customized click events” section. For 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.

Adding 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 still cannot find a HTML element attribute that can uniquely and persistently identify your HTML element (or the element group), you need to ask your website developer to add some attribute to the HTML element that can uniquely and persistently identify the HTML element.  You can see details here.

Advanced CSS-based selection approach:

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