Adsense Responsive Ad Unit Integration With Responsive Web Design

Google introduced the Adsense responsive ad unit back in July 2013, which enabled publishers to display Adsense ads of varying sizes and custom dimensions depending the screen resolution of the device the visitor is using. It is similar to today’s modern responsive web design which dynamically changes the layout of the website depending on available width of the device screen.

For example, if a visitor is browsing your website from a desktop computer, you can serve a large ad unit like 728×90 (leaderboard) to him, but at the same time another visitor is browsing the same webpage from a mobile device, you can choose to serve a small 234×60 (half banner) ad unit in place of the leaderboard.

Adsense Responsive Ad Unit

The Adsense responsive ad unit code will automatically detect the available width and serve the appropriate ad unit that fits the space. The catch is, the automated detection will serve the ads from the default ad units. That means, you cannot display an ad that completely fits both width and height wise. There’s the advanced mode of Adsense responsive ad unit codes comes in.

How To Generate Adsense Responsive Ad Unit

The process of generating Adsense responsive ad unit is same as the normal ad units. Go to “My Ads > New ad unit“. Give the ad unit a name and choose “Responsive Ad Unit” from the Ad size dropdown menu. You can set a channel or style it just like the normal ad units.

Once done, click on “Save and get code” to generate the ad code. You’ll have the option to select the responsive mode on the popup containing the unit code. Select “Smart sizing” if you want to done everything automatically. Though Google recommends you to select the Smart sizing, but it has some flaws too, which I’ll tell you in a few moments. Select the “Advanced” mode and you can control almost everything on how the ad will be displayed.

Why not the “Smart sizing”?

Though smart sizing takes care of everything automatically, but if your websites relies heavily on JavaScript, there may be some conflicts as the smart sizing uses JS to determine the available space. For example; if you use JS to hide ads until the page is fully loaded, smart sizing won’t be able to check for the available space.

The Advanced Adsense Responsive Ad Unit

The advanced mode of Adsense responsive ad unit depends on the media queries and you can set both height and width for different resolutions. Adsense allows you to modify the ad code for this mode, so you can set any dimension you want.

Here is a sample responsive ad unit code generated using advanced mode.

<style>
.responsive { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive { width: 728px; height: 90px; } }
</style>

<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<!-- Responsive -->
 <ins
    class="adsbygoogle responsive"
    style="display: inline-block;"
    data-ad-client="ca-pub-12345"
    data-ad-slot="67890"></ins>
  <script type="text/javascript">// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>

The ad code above, by default, is responsive for two deferent screen resolutions. You can set dimensions for as many screen resolutions as you want. You can even completely remove the inline styles from the code and merge it to the existing css file for your website.

Here is the modified code I am currently using:

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

And, here goes the media queries from my blog’s stylesheet:

@media only screen and (max-device-width : 320px) {
.headerad {
	width: 234px;
	height: 60px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.headerad {
	width: 320px;
	height: 50px;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.headerad {
	width: 728px;
	height: 90px;
}
}

@media only screen and (min-width : 1224px) {
.headerad {
	width: 728px;
	height: 90px;
}
}

 Synchronous vs Asynchronous Code Type

The difference between synchronous and asynchronous code is the way the JavaScript loads. The synchronous script can block downloading other resources while it is being downloaded on your browser. The asynchronous script download parallel to other resources of your site making the page load a bit faster. So, whenever you have the option to use as asynchronous JavaScript, use that one.

Get Updates In Your Inbox

Get the WordPress Tips and latst Internet Marketing ideas delivered directly to your email inbox, plus access to our FREE Pro Blogging Model blogging guide.

You need to confirm your email once. Don't worry, we hate SPAMs as much as you do

Comments

  1. says

    Nice article. Do you know if you can place one single responsive ad ID set for smart sizing in multiple sections on the same webpage. Obviously not more than 3 to abide by the Google Adsense policy, but could you use the same ad slot 3 times on the same page as long as they render different sizes and not break the terms of service?

Speak Your Mind

Your email address will not be published. Required fields are marked *

You may use these HTML Tags and Attributes

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>