Use Google AdSense Ads Responsive Banner in Responsive Website

Now as we know that number of mobile device increasing rapidly so the use of internet moves on mobile device and so we are moving our website in Responsive layout which is compatible with all mobile devices as well as desktop. So when we move our website in responsive design we also think to move our Ads banner into responsive. So that all user can view our ads as per their device width in responsive format.

Finally, Google AdSense announces responsive Ad Banner in Mid of 2013. These Ad banner can easily be integrate with our responsive layout. It means that google Ad banner dimension varying according to visitor's viewport size or screen resolution of devices.

Suppose, a visitor viewing one of our web page in desktop then google AdSense will serve a rectangular Leaderboard size banner of 728X90 sizes. At the same time another user viewing same page in mobile device so google AdSense will serve small ad unit of 468X60 sizes. These responsive ad unit can be easily be integrate with our website without blocking our website code because it serves from Javascript. So it does not affect our website speed.

Generate Google AdSense Ads Responsive Banner

The steps given below to generate responsive Ad banner from google AdSense banner.

1. Open Your Google Adsense Account

2. Click “My ads” menu from top of the dashboard

3. Now click “New Ad Unit” button to create new ad unit.

The below image is a screen where we can create a new responsive ad unit. Here you can see first option from Ad Size is responsive and it is recommended by Google AdSense.


4. Now click “Save and get code” button to generate Responsive Ad code in JavaScript format.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="xxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- End: Google Ads-->

In this code its written that 'data-ad-format="auto"' it means that the banner dimension will resize according to visitor's screen viewport size. Here if you change data-ad-format="auto" to data-ad-format="rectangle" then banner will always serve in rectangle format or skyscraper format.
In responsive Ad, Google AdSense will decide which size of banner should serve. Suppose we call to show a rectangular Ad Unit but we may get either medium ad banner or large banner. So it not necessarily that we will get desired Ad size.

Create Google AdSense With fixed size

Do you want to get exact size which you want?

Calculate Responsive width from our Responsive Width calculator

It is possible to fix Ad size in your desired size by forcing to fix ad size. The size of this ad unit is depending on your screen resolution. Here we can use Responsive Media Query to set different size for different screen.

The customized code is given below:

<div id="googleDisplayAds"></div>
 
<script type="text/javascript"> 
 
    /* ===========Calculate the width of available space============= */
    ad = document.getElementById('googleDisplayAds');
 
    if (ad.getBoundingClientRect().width) {
        setForAdWidth = ad.getBoundingClientRect().width;
    } else {
        setForAdWidth = ad.offsetWidth; 
    }
 
    /* =====Replace your AdSense Publisher ID with ca-pub-xxxxxxxx =======*/ 
    google_publisher_id = "ca-pub-xxxxxxxx";
 
    /* ======Replace AdSense Ad Slot ID with xxxxxxxxxxxx  =========*/ 
    google_ad_slot_id = "xxxxxxxxxxxx";
  
    /* Please Do not change Below code. This is set as per screen resolution.
	Set by Responsive Media Query	*/
    if ( setForAdWidth >= 728 )
      ad_banner_size = ["728", "90"];  /* Leaderboard 728x90 */
    else if ( setForAdWidth >= 468 )
      ad_banner_size = ["468", "60"];  /* Banner (468 x 60) */
    else if ( setForAdWidth >= 336 )
      ad_banner_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( setForAdWidth >= 300 )
      ad_banner_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( setForAdWidth >= 250 )
      ad_banner_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( setForAdWidth >= 200 )
      ad_banner_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( setForAdWidth >= 180 )
      ad_banner_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
      ad_banner_size = ["125", "125"]; /* Button (125 x 125) */
 
    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:' 
      + ad_banner_size[0] + 'px;height:' 
      + ad_banner_size[1] + 'px" data-ad-client="' 
      + google_publisher_id + '" data-ad-slot="' 
      + google_ad_slot_id + '"></ins>'
    );
  
    (adsbygoogle = window.adsbygoogle || []).push({});
 
</script>
 
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>


Now just replace AdSense Publisher ID and AdSense Ad Slot ID with your detail and use this code to display google AdSense on your website. You can use this code to display google Ad unit in different location of your website. 

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments