Google’s Adsense came out with a responsive ad fairly recently. It’s a neat idea where ads respond to the space they are given. This allows Adsense to create responsive ads that fit onto the device screen of the user. It also allows website owners to hide ads at times. The problem is, the responsive ads do not always display.
I tried to add a responsive ad to the sidebar of the Hueman theme in WordPress. This would allow the ad to appear when on a larger screen, but the ad would not display when the sidebar was hidden on smaller screens. The problem is, the ads worked fine in Google Chrome, but in Firefox they would always how up as blank.
I noticed that in the developer console I would get the error
TagError: adsbygoogle.push() error: No slot size for available Width=0
Add Width to Parent
The problem here is that the Adsense code sees that the containing HTML element does not have a width. The easiest way to solve this is to provide a width for the containing element. For example, place the Adsense code into a <div> container and set the width of the div using CSS. You can change the width of the CSS container using media queries depending on how large the device screen the user is using.
Doing this will create a responsive ad and should provide a width to the Adsense code. However, it did not work for me. Though I created parent div’s with a set width, the ads would still not load.
Alter The Adsense Code
My second step was to attempt to alter the Adsense code itself. I was a bit worried about trying this out, as Google is strict about placement and alterations of their code. They are mainly worried about fake clicks though, and I saw examples of other people doing this with the responsive ads so I figured it was worth a shot.
Basically, I created a CSS style guide for the Adsense code using media queries. This is actually similar to the first method I tried.
I changed the code to look something like this:
<style type="text/css">
.adBlock { width: 300px; height: 100px; }
@media (min-width:500px) { .adBlock { width: 468px; height: 60px; } }
@media (min-width:800px) { .adBlock { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adBlock"
style="display:inline-block;"
data-ad-client="XXXX"
data-ad-slot="XXXX"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Note that you must remove the
data-ad-format="auto"
line from the original Adsense code.
Now this worked, but I still was not completely happy. I did not like the fact that I had to change the Adsense code, and I was not happy that rather than allowing Google to create the ad size, I did it manually.
Make Sure The Page Has Fully Loaded
One other possibility was that the Adsense code was not receiving the width of the parent element in my HTML was because the Adsense code is loaded asynchronously. This means that the Adsense JavaScript could load before the HTML and CSS were fully loaded. The solution for this case is to make sure that the Adsense script waits until the document is otherwise fully loaded. Using jQuery, this is done like this:
$(document).ready(function () {
(adsbygoogle = window.adsbygoogle || []).push({});
});
This waits for the full page to load before creating the Adsense ads.
Turn Off Adblocker
Now, the funny thing is, I did not need to do any of the above. In the end, my problem and solution had to do with Firefox’s adblocker add-on. I had it disabled for my site specifically, but enabled for all other sites. For some reason this prevented the responsive ads from loading.
As soon as I disabled the adblocker for all sites then the ads began to work as intended without needing any change or alteration to either my WordPress site or to the Adsense code. Go figure.
Be sure to read up on Google’s terms and services before making any changes to your Adsense code/placement.
