OptinMonster makes it easy to hide or show campaigns based on an HTML element in the page the campaign is loading on.
In this article, you’ll learn how to use OptinMonster’s Display Rules to hide or show a campaign based on an HTML element.
Before You Start
Here are some things to know before you begin:
- HTML Element targeting requires a Growth subscription.
- HTML Element targeting can be used with any campaign type.
- This rule can only target an element that already exists on your web site.
Configure HTML Element Rule
When you create a campaign in OptinMonster you can configure it to be shown or hidden based on an HTML element in the page.
To configure the HTML element rule, follow these steps:
- Navigate to the Display Rules tab in the campaign builder.
- Begin editing your rules and when adding a new rule search for and choose HTML Element Targeting.
- Next, you’ll have the following match options available:
- matches selector
- does not match selector
- is visible and matches selector
- When you’re finished, click Save.
The following examples are to help you get started:
Exactly Matches Selector
If you wanted to check for an HTML element with an ID of
testHTMLelementID, you would enter
#testHTMLelementID as the value, like shown below.
Does Not Exactly Match Selector
If you wanted to only show the campaign when a certain element does NOT exist on the page, you can use the does not match selector operator. Since the value of the input can be any valid query selector, you can be quite creative with this rule.
In this example, we’ll only show the campaign when a certain HTML element does not exist on the page. Using the does not match operator, we’ll check if an element with the ID of
testID that is a child of any element with a class name of
className exists on the page.
If any elements matching this query are found on the page, the campaign will not display.
Can I learn more about how this Display Rule works?
You can enter a key (matches selector or does not match selector) to search for in the page source.
OptinMonster then uses document.querySelector to search for whatever string you’ve entered in the Display Rule. If that string is or is not found, depending on the selected operator, the campaign will show.
How does the “is visible and matches selector” operator work?
When using this rule it will check your query selector then determine if the targeted element exists.
If the element exists, it will then determine if the element is visible to the visitor.
If the element is hidden, or the visitor hasn’t scrolled down enough to see it yet, the campaign will not display.
Once the visitor has scrolled to the targeted element, or the targeted element otherwise becomes visible in the visitor’s viewport, the campaign will display.