Custom CSS Selectors Supported In Autotrack

Autotrack on hold

As of 2/6/18, the Autotrack feature is on hold until further notice and is not available for new projects. If you have projects already using Autotrack, this change will not affect you for the time being. In the meantime, we advise our customers to proceed with programmatic code for more granular reporting and deeper segmentation capabilities.

Please contact your account representative or support for more information.

Autotrack allows the use of custom CSS selectors to have full control over defining elements in your event. Some common uses cases might be if you want to:

  • Select all "buy" buttons on the page, which you might accomplish using the .class selector (for example, .buy-btn).

  • Select all links that point back to your own domain, which you could accomplish with[attribute*=value] (for example, a[href*="yourdomain"] ).

  • Select all links from a specific container, e.g., a navigation bar, which you could accomplish using nested selectors (for example, #navigation-bar > a ).

Selector expressions currently supported by Autotrack

  • .class | For example, .intro selects all elements with class="intro"

  • #id | For example, #firstname selects the element with id="firstname"

  • element | For example, p selects all <p> elements

  • element,element | For example, div,p selects all <div> elements and all <p> elements

  • elementelement | For example, divp selects all <p> elements inside <div> elements

  • element>element | For example, div>p selects all <p> elements where the parent is a <div>element

  • [attribute] | For example, [target] selects all elements with a target attribute

  • [attribute=value] | For example, [target=_blank] selects all elements withtarget="_blank"

  • [attribute~=value] | For example, [title~=flower] selects all elements with a title attribute containing the word "flower"

  • [attribute|=value] | For example, [lang|=en] selects all elements with a lang attribute value starting with "en"

  • [attribute^=value] | For example, a[href^="https"] selects every <a> element whose href attribute value begins with "https"

  • [attribute$=value] | For example, a[href$=".pdf"] selects every <a> element whose href attribute value ends with ".pdf"

  • [attribute*=value] | For example, a[href*="mixpanel"] selects every <a> element whose href attribute value contains the substring "mixpanel"

  • :checked | For example, input:checked selects every checked <input> element

  • :enabled | For example, input:enabled selects every enabled <input> element

  • :not(selector) | For example, :not(p) selects every element that is not a <p> element

  • :nth-of-type(n) | For example, p:nth-of-type(2) selects every <p> element that is the second <p> element of its parent

Find your answer?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.