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

Become familiar with jQueries Documentation on selecting an element.

jQuery provides excellent documentation and examples on utilizing their library.  

If you are selecting a specific element and it has a CSS 'ID" or you are slelecting multiple elements that all hace the same CSS 'class' then the process can be direct and simple.  However if the CSS on the page may not provide as easy of a solution.  Some of the prebuilt or automatic tools work best when the selector are easiest.  If the pattern or scheme used in the CSS become more obtuse or difficult to choose a selector you may need to reach out for technical assistance from the support team.  

Google Chrome Developer Tools

Finding the selector of an element in Chrome when using the built-in Developer Tools.

To find the CSS selector of a page element:

  1. Right-click the element in the page and click 'inspect' in the dialog that pops up. The Developer Tools window will open.
  2. In the Elements tab of Developer Tools, right-click the highlighted element and select Copy > Copy selector.
  3. Initially review you selector in the console.  Use the jQuery statement with the selector you just copied as a string value. jQuery('yourcopiedselectorhere'); 
  4. One the results and validate the selector was as unique as required.  The object returned included an array of items selected.

selectorTest.png

If the returned results match your intended selection then you are done! 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. However, If the resulting selector is long then you may want to review using a manually method to devise a 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.  However, If the resulting selector is long then you may want to review using a manually method to devise a selector.

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 is a legacy option for older jQuery when using older jQuery libraries 1.6 or older only. You should not need to enter a Primary Selector on the current jQuery libraries versions 1.7 and higher. 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

Version history
Revision #:
5 of 5
Last update:
‎10-27-2020 07:26 AM
Updated by: