How to fix the AdSense auto-resizing error and blank ads
AdSense now started to only offer publishers the smart sizing ad tag which are, as far as my tests show, less than perfect. One huge issue is ad space that is staying blank or an error thrown (mostly invisible) in your browser console. In this post I am going to show you three approaches on how to fix this.
What you are going to learn:- What causes blank space for responsive ads
- A fix using exact sizes with coding skills
- A fix for WordPress without coding skills
- A fix with a container and css
AdSense responsive staying blank
The responsive ads are great to monetize mobile websites with responsive layouts, so you definitely don’t want to ignore them. However, a common problem you can have with auto-sized AdSense responsive ads is that they don’t show up. Of course, like with all new AdSense ad tags, you first must wait some time after creating them, but if you don’t see ads appearing after a few hours, you might have this problem.
In case of responsive ads, “not showing up” doesn’t mean that you see a blank space, but you won’t see anything at all, because the space collapsed. This is mainly caused by AdSense not being able to detect the available space for the ad.
Cannot find a responsive size for a container…
If you are familiar with the JavaScript console in your browser, you can find the following error message there.
This message tells you that your smart sized (“data-ad-format=auto”) responsive ad (“responsive size“) wasn’t able to detect the available space (“width=0px“);
Give it some space
The solution sounds simple at first. In order for AdSense to detect the available space for the ad, you need to define it somehow. I know, this is not perfect, because you probably choose this ad type in order to not bother with the space, but unfortunately, you must define it at least a bit.
These are the 3 approaches I am using to do that.
1. Define the ad sizes manually (coding skills needed)
If you are familiar with CSS3 media queries, you can set the exact ad size per browser size. This way is almost guaranteed to work, but a bit complicated not just for those with coding skills, because you also need to check the browser width to see when the ad fits.
This is the sample code from the AdSense manual that allows you to do this.
The <style> part of the code contains the media queries with the minimal browser size and the creative size. My pro tip is to use default ad sizes and not just any measures here.
The <ins> tag is very similar to the smart sizing ad tag, but with the difference that the data-ad-format="auto" attribute was removed.
2. Define the ad sizes without coding (with a WordPress plugin)
If I am on a WordPress environment and want my clients to be able to adjust sizes later without messing up my css code by accident, I am using my Advanced Ads plugin together with the responsive ads add-on.
Advanced Ads already has a dedicated AdSense support with the smart sizing tag included, but the responsive add-on takes it a step further and offers an interface to set the sizes of the ads and the minimal browser width with an easy interface that looks like this.
Using the form is not only bullet proof for coding errors like missing spaces, it also provides a nice list with the sizes that everyone can read. It even lets you disable ads for specific sizes.
If you want to learn more, check out my very detailed tutorial on how to set up the sizes for responsive AdSense ads and learn about my default setup that provides good results on most responsive layouts.
3. Define the container
If you are not able or willing to set the ad sizes manually, you can try to make the container width stable so AdSense can detect a width. This is not going to work if there is only collapsed space and no real container, like with most ads injected into the post content. For places like a sidebar widget or the header, chances are that they already come with blank space that doesn’t get used, but has a fixed height and a width. Even if the latter is set automatically, with the right settings in css, this can work.
First, check the space where you want to inject the ad for an existing container. If there is one that has a width and height above 0, you should be able to use it with the smart sizing responsive ad.
If there is no such container, you have to create one with the following css styles:
display: block;width: 100%; /* auto might work as well */height: 100px; /* auto might work, but a fixed height is often better */
This method highly depends on the css your theme is using. It is not my favourite method, because I don’t believe in any custom ad format and prefer the standard sizes, but if the first two methods don’t apply to you, this might be your last chance to fix the smart sizing in AdSense.
Conclusion
I presented 3 solutions that can be accomplished with or without coding, with WordPress or other CMS. Was this able to fix your problem or did you find another solution. Please let me know in the comments.
No comments: