How to Use Google AdSense Ads on your Responsive Websites – A Better Approach

Google AdSense has officially approved Responsive Design and what that means is you can serve Google ads of varying dimensions corresponding to the viewport size (screen resolution) of the visitor’s device.

For instance, if a visitor is reading your web page on desktop, you can choose to serve the large 728×60 (leaderboard) unit but if another visitor is viewing the same web page on a mobile phone, you can display the smaller 200×200 ad unit. The AdSense code detects the size of the visitor’s screen and serves the appropriate ad unit that will best fit the available space.

You can serve responsive Google AdSense ads in both synchronous as well as asynchronous (non-blocking) fashion. The latter is a more efficient and recommended method as the JavaScript ad code loads in parallel and therefore does not block the other elements of the web page from rendering. In other words, your pages will load faster improving user experience.

How to (not) Generate Responsive AdSense Ad Code

Open your AdSense dashboard and under My Ads, click “Create new ad unit.” Set Ad Size as “Responsive Ad Unit” and click the “Save and Get Code” button to generate the JavaScript code for your Responsive AdSense ad.

That’s easy but I wouldn’t recommend using the code since it uses CSS based media queries that may not always be the right approach to determine the available ad space on your web pages. Let me explain. If are planning to place a 300×250 ad unit in your website’s sidebar, the media queries would calculate the width of the visitor’s device whereas what you are interested in is the width of the sidebar and not the entire device.

I would like to share a better solution that doesn’t use media queries and works for both synchronous and the new non-synchronous AdSense tags. You can also use the same code for your DoubleClick Ad Exchange tags.

Responsive AdSense Ads (Asynchronous) – Demo

This is the recommended approach and you see it live on my other website – Podcast Gallery.

Go to your AdSense dashboard and either create a new ad unit or use one of your existing ad units. Make a note of the ID of your ad unit and also your AdSense Publisher ID and paste these values in Line #15 and #18.

<div id="google-ads-1"></div>
 
<script type="text/javascript"> 
 
    /* Calculate the width of available ad space */
    ad = document.getElementById('google-ads-1');
 
    if (ad.getBoundingClientRect().width) {
        adWidth = ad.getBoundingClientRect().width; // for modern browsers 
    } else {
        adWidth = ad.offsetWidth; // for old IE 
    }
 
    /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
    google_ad_client = "ca-pub-XXX";
 
    /* Replace 1234567890 with the AdSense Ad Slot ID */ 
    google_ad_slot = "1234567890";
  
    /* Do not change anything after this line */
    if ( adWidth >= 728 )
      google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
      google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
      google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
      google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
      google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
      google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
      google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
      google_ad_size = ["125", "125"]; /* Button (125 x 125) */
 
    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:' 
      + google_ad_size[0] + 'px;height:' 
      + google_ad_size[1] + 'px" data-ad-client="' 
      + google_ad_client + '" data-ad-slot="' 
      + google_ad_slot + '"></ins>'
    );
  
    (adsbygoogle = window.adsbygoogle || []).push({});
 
</script>
 
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

Next, copy-paste the above snippet anywhere on your web page and, based on the size of the user’s device, the most appropriate AdSense Ad will be served.

If you wish to include multiple responsive AdSense ad units on the same web page, just use the same snippet of code but increment the DIV ID in lines #1 & #6 such that they become google-ads-1, google-ads-2 and so on.

Responsive AdSense Ads (Synchronous) – Demo

<div id="google-ads-1"></div>
 
<script type="text/javascript"> 
 
    /* Calculate the width of available ad space */
    ad = document.getElementById('google-ads-1');
 
    if (ad.getBoundingClientRect().width) {
        adWidth = ad.getBoundingClientRect().width; // for modern browsers 
    } else {
        adWidth = ad.offsetWidth; // for old IE 
    }
 
    /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
    google_ad_client = "ca-pub-XXX";
 
    /* Replace 1234567890 with the AdSense Ad Slot ID */ 
    google_ad_slot = "1234567890";
  
    /* Do not change anything after this line */
    if ( adWidth >= 728 )
      google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
      google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
      google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
      google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
      google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
      google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
      google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
      google_ad_size = ["125", "125"]; /* Button (125 x 125) */
  
    google_ad_width = google_ad_size[0];
    google_ad_height=google_ad_size[1];
 
</script>
 
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

The approach for adding synchronous AdSense ads to your responsive website is exactly similar except that the underlying code is a little different. Change the values in line #15 & #18 and paste the snippet in your website.