How to use the responsive Google Adsense ad unit
What are responsive ads?
Responsive Adsense ads show a different size ad depending on what the visitor is looking at your webpage with. So if a visitor comes to your website on an iphone it shows a little ad, if a visitor is seeing your page on a tablet, they see a medium sized ad and so on. Responsive ads are only for webpages or blogs that have a responsive design or theme.
If you have a responsive design or WordPress theme and you haven’t added the Google Adsense responsive ad code, this article is for you. Responsive ads load quicker, are likely to make you more money and help your blog or website look better on any device. Let’s get started.
The new Adsense code
Google has a new Adsense ad option which allows publishers like you to have responsive ads on their websites. This new way of displaying ads is faster and better for web performance because it only uses asynchronous code which means it will load much better without blocking other things from loading on your page.
The ads on this page are responsive
To see the ad above change sizes you can change the size of your browser window and refresh the page. When you refresh the page you will see the ad is a new size automatically. You have to refresh the page because Adsense ads are created on the page load event – your users will see the right size ad on whatever they are using when they visit the page. This is what we want so our ads don’t look crazy when someone uses our webpage or blog on a tablet or smartphone. I will step you through how to do this below. For our example (the ads on this page) we will make Adsense ads be 728×90 on desktops, 486×60 on tablets, and 234×60 on phones.
To make responsive ads work on your web pages requires three steps (and all three are new to this type of ad unit).
- Create the ad code
- Configure the code (tell it what sizes we want)
- Place the code parts into the right places
1. First we need to create the ad
Go to Adsense and Choose “My ads” from the top menu. Enter a name for your ad then go to “Ad size”…
Click on the dropdown menu so you can choose an ad size. Scroll down until you see “Responsive ad unit – BETA” …
Once you have chosen the responsive ad unit there will display a warning saying “This ad unit is only for sites built with responsive design.” Now continue creating an ad like you would normally do. When you are ready choose “Save and get ad code” at the bottom. When you do this a screen will pop up with your code. Copy the code and paste it into a text editor or wherever you edit text (we will have to configure the ad sizes before adding it to our pages).
2. Configure the ad code (choose ad sizes)
This is a new step for Adsense users. Remember when you created your ad that you did not choose a size, you chose “responsive ad unit”, so how does Google know what size ad to display?
You have to tell it.
This is where we start having to think and plan a little. The size that your ads display on each type of device is entirely up to you, but there is very little guidance for this so we will look at it in detail.
First off, the ad sizes you choose must match the normal ad sizes available in Adsense. You should not make up new ad sizes.
For our example ads (the ads on this page) we are choosing to make the ads 728×90, tablets will have 486×60, and phones will see 234×60. To know what you sizes you want (and how to choose) we should take a very brief look at how responsive design and themes work.
How responsive design works
Responsive websites display differently at different sizes, we know this. How it does that is the bit we may not know. Responsive design is based on CSS. In particular it works with media queries. This is where you browser determines how large the screen a visitor is using. On a phone, it might be 300 pixel wide, or on a desktop is might be 1200 pixels wide. The browser knows how wide it is. Since a browser knows this we can add CSS to our webpages that says “If a screen is less wide than 500 pixels (likely a smartphone), use this style. If a screen is between 500 and 800 pixels (likely a tablet), use this other style.
The responsive Google Adsense unit includes this CSS with its code…
.your-ad-name { width: 728px; height: 90px; }
@media(min-width: 500px) { .your-ad-name { width: 234px; height: 60px; } }
@media(min-width: 800px) { .your-ad-name { width: 468px; height: 60px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– ad-name –>
<ins class=”adsbygoogle your-custom-channel”
style=”display:inline-block”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxx”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The style part
The part between the style tags (<style></style>) is the part we are talking about.
.your-ad-name { width: 728px; height: 90px; }
@media(min-width: 500px) { .your-ad-name { width: 234px; height: 60px; } }
@media(min-width: 800px) { .your-ad-name { width: 468px; height: 60px; } }
</style>
The above code is the default code given to us by adsense. Let’s see what each part is saying in human terms.
This first line is saying “When the user is seeing this on a desktop use the ad size of 728×90?…
The second line is saying “When users are seeing this on a phone use the ad size of 234×60?…
The third line is saying “When users are seeing this on a tablet use the ad size of 468×60?…
For our example ads on this page we do not change a thing from the default code that Google provides, however depending on your skill and familiarity with responsive design you can change these values. (this is the “thinking and planning” part I mentioned earlier).
If you are using 336×280 (large rectangle ads), you may want a tablet to show 300×250, and the phone 234×60.
If you are using different ad sizes or orientations, you just need to envision three things. What size do I want the ad to be for a desktop, what size for a tablet, and what size for a phone.
But for now let’s just continue by adding our ad code to our pages…
3. Add your ad code to your blog / website
This part is new for most people and different than adding other Adsense units you have added in the past. It can be a little intimidating but we will walk you through it. Let’s look at the code we were given…
.your-ad-name { width: 728px; height: 90px; }
@media(min-width: 500px) { .your-ad-name { width: 234px; height: 60px; } }
@media(min-width: 800px) { .your-ad-name { width: 468px; height: 60px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– ad-name –>
<ins class=”adsbygoogle your-custom-channel”
style=”display:inline-block”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxx”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
If you copy and paste this code where you want the ad to show on your webpage…. It may or may not work. This is because of the CSS code.
You can make sure they always work (and show up faster) by using the method below.
Placing the CSS code of the ad where it should be
Remember, the Adsense code has two separate parts the style (CSS) part and the ad code (script) part.
For our responsive ads to work properly and fast we will need to take the style part and place that in the head of our document to keep things working right. We will look closer at the style part now…
The style part
.your-ad-name { width: 728px; height: 90px; }
@media(min-width: 500px) { .your-ad-name { width: 234px; height: 60px; } }
@media(min-width: 800px) { .your-ad-name { width: 468px; height: 60px; } }
</style>
The part between the style tags (<style></style>) is the part we ad the head section of our html (specific instructions for WordPress blogs is below, but keep reading so you understand why we have to do this).
Where to place the style part
We must now copy the style part and add it to the head section of our HTML (the top part). The head section is where your webpage title and description are. A typical head section might look like this…
<html>
<head>
<meta name=viewport content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″/>
<meta name=description content=”A webpage description.”/>
<title>A webpage title</title>
</head>
This is really as simple as copy and pasting the style part with the style tags (<style></style>) included into the head section (again for WordPress users, we will show you how to do this below…). Here is what it will look like after we add the style part to the head section….
<html>
<head>
<meta name=viewport content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″/>
<meta name=description content=”A webpage description.”/>
<title>A webpage title</title><style>
.your-ad-name { width: 728px; height: 90px; }
@media(min-width: 500px) { .your-ad-name { width: 234px; height: 60px; } }
@media(min-width: 800px) { .your-ad-name { width: 468px; height: 60px; } }
</style></head>
Once you have done that you are ready to go the easy part and finish the whole process…
Adding the ad code (script part)
This part is easy and just the same as when you ad any other Adsense code unit so we all are familiar with it.
The ad code (script part) is what is left after you removed the style part in the above step/ It looks like this…
<!– ad-name –>
<ins class=”adsbygoogle your-custom-channel”
style=”display:inline-block”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxx”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
We add the code where we want the ad to display on our pages. This final step is the same as we use for all the other Adsense units we have added to our pages in the past.
How to add the CSS to a WordPress blog
Hi WordPress users, to add the style part to the head of your WordPress blog just go to you admin panel and choose “Appearance” then “Editor”.
When in the editor choose “header.php from the list on the right hand side of your page. This will display the contents of your head in the editor, you then add the style part (with the style tags) right after the “<head>” part.
