Finding the correct CSS selector of a page element you want to track is crucial to the success of the jQuery onHandler Extension. This article will show some methods for determining the CSS selector of a page element.

In this article:

Table of Contents Placeholder

Google Chrome Developer Tools

Finding the selector of an element in Chrome only takes a couple clicks using the built-in Developer Tools.

To find the CSS selector of a page element:

  1. Right-click the element in the page. The Developer Tools window will open.
  2. In the Elements tab of Developer Tools, right-click the highlighted element and select Copy > Copy selector.

That's it! The selector string is now in your clipboard and you can paste it into the jQuery extension.

Tealium Tool: CSS Selector Tool

If you already have the Tealium Tools browser plugin, then the CSS Selector Tool makes it easy to find the selector. 

Follow the instructions on how to use the CSS Selector Tool.

Web Companion

Web Companion offers a slightly less accurate selector tool, but it can help pre-configure a jQuery extension for you.

Follow the instructions on how to use the On-Page Element Selector tool in Web Companion.

Testing a Selector

Use this method to test a selector before using it in an extension. Paste this into the Console of the developer tools and make sure to replace <jQuery selector> with the real selector that should be used:

jQuery("<jQuery Selector>").on("mousedown",function(e){
    alert("It worked!!");
});

Test this by clicking down (but not up) on the desired element. If your selector was correct then you will see a popup with the word, “It worked!!”.

Primary Selectors

A primary selector should be used when the element you want to target is not available on page load. The primary selector is a higher-level element on the page. For example, let's say you have a table of data that gets populated dynamically with AJAX after the page loads. You want to track certain links within the table, but they don't exist until after the table is populated.

If the table tag looks like this:

<table id="myTable"></table>

And your links looks like this:

<td><a href="" class="myLinks">Click Here</a></td>

Then the selectors you use might looks like this:

Primary Selector: table#myTable

Selector: td > a.myLinks