The responsive ads offered by AdSense are the perfect answer to mobile web layouts. However, the automatic sizing is less than perfect. It sometimes displays sizes that don’t really fit or might not even find a fitting size at all. In this tutorial I am going to show you how you can set up an AdSense responsive ad choosing your own banner sizes for each browser width without coding.
At the end of this tutorial you won’t only know how to set up manual ad sizes, but I am also going to reveal a setup that performs well on most sites.
I started very early to move my sites to a responsive layout so it fits mobile devices and tablets with ease. Ads were always a problem here, because their size is often predefined. Therefore, I came up with the code for the Responsive Ads add-on even before my Advanced Ads plugin was born. Still I was happy when AdSense announced the responsive ads format, because I could manage just one ad tag instead of 2, 3, or 4 on the same spot.
3 problems with the responsive AdSense ad
Dispite the benefits, there are 3 issues with the so called “smart sizing” of the ad.
On some spots it was simply not possible for AdSense to get the right size. It was either too small or sometimes so big, that half of the ad was cut off. This was AdSense breaking its own terms-of-service.
The second disadvantage of the smart sizing was that the fitting size is not always the best performing size. It is true that a text ad can have almost any format, but the often better paying image and rich media banners are just bought for specific sizes.
The third problem I had when trying to optimize the ad was that the reports didn’t show the specific sizes. Maybe you didn’t know, but there is a difference between the ad size and the creative size. The ad size is a kind of a reserved place, the creative size is the one of the element displayed in this space. This can in fact be smaller than the ad space, or bigger, as it sometimes happened with the responsive ad unit.
The solution: manual ad sizes
To overcome all the problems with smart sizing and still be able to use AdSense responsive ads, one can define the sizes for each device width. The result will be:
- you know that the sizes fit (because you defined them)
- you can define the best performing ad sizes
- you can analyze the performance of each creative size in the AdSense reports
In the rest of this tutorial I am going to show you how to set up the responsive ads sizes manually without any need to code.
The screenshots in this tutorial are taken from the following WordPress and plugin versions. They might vary in later versions, but are still working.
1. Create an AdSense ad
First of all you need an AdSense ad. Follow the manual about the AdSense ad type in Advanced Ads to set it up. When you create the ad in AdSense, be sure to choose the “Responsive” ad format there as well.
2. Choose the “Responsive” Type
Once you added ad details into Advanced Ads, you should change the type of the AdSense ad from “Normal” to “Responsive“.
After you did that the “Resizing” setting should appear and you should select the “Advanced” option from it. If you left it on “Auto”, the smart sizing would be still active.
3. Define the sizes
After you selected the “Advanced” mode you should see a table like the following.
You should first select the default ad size in the first line. This will be the ad size displayed starting on the smalled devices.
Use the next line to add new sizes. Therefore, enter the minimal device or browser size into the first field, the width and height of the ad in the second and third field. E.g., if you want to display a Medium Rectangle (300x250px) as the default size and a Full Banner (468x60px) on devices bigger than 500px, your form should look like this:
Submit the form in order to save the values and be able to add more sizes.
A well performing default setup
For ads within the content – a generally good performing position – this is a good setup to start with:
|device width||ad width||ad height|
You need to check this in your frontend. Chances are that you site has a margin that is larger or smaller and therefore might squeeze the ad or if your sidebar is large, the Leaderboard might not match at 960px but only at 1020px or even not at all.
How to get the correct size?
To set up the correct responsive size you need to know the size of the target device browser and the size of the element the ad is inside. There are several tools and tutorials about this, here are just a few.
You don’t need to test on different devices. Simply make your normal desktop browser smaller.
- Chrome: you should see the window’s dimension while resizing it.
Update: the Responsive Ads add-on now comes with a frontend assistant that displays the size of the window and the container of the ad which makes it a lot easier to choose the fitting ad size.
To get the possible ad size, check the available size of the placement using tools like:
- MeasureIt Add-On for Firefox
- MeasureIt Add-On for Chrome
- Get computed size of an element in Chrome without an add-on
What else you need to know about responsive ads
Responsive Ads comes with 1 year of support, including help to correctly set up ads on responsive layouts.