Approved Method to Make Your AdSense Code Responsive

Before some time Adsense won’t allow users to edit the ad codes. But now after updating their new policy they are allowing the users to create responsive ads codes. Which in other words, now you can create responsive Adsense ads. Your websites was viewed by many peoples from many varieties of devices. Those device resolution may change. For some device the adsense may not load. Because your ads are not responsive. Well here is the way to make it responsive. Now you can make Adsense responsive by using the JavaScript code. Well, this method was first used by Amit Agarwal. So, I thank him for this useful trick.

Approved Method to Make Your AdSense Code Responsive

Well, now I will show you how to make your Google Adsense Ads responsive on all device. For doing this method you need to create new ad units for 768×90, 468×60 and 300×250 sizes. Let’s see how..?

Check it out this : Right Place to Place Ad’s to Increase Your Adsense Earnings

Making AdSense Ads Responsive

  • Create 768×90, 468×60 and 300×250 ad units.
  • Then edit the bellow javascript code by replacing the pub id and with your slot name.

<!– You can add multiple Adsense Ad units –>
<!– Just change the ad on Line #4 and Line #7 –>
<div id=”google-ads-1″>
adUnit = document.getElementById(“google-ads-1″);
adWidth = adUnit.offsetWidth;
/* Replace this with your AdSense Publisher ID */
google_ad_client = “ca-pub-1234567890“;
if ( adWidth >= 768 ) {
/* Leaderboard 728×90 */
google_ad_slot = “AAA“;
google_ad_width = 768;
google_ad_height = 90;
} else if ( adWidth >= 468 ) {
/* Banner (468 x 60) */
google_ad_slot = “BBB“;
google_ad_width = 468;
google_ad_height = 60;
} else if ( adWidth >= 336 ) {
/* Large Rectangle (336 x 280) */
google_ad_slot = “CCC“;
google_ad_width = 336;
google_ad_height = 280;
} else if ( adWidth >= 300 ) {
/* Medium Rectangle (300 x 250) */
google_ad_slot = “DDD“;
google_ad_width = 300;
google_ad_height = 250;
} else if ( adWidth >= 250 ) {
/* Square (250 x 250) */
google_ad_slot = “EEE“;
google_ad_width = 250;
google_ad_height = 250;
} else {
/* Ad Link Unit (200 x 90) */
google_ad_slot = “FFF”;
google_ad_width = 200;
google_ad_height = 90;
}
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>

  • As I mentioned before just replace the ” ca-pub-1234567890 ” with your Google Adsense publisher ID.
  • Then replace the ad slots with yours slot name. You can find the slot names in your adsense code. It is nothing but your Ad Name.
  • Then add this code where you want to appear your responsive ad.
  • Then Save it!
Read this : AdSense vs. Media.net – Which One is better?

How to Add Responsive Ads to Blogger

  • Go to Blogger Dashboard.
  • Then go the Layout section and select ” Add HTML/Javascript “
  • Then paste the edited javascript code in that box.
  • And hit the Save button.
  • That’s it!
Check this : Top 5 Google Adsense Earners Indian Bloggers

I hope this article will be useful for you. Please share this with your friends. If you have any errors while adding it then leave those problems in comments.

About Harshit Jain

Harshit Jain is a passionate blogger, entrepreneur & digital marketer from India. He is founder of TripoSoft.com, He likes to share his knowledge through his own blog at TripoSoft & TechHug as well as by writing guest articles on other blogging sites.
Follow him on Facebook, Google+, Twitter.

Leave a Reply

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

CommentLuv badge