Is there a way to hide unfilled ad spaces using Google AdSense ad units without modifying the AdSense code? Are unfilled ad spaces ruining your website design? It is well known that modifying AdSense code can easily get your website banned and can stop an excellent source of advertising income for your website or blog.
However AdSense does allow certain ad code modifications to integrate the AdSense ads better with your website which can lead to a better user experience.
Why Unfilled Adsense Ad Spaces?
The first question which should come to your mind if you are getting a lot of unfilled ad spaces is why Adsense was not able to display contextual ads with a high degree of ad targeting? Previously they used to call it public service ads and there were several reasons why webmasters got public service ads.
The best Adsense advice is to avoid unfilled ad spaces and get targeted advertisements on your website – add relevant content in a sufficient quantity with targeted keywords so that the Adsense algorithm clearly understands what the page is about, which will help it target your advertising effectively. Good targetted content will also help in better SEO and more site traffic as well.
Collapse Blank Ad Units
Many times AdSense will automatically collapse that unit if no ads are available, however often it will show a blank space and will give rise to a very bad design experience for your website. Previously AdSense provided a way to collapse unfilled ads or use alternate ads which could continue to generate income in case AdSense did not have targeted ad inventory for your website or some particular web pages.
Hide Unfilled Adsense Ad Spaces: The Allowed Way
It is great news that AdSense has provided more information that allows AdSense publishers to hide the unfilled spaces using CSS such that unfilled spaces are no longer visible to your site visitors.
The secret lies in the code data-ad-status which is outputted depending on whether AdSense has the ad space.
If ad space is unfilled, the code will output
data-ad-status="filled"
It’s a simple one-line code that webmasters can add to the HEAD section of their website which basically targets this particular element and will hide it if ads are displayed.
<style>
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}
</style>If you want to insert into your pre-existent external CSS file, you do not need to add the style tags, just use the class only.
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}Show Alternate Ads: Retain Ad Income
They also provide a mechanism to officially alter the ad code to serve alternate advertisements safely in case they do not have an inventory. It’s a good idea to implement displaying alternate ads as it will help to optimize your ad space and continue to generate income even if AdSense ads are not displayed.
First, you have to edit the CSS to disable the AdSense link and continue to show the ad space (and not collapse or not display as before).
ins.adsbygoogle a {
display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
display: block;
}Along with this, you will need to add an image source with the specified height and width so it can effectively fill the ad space, just before the ins closing tags.
... Rest of Adsense Code ...
<a href="/page"><img src="/backup.jpg" width="300px" height="250px" /></a>
</ins>
... Rest of Adsense Code ...
Ad unit of 300×250 rectangle size is useful as it will display well in responsive websites on desktop as well as mobile views. This also takes care of the dynamic ads with which Adsense tries to fill the available ad spaces.
So what are you waiting for, get rid of those blank ad spaces and reclaim your site design control easily.