The CSS Selector criterion is a triggering criterion that enables defining a trigger.
To learn how to create a trigger, please refer to this article.
📖 Definition
Use the CSS selector option if you want to trigger your campaign only when the loaded page contains an element linked to a specific ID or class. This option is fully identical to the CSS/ class/element you can configure in the Where section of the targeting step.
💡 Use case
For example, you want to create a specific carousel on the homepage of your website for clients who have a gold membership. The only element that differentiates a gold member from a “standard” member is an icon located in the header of your website. Gold members have a specific menu/section listing all their advantages. On the website, this section is coded with an ID called #menu-gold.
In this case, you need to identify the sessions when this specific ID appears, this is your campaign trigger. To do so, choose CSS selector, select Include > ID, and select the relevant ID from the drop-down list.
Let's see how to use it effectively according to your website.
🔍 Inspecting your webpage to find valuable elements
Inspect your webpage : right click (or Ctrl+Shift+C) > Go to Elements tab
You can then inspect precisely elements of the page by pressing again the shortcut Ctrl+Shift+C or activating the inspect on hover option:
It will allow you to highlight elements on your page and select them when clicking on them:
You can then retrieve and copy easily a selector by right clicking on the element, select ‘copy’, then ‘copy selector’:
⚠️ Keep in mind though that there are a lot of ways to build selectors according to the degree of precision and what you want to target.
A copied selector may not be precise enough to distinguish an element from another.
To check it, you can press Ctrl+F to open a search bar and paste your selector to see the number of occurrences in the page:
If you created your own selector, it will also show you if it is correct or not.
If you want to build your own CSS selector, we recommend getting help from a front-end developer or reading some external documentation (developer.mozilla or W3School).
🎯 Choosing between the operators ID/Class/Custom
ID : You can paste your ID with or without ‘#’. In the latter case, it will be automatically taken into account.
Class : You can paste your Class with or without a dot(.). In the latter case, it will be automatically taken into account.
Custom selector : To write or paste your own custom selector according to all the syntax rules of CSS. Don’t forget to add # or a dot(.) before an ID (#) or a class (.) when using this option.
🤖 Using the "After page load option"
According to your AB Tasty tag implementation and page load time, it can happen that the element you are targeting is appearing after the tag execution. In this case, you will be excluded from the targeting conditions even if the element is present on the page…
If you notice this, you can select this option: a verification after tag’s execution will be added to prevent it.
Need additional information?
Submit your request at product.feedback@abtasty.com
Always happy to help!