Selector

Description:

The "Selector" filter allows for advanced targeting based on elements present on your website. This filter uses CSS Selectors to identify and target specific HTML elements, providing a highly customizable way to engage visitors based on the content or features they interact with on your site.

Selection:

The "Selector" filter involves three primary components:

1. CSS Selector Field:
   • Specify the CSS Selector that identifies the element(s) you wish to target.
2. Condition Selection:
   • 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: Numerical content of the element is greater than the specified value.
   • Is lower than: Numerical content of the element is less than the specified value.
3. Value Field:
   • Depending on the condition selected, input the value to compare against the targeted element's content.

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 element. Using the "Is not empty" condition, you can launch campaigns that encourage checkout or offer discounts to users who have items in their cart.
4. Form Engagement: Use the "Is empty" or "Is not empty" condition to evaluate form fields, offering real-time guidance or additional information to visitors as they fill out forms.

How to Use:

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

Notes:

• It's advisable to test the functionality thoroughly to ensure it behaves as expected before deploying in a live environment.