Google AdSense Reponsive Ad Units

Not too long ago Google AdSense (advertisements you see on most websites) created a new ad size called “Responsive”. This is a size a lot of developers wanted or really needed for a very long time. The role of this size is to use the space available and pick the best sized ad for that location. For example, if I create a div with the width of 300px, I can expect a 300x250 advertisement, 300x600 or a 160x600 (inside of the 300x600).

What’s the point of this? You would think using normal sizes would just make more sense. With fluid website designs, every person will see a slightly altered version of your website. Usually the content width will decrease then the sidebar will readjust, and eventually you have a single column site for mobile devices. With this fluid design, having fixed adsense sizes is impossible since you are not allowed to cover advertisements (unless user interaction specifies them to be covered / hidden).

When the fluid site adjusts, it will also adjust what size of advertisements Google will place onto the site. Google AdSense has two different sets of code you can use for the Responsive Ad Units. You either can have “Smart Sizing” or “Advanced”.

Smart Sizing

Smart Sizing will fill the space without having to make any modifications to your CSS or HTML (although you should make some changes). Smart Sizing resizes the advertisements based only on the width of it’s container and ignores the height for the most part. I tried this method to get a 300x250 ad consistently, but often times it will end up placing a 300x600 ad instead.

Only use smart sizing if you want Google to pick the ad sizes (which may end up with a higher CPC since they pick the ad size). If you are more focus on a consistent look for your site and ad sizes you will want to use Advanced sizing.

With Smart Sizing, since you don’t have to modify any CSS / HTML, you still should. I suggest you wrap your advertisements in a DIV or another element that will hold the width of the advertisement you want. You should already have this element on your site, but if you don’t, add it or else you may end up with a huge 970x90 on your site.

Using CSS Media Queries, you can have advertisements be different sizes on various devices / screen sizes. This is why having a container to your advertisement is also important.

Advanced Sizing

Advanced Sizing is similar to smart sizing, but it requires specific CSS Rules for the ad unit. The ad unit will fit that specific advertisement and nothing else. If you opt to omit the height and width rules, you most likely won’t have any advertisements loaded.

When you create your Responsive Ad Unit and get the code for “Advanced”, you will be presented with some CSS and the javascript. You can scrap the CSS because you will need to write your own for this ad to work properly with your site.

The ins tag in the AdSense code will have a class similar to adsbygoogle ad-unit-responsive. You will want to add a class in your CSS to style that specific element / class.

.ad-unit-responsive {
	width: 300px;
	height: 250px;
}

This isn’t the most effective way of doing this though, since all of those responsive ad units will be the same size. If you place your advertisement inside of a div with a class name similar to class="advertisement rectangle" and advertisement leaderboard you can use the same ad unit and have them different sizes.

.advertisement.rectangle .ad-unit-responsive {
	width: 300px;
	height: 250px;
}
.advertisement.leaderboard .ad-unit-responsive {
	width: 728px;
	height: 90px;
}

<div class="advertisement rectangle">
	<!-- AdSense Code Here -->
</div>

<div class="advertisement leaderboard">
	<!-- AdSense Code Here -->
</div>

Modifying the Code

You are allowed to modify the AdSense code to a certain degree. Because of this, you can easily make your AdSense code look a lot neater and not have the same javascript loading multiple times.

Below we have the Responsive Advanced ad unit (with some information that is invalid)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ad Unit Responsive -->
<ins class="adsbygoogle ad-unit-responsive"
	style="display:inline-block"
	data-ad-client="ca-pub-0123456789"
	data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

If you place this code multiple times in your site, you are telling your browser to load the adsbygoogle.js code multiple times, but usually browsers are smarter than this. Instead though, you can cut the first script tag and place it inside of your header and you then can remove it from all ads you add to the site. You may also remove the HTML Comment and format the HTML to be a single line. Make sure that you leave spaces between the attributes though. The preceding javascript for each advertisement needs to stay though.

<head>
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
	<ins class="adsbygoogle ad-unit-responsive" style="display:inline-block" data-ad-client="ca-pub-0123456789101112" data-ad-slot="121110987654"></ins>
	<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<body>