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, within your dashboard settings you have the ability to use CSS insertion 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_"), you will need to add an exclusion rule either to our Placeholder Service Config or the Ezoic dashboard.
• If the placeholder was generated from our Auto-Insert Ads, you will need to add an exclusion rule either to our Placeholder Service Config or the Ezoic dashboard.

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 Positions" menu, select the "Auto-insert Ads" tab, and then click "CREATE" in the CSS Filters section:

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.

We could also be more specific with our CSS selector. For example, we could filter out ordered lists that are a child of a div within an article:

More info on CSS selectors you can find here 

Once you have successfully created the CSS filter, save the changes and refresh the page.

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.

Adding the filter in the WordPress plug-in (for WordPress ads)

You can access the CSS filters for WordPress plug-ins, inside the Ezoic WordPress plug-in'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

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.