In certain situations, auto-generated placeholders may appear in unwanted areas due to various reasons such as the hybrid nature of a layout, theme changes/updates, etc.

In order to overcome such issues, you have the ability to use exclusion filters for resolving such issues. Please note that to use this feature 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 Placeholder 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.

The steps that you can follow in order to resolve this are the following:

Choosing Your Filter

1. Locate the unwanted ad

Let's assume that the following ad that appears inside an ordered list element. The ad may look unappealing so we will try and create a CSS filter to avoid it:

2. Inspect the HTML

To determine a fitting CSS selector for filtering, we must examine the HTML code. This can be done by right-clicking on either the list or the ad element and selecting the "Inspect" option.

This should bring up the Developer tools panel with the element highlighted in the HTML. In our case, we can see the ad is inserted inside of an ol (Ordered List) element:

Tip: When you hover over an HTML element in Developer Tools, the element will be highlighted on the page. This helps you see exactly which element you're selecting. For example, the "ol" element is highlighted below in the blue area:

Applying Your Filter

Adding the filter in the Ezoic Dashboard (for Auto-Insert Ads and Placeholder Service):

Navigate to the "EzoicAds" >> "Ad Configuration" menu, then select 'Class', 'ID', or 'Element' under "Exclusion Filters", and enter the relevant class, ID, or element:

There are several ways to identify an HTML element on a webpage through the use of CSS selectors. In our example, a simple "ol" would work to filter out all ordered lists on the page.

More info on CSS selectors can be found here 

Adding the filter in the Placeholder Service Config (for Auto-Insert Ads and Placeholder Service):

You can access the Placeholder Service Config by activating the Google Chrome extension on your site and selecting "Placeholder Service Config":

You can then select the "+" next to "Exclusion Filters" to add a new CSS filter:

From here, you can choose to either "Select Parent" or to add a "Manual" filter. If you select "Manual", you will prompted to enter the CSS rule that was devised above.

"Select Parent" gives you the option to highlight a region on the live page, that will be excluded from showing ads. Make sure to 'Save' your changes before closing the Config!

Adding the filter in the WordPress plugin (for placeholders created via the WordPress plugin only):

You can access the CSS filters for WordPress placeholders inside the Ezoic WordPress plugin's 'Ad Settings' by selecting the 'Settings' cog:

You can then choose "Add New Filter" to insert a new CSS filter for WordPress placeholders:

Verifying your filter worked

If the filter was implemented correctly, the AI Placeholders will no longer appear in the undesired location. This indicates that the CSS filter has effectively filtered out the targeted elements:

Please note that it can sometimes take up to 30 minutes for these changes to take effect.