The responsive ads offered by AdSense are the perfect answer to mobile web layouts. However, automatic sizing is less than ideal. It sometimes displays sizes that don’t really fit or might not even find a fitting size at all and stay blank. In this tutorial, I will 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 will also reveal a setup that performs well on most sites.
Table of Contents
The settings described here are implemented with our Responsive Ads add-on.
4 problems with the responsive AdSense ad
Despite the benefits, there are 4 issues with the so-called “smart sizing” of responsive AdSense ads.
- 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.
- Finding the correct size can fail at all, and the ad can stay blank. This could happen when the element the ad is in has no specific size, or the ad itself should float within the text.
- The smart sizing’s second disadvantage was that the fitting size is not always the best performing size. A text ad can indeed have almost any format, but the often better-paying image and rich media banners are just bought for specific sizes.
- Another 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:
- the ads won’t stay blank
- the ad’s sizes fit (because you defined them)
- you can specify 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 will show you how to manually set up the responsive ad sizes without any need to code.
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 AdSense “Responsive” Type
If you create the AdSense ad manually, then choose the Responsive ad type as well.
When you have installed and activated our Responsive Ads add-on and imported a responsive ad from your AdSense account, you should see the Resizing option. Switch it to advanced.
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 smaller devices.
Use the next line to add new sizes. Therefore, enter the minimal device or browser size into the first field, the ad’s width, and height in the second and the 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 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 window’s size and the ad’s container, making 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