HTML element
If your URL structure does not make it easy to target specific pages, you can target visitors based on whether an element exists on the page. You can also match the element's text to distinguish between elements that share the same selector.
If your website has unique IDs or stable class names, an HTML element condition is an easy way to target a specific type of page or page state.
Example
In the image above, we target all pages containing an element with the selector #addToCart (an element with the ID addToCart).
Match by element text
Use Text match type when the selector alone is not specific enough:
| Text match type | Behavior |
|---|---|
| Any text | Ignores the text and matches when any element found by the selector exists. This is the default. |
| No text | Matches when at least one selected element has no text. Whitespace by itself counts as no text. |
| Exact match | Matches when at least one selected element's complete text equals the Text value. |
| Contains | Matches when at least one selected element's text includes the Text value. |
| Regex match | Matches when at least one selected element's text satisfies the regular expression in Text value. |
Text from child elements is included, whitespace at the beginning and end is ignored, and Exact match and Contains are case-sensitive.
For example, if several elements use the selector .stock-status, choose Exact match and enter In stock to include only pages where at least one of those elements displays that exact text.
Lyftio monitors the page for matching elements and text changes, so the condition is reevaluated when elements load dynamically, are removed, or their text changes. For Exact match, Contains, and Regex match, you must enter a Text value. An invalid regular expression does not match any element.
Setting a condition without element IDs
If you do not have unique IDs, you can still create a specific selector using the element hierarchy.
...
<div class="col-6">
<div class="details">
<label for="quatity">Qty: </label>
<input type="number" name="quatity" placeholder="Quantity" value="1" />
<button>Add to cart</button>
</div>
</div>
...
For the structure above, you can use the selector .col-6 > .details > button. It matches a button that is a direct child of an element with the class details, which is itself a direct child of an element with the class col-6. You could additionally use Exact match with Add to cart if the same structure contains buttons with different text.
Always test your Audience in Preview before activating the experiment to make sure that it runs only on the intended pages.