Interactive Events

Introduction

UseItBetter automatically tracks all user interactions with a website as (E) interactive events. When a user clicks on a button or fills in a form field, an interactive event is tracked.

This means that with UseItBetter your don’t need to tag any custom events like you do with Google Analytics, Adobe Analytics or Mixpanel to track how users behave. Instead, you can focus on developing your website and the tracking script will track the events based on the website’s HTML and CSS.

In the analytics panel you can measure how often such an event takes place or use that event to create a segment of visits in which this event happened. You could measure and monitor this segment over time, and even more importantly, analyze visits in the segment: watch session replays, look at heat maps, use form analytics and so on. Each of those reports are based on (E) interactive events too, for example heat maps are based on click and mouseover events, while forms are based on change events.

Syntax of (E) Interactive Events

Every (E) interactive event consists of three parts:

  • a selector of an element which a user interacted with,
  • an event type (interaction type),
  • in some cases, an object with the event’s arguments.

For example, in this (E) interactive event:

select[3]#accountDobYear.required.change({"val":"2003", "name":"accountDobYear"})
  • select[3]#accountDobYear.required is a selector
  • .change is an event type
  • {“val”:”2003″, “name”:”accountDobYear”}) is an object with arguments

This (E) interactive event means that a change event happened on a select HTML element (a form field) with ID attribute accountDobYear and with CSS class required which changed its value to 2003:

event-and-html-example-1

Selector of an Element

A selector of an element is formed automatically on the basis of a website’s DOM structure. If you are familiar with HTML, that should be fairly easy for you to understand since every selector consists of:

  • the tag of an element,
  • the CSS child index of an element within its parent element wrapped with [ ] (square brackets)
  • the ID attribute of an element, prefixed with a # character (hash)
  • CSS classes, prefixed with a . character (dot)

ID attribute

Each selector will always contain at most one element with an ID attribute.

If the element that the user interacted with had no ID attribute, the element selector would also include information about all parent elements up to an element with an ID attribute.

If the select element in the example above had no ID attribute, the (E) interactive event tracked as a result of changing its value would be:

form[1]#register/div[4]/div[2]/select[3].required.change({"val":"2003", "name":"accountDobYear"})

This means that the select element that a user interacted with is inside a div, which is inside another div which is inside a form element with register ID attribute:

  • form
    • div
      • div
        • select

If no parent element had an ID attribute, the selector would include all elements up to the body tag to make sure that the selector points to unique element on a page.

As long as your website follows the HTML specification and never uses the same ID attribute for multiple elements on the same page, an element’s selector will always be unique for every element on that page.

Tag and Index of an Element

The index of an element, the number in square brackets after a tag name, contains information as to which child it is within the parent element.

The indexing starts from 1 (and not from 0) which is consistent with standard CSS child selectors (i.e. :first-child).

event-and-html-example-2-index

On the page from the screenshot above, clicking the “Help” link in the footer would produce an interactive event:

ul[1]#questions/li[2]/a[1].click

Even though the selector is missing classnames that would contain explicit information about exactly which link was clicked, knowing the content of the page we can identify the clicked element based on the index of each element in the selector:

  • the clicked element, anchor tag a[1] with text “Help”, has index 1 because it’s the first (and only) child of its parent li,
  • the parent of the clicked element, the list element tag li[2], has index 2 because it’s the second element in the unordered list tag ul,
  • the unordered list tag ul[1] with ID attribute questions has index 1 since it is the first child of the div tag with classname footer-links.

When querying data, it is common to replace an index with an asterisk in a selector in order to match multiple elements. A query with the selector:

ul[1]#questions/li[*]/a[1].click

would match (E) click events in all of the links in the “Questions” column of the footer (“Help”, “Track Orders”, “Returns”). However, selectors uniquely identify an element on a page and not the content of that element itself. Therefore, if the order of links in the footer would change at some point, it wouldn’t be possible to reliable determine which of the links were really clicked, except that it was one of the links in the “Questions” column.

Interaction (Event Type)

Names of types of interactions are based on event names in JavaScript. UseItBetter automatically tracks only a selection of events and there are some differences in the scope of tracked events on mouse- and touch-enabled devices.

The event types below are listed in the order of execution of those events. If a user clicks an element, a click event will be preceded by a mouseover, a mousedown and a mouseup event in that order.

Mouse enabled devices Touch enabled devices
 mouseover  mouseover**
 mousemove (not tracked*)  touchmove
 mousedown  touchstart
 mouseup  touchend
 click  click

* a mousemove event, which is equivalent of a touchmove event on devices with touch interface is not tracked as it would in most cases duplicate mouseover event.

** a mouseover event on a touch devices is tracked, however normally such events should not occur unless on hybrid devices (supporting both mouse and touch) or artificially dispatched by website’s code.

For a full list of tracked JavaScript events see the index of data points.

Event Arguments

Certain (E) interactive events contain additional information. For example, the arguments of a change event include the new value of a form field. The arguments are passed in an object and displayed in brackets:

select[3]#dateOfBirthYear.required.change({"val":"2003"})

Limitations of Use of Event Arguments

Segmentation by arguments is not supported, which means that it would not be possible to find visits in which users changed the value of the dateOfBirthYear field but not visits in which the value of dateOfBirthYear was changed to a specific value, for example “2003”.

The Stats, The Segments and The Signals reports do not support queries with arguments and can only use queries with selector and interaction type.

Event arguments are used in Visit Replays, The Forms and The Visits reports.