Please note that to use this exclusion filters effectively, it is recommended that you have a good understanding of CSS selectors. Using overly broad CSS filters may inadvertently block all AI placeholders on the page.
The steps to follow will depend on the type of automatically generated placeholder that you are seeing.
- If the placeholder was generated from WordPress (the placeholder name is prefixed with "wp_"), you will need to add an exclusion rule to the WordPress dashboard.
- If the placeholder was generated from our Placement Service (the placeholder name is prefixed with "gen_") or our Auto-Insert Ads (the placeholder name is prefixed with "AI_Placeholder", you will need to add an exclusion rule either via either the Ezoic Dashboard or Ezoic Chrome Extension.
1. Locate the unwanted ad:
Identify the ad that you wish to remove.
As an example, let's use this placeholder that appears inside an ordered list element. The ad may look unappealing so we will try and create a CSS filter to prevent it:
2. Inspect the HTML:
Right-click on the ad element and select the "Inspect" option.
This will open the Developer Tools panel with the element highlighted in the HTML code.
In the example, we can see the placeholder is inserted inside of an ol (Ordered List) element:
3. Determine a CSS selector:
Examine the HTML code to determine an appropriate CSS selector for filtering. More information on CSS selectors can be found here.
When you hover over the HTML elements in Developer Tools, the element will be highlighted on the page, which helps to see exactly which element is selected.
In our example, the "ol" element is highlighted in blue:
4. Add the filter in the Ezoic Dashboard:
Navigate to EzoicAds > Ad Configuration > Exclusion Filters, then click the green plus + button to add a new exclusion filter.
Select Class, ID, or Element under Exclusion Filters. Then enter the relevant class, ID, or element. You can also choose whether you'd like the filter to apply to all form factors (desktop, mobile, tablet) or just to desktop.
5. Add the filter in the Placement Service Config (for Auto-Insert and Placement Service placeholders):
Activate the Google Chrome extension on your site. Select Placement Service Config.
Click the plus + button next to Exclusion Filters to add a new CSS filter.
Choose to either "Select Page Element" or add a "Create Exclusion Rule" manually.
For "Select Page Element," hover over the region on the live page that you wish to exclude from showing ads to highlight it, then click on it, and the exclusion rule will automatically be added.
For "Manual," enter the CSS rule determined earlier.
Save your changes before closing the Config.
6. Add the filter in the WordPress plugin (for WordPress plugin placeholders):
Access the CSS filters for WordPress placeholders inside the Ezoic WordPress plugin's Ad Settings.
Select the Settings cog.
Choose + Add New Filter to insert a new CSS filter for WordPress placeholders.
7. Verify your filter worked:
Ensure that the CSS filter effectively removes the targeted placeholders without removing other placeholders that you wanted on the page. If you no longer see the problematic placeholder, but still see others on the page, you have successfully implemented the filter.
Note that it can sometimes take up to 30 minutes for these changes to take effect.