Selector filter
The Selector filter matches visitors based on the content of an element on the current page, found with a CSS selector. Use it to target pages by something your theme already shows, such as a product badge, a stock message, a price, a logged-in greeting or a hidden input.
Available on: all platforms.
How it's evaluated
The filter reads: Element with selector [CSS selector] [operator] [value].
- Personizely waits until the page's HTML has loaded.
- It finds the first element on the page that matches the selector.
- It reads the element's value:
- <meta> elements: the content attribute.
- <input> and <select> elements: the current value.
- Any other element: its text, including the text of child elements, with leading and trailing spaces removed.
- It compares that value with yours using the operator.
If no element matches the selector, or the selector isn't valid CSS, the value is empty.
Campaigns read the element once the HTML has loaded. Widgets with a Target rule read it again when their trigger fires, so they see changes made to the page in the meantime.
Options
Option | What it does | Values / default |
|---|---|---|
Element with selector | CSS selector of the element to read, for example #cart-count, .product__badge or meta[property="og:type"] | Required |
Operator | How to compare | is, is not, contains, does not contain, is empty, is not empty, is higher than, is lower than. Default contains |
Value | What to compare with | Text or number. Not needed for is empty and is not empty |
Behavior details
- Text comparisons are exact and case-sensitive. "Sale" doesn't match "SALE". There are no wildcards or regular expressions; use contains for partial matches.
- Check that an element exists with "is not empty". contains with an empty value matches every visitor, even when the element is missing.
- Number comparisons read the first number in the text. "$1,299.99" is read as 1299.99, "1.234,56 €" as 1234.56 and "Only 3 left" as 3. Thousand separators (comma, period, space or apostrophe) and up to two decimals are understood. Text without a number counts as 0.
- Only the first match counts. If several elements match, only the first in the page order is read. Make the selector specific enough.
- Elements added later by scripts. If your theme or an app inserts the element after the HTML has loaded, a campaign may not see it. Widgets re-check when their trigger fires, so they're less affected. Prefer elements present in the page's HTML.
- Hidden elements count. The element doesn't need to be visible; a hidden input or <meta> tag works.
- For page targeting, use page rules. To match URLs, use the campaign's page targeting or the widget Pages rule. They are simpler and checked earlier.
Examples
- Low-stock nudge: "Element with selector .inventory-status contains Only" as the Target rule of a callout saying "Selling fast".
- Product type pages: "Element with selector meta[property="product:category"] is Shoes" to show a size-guide popup on shoe pages.
- High-priced products: "Element with selector .price__regular .price-item is higher than 200" to test a financing message on expensive products.