Use Google AdSense Ads Responsive Banner in Responsive Website

Manas Singh 16th Oct 2020

Now as we know the number of mobile devices increasing rapidly so the use of the internet moves on mobile devices and so we are moving our website in a 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 users can view our ads as per their device-width in a responsive format.

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

Suppose, a visitor viewing one of our web pages on a desktop then google AdSense will serve a rectangular Leaderboard size banner of 728X90 sizes. At the same time, another user viewing the same page on a mobile device so google AdSense will serve a small ad unit of 468X60 sizes. These responsive ad units can easily be integrated 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 are given below to generate a responsive Ad banner from Google AdSense banner.

1. Open Your Google Adsense Account

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

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

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

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

<script async src="//"></script>
<!-- responsive ads -->
<ins class="adsbygoogle"
(adsbygoogle = window.adsbygoogle || []).push({});
<!-- End: Google Ads-->

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

Create Google AdSense With a fixed size

Do you want to get the 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 sizes for different screens.

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) */
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 async src="">

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 locations of your website.

Authored By Manas Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk