Targeting

Selector

3min

The selector filter allows targeting based on elements present on your website pages. This filter uses CSS Selectors to identify and target specific HTML elements, providing a highly customizable way to engage visitors based on the content on your site.

Options

  1. CSS selector - the CSS Selector that identifies the element(s) you wish to target.
  2. Condition:
    • Contains - Element's content includes the specified value.
    • Is - Element's content exactly matches the specified value.
    • Is Not - Element's content does not match the specified value.
    • Does not contain - Element's content does not include the specified value.
    • Is empty - Element is empty or void of content.
    • Is not empty - Element contains some form of content.
    • Is higher than - The numerical content of the element is greater than the specified value.
    • Is lower than - The numerical content of the element is less than the specified value.
  3. Value - the value to compare against the targeted element's content.

For <meta> elements, the content attribute is parsed. For <input> and <select> elements, the value is parsed, and for all other elements, the text content is parsed.

Use Cases

  1. Dynamic content changes - Use the "Contains" condition to target elements that include specific text, and personalize content accordingly.
  2. User preference adaptation - If your site has options to "like" or "save" items, you could use the "Is not empty" condition to identify users who have interacted with these features and show them personalized recommendations.
  3. Cart engagement - For users with an eCommerce platform, you might use selectors to target the cart counter element. Using the "Is higher than" condition, you can launch campaigns that encourage checkout or offer discounts to users who have items in their cart.

How to Use

  1. Go to the 'Targets' section within the Personizely dashboard.
  2. Click "Create target" and name it.
  3. Choose 'Add Filter' and select 'Selector'.
  4. Input the CSS Selector in the corresponding field.
  5. Choose the condition that aligns with your targeting goals.
  6. Based on the condition selected, input the value to compare against the selected HTML element.
  7. Confirm and save your filter settings. You can now use this target in your widgets.



Updated 25 Mar 2024
Doc contributor
Doc contributor
Did this page help you?