Today we will be talking about responsive Google ads. As we all know about Responsive design of Google ads, a responsive design helps us to view ads in various devices as per requirement. For example if you are using a tablet, you will be able to view the ad in a 200 X 200 Unit, whereas if you use your desktop to view the same web page, you will see the ad in a 728 X 60 Unit. Now we have official approval of Google for both asynchronous and synchronous as well. For faster loading experience asynchronous is preferred.
Contents
How to Make Google AdSense Ads Responsive
You need to go to your Google AdSense dashboard, you will have to create a new ad unit. You will find this option under “My ads” option. After which you need to set the ad size, please ensure you click on Responsive ad unit. Once you are done with the above steps save the ad and get the code for the specific ad. It is good to determine the exact ad space available.
The above generated code is not recommended for people with less knowledge of CSS, as these Codes are CSS media based codes and are not the proper way of determining the exact available space for an add and may also result in overlapping ads.
Well, here is the batter solution to make your adsense ads responsive for your responsive web design which cannot be done with CSS media queries. here i would like to share a javascript code of responsive adsense ad That should be work for both synchoronous and the new non-synchoronous adsense tags. it also can be used for your DoubleClick Ad Exchange tags.
Preview :
Responsive AdSense Ads (Asynchronous)
<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 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>
This should be the preferred method as it help a lot in managing all ads in a page, and provides proper information about available space for an ad code. The same method is being followed in many websites.
All you need to do at first is create a new ad or try with an existing one. Copy the ID of the ad unit and AdSense publisher ID. You need to replace “xxx” with your publisher id and “1234567890” with your ad unit ID.
Recommended for you:
Basic Tips To Increase Your Google AdSense Earnings
Next you will have to copy the entire text above and paste it in your webpage. Any user viewing your website will see an ad as per his device. Google is intelligent enough to server the best suited ad size.
Multiple ad can also be placed using the same code above. All you need to do is change the DIV ID, so that they become google-ads-2, google-ads-3 and so on.
Responsive AdSense Ads (Synchronous)
<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>
If you are planning to add synchronous AdSense ads with a responsive design, the procedure will be exactly the same. The difference is in the underlying code. You can copy the above text and paste it in your website, and don’t forget to replace publish ID and ad unit ID with yours.
Source : http://www.labnol.org/internet/google-adsense-responsive-design/25252/
