Trackleon logo Trackleon

How to get the selector

To track a specific part of a webpage (like a price or stock status) with 100% precision, you need its "Selector". Here is how to find it in seconds.

1

Right-click the element

Go to the webpage you want to track. Find the specific text, price, or button you care about.

Mac Users: If you don't have a right-click mouse, hold Control and click, or tap with two fingers on your trackpad.

2

Select "Inspect"

In the menu that appears, choose Inspect (sometimes called "Inspect Element").

This will open a panel on the side or bottom of your screen showing the code behind the site.

3

Copy the Selector

The panel will automatically highlight the code for the element you clicked.

  1. Right-click the highlighted line of code.
  2. Hover over Copy.
  3. Click Copy selector.

You're done!

Go back to Trackleon and paste this into the "CSS Selector" field.

By default, Safari hides the developer tools. You might need to enable them once.

First time? Enable the Develop Menu

  1. Open Safari.
  2. In the top menu bar, click Safari > Settings (or Preferences).
  3. Go to the Advanced tab.
  4. Check the box at the bottom: "Show features for web developers".
1

Control-click the element

Right-click (or Control-click) the item you want to track and select Inspect Element.

2

Copy Selector Path

In the code panel that opens at the bottom:

  • Right-click the highlighted blue line.
  • Go to Copy.
  • Select Selector Path.
The selector looks really long or weird?

Sometimes browsers generate very complex selectors like: body > div:nth-child(2) > div > main > div > section:nth-child(3) > div > span This usually works, but if the website changes its layout slightly, it might break.

Pro Tip: Look for an ID (e.g., #price) or a unique Class (e.g., .product-price) in the code and use that instead if you know how!

Go back to Tracker Setup