Skip to main content

How to Modify Adsense Code for Responsive Design

How to Modify Adsense Code for Responsive Design

May 26, 2013 at 02:56PM

Google Adsense now allows you to modify Adsense ad code to meet responsive design requirements. A lot of websites like us have switched to responsive design, which allows the same site design to adjust to varying screens size resolutions (as on mobile device browsers) using CSS. Now even Google recommends you use a responsive design instead of creating a separate mobile site to meet specifications of mobile browsers.

So how will 728px  wide banner ads look  when the screen size is 500px –  it will cause horizontal scrolling and will ruin your responsive mobile design experience. Webmasters long wanted an easier way to switch large ads sizes to smaller ad sizes seamlessly on small screen resolutions. Many site owners tried javascripts to detect screen size and change the ad code or use display:none to hide Adsense units at different screens sizes. Even we tried this.  The Adsense team was listening … and they advise that using CSS to hide the ad is not a good idea. So now what…

Adsense Code for Responsive Design

Lets say you have a wide 1000px wide single column design and display a large 728px wide banner below the article. Normally your Adsense code looks like this when inserted in html code

  <script type="text/javascript">  google_ad_client = "ca-publisher-id";  google_ad_slot = "1212121212";  google_ad_width = 728;  google_ad_height = 90;  }  </script>  <script type="text/javascript" src="">  </script>  

The Adsense team officially suggests you use this code to meet the requirements of responsive design, you can modify Adsense code like this.

  <script type="text/javascript">  google_ad_client = "ca-publisher-id";  width = document.documentElement.clientWidth;  google_ad_slot = "1212121212";  google_ad_width = 728;  google_ad_height = 90;  if (width < 750) {  google_ad_slot = "3434343434";  google_ad_width = 468;  google_ad_height = 60;  }  if (width < 500) {  google_ad_slot = "2323232323";  google_ad_width = 320;  google_ad_height = 50;  }  </script>  <script type="text/javascript" src="">  </script>  

What this code will do is that when the screen is <750 px, it will switch this to a 468px wide smaller banner, and when the screen size is less than 500px, it displays a mobile 320px wide ad. Amazing!

No CSS tweaks and no extra javascript. You can choose different ad sizes to fit different  screen resolutions per your site design.

Remember earlier Google Adsense had helped Adsense publishers modify code for A/B testing to find which ads have higher CTR. I think it was a very essential move that Google Adsense officially allowed this code change, as many possible Adsense modification codes were appearing online to fix responsive design issues and webmasters were confused which code to use, just in case it violates Adsense terms of service.  Try this now and improve your responsive web design.

Original article: How to Modify Adsense Code for Responsive Design

©2013 QuickOnlineTips (QOT). All Rights Reserved.

from Quick Online Tips


Popular posts from this blog

Ten Apps you Must Download when you Buy A New Android Smartphone

Ten Apps you Must Download when you Buy A New Android Smartphone

May 14, 2013 at 11:21PM You have spent loads of time researching which is the best Android smartphone that fits your budget, spoken to people in the know about gadgets and have saved accordingly. After contemplating a fair bit if this is the right time to pick a device and there is no other device you would rather have, you take a plunge into the astonishing world of Android and pick that shiny new Android device. Right now it is sitting proudly in your hands as you admire every curve, every pixel, visible or not of your new Android smartphone.It is the time to load your Android smartphone, to make it truly yours, a device that would be with you through your thick and thin. Time to install those applications which will complete your world, if not complete, at least make your world a lot more organized and a lot more fun. So which apps do you start off with?Like the famous Nokia commercial goes, you have our back. Here …

How to Password Protect & Encrypt Files [Mac/Windows]

How to Password Protect & Encrypt Files [Mac/Windows]

May 16, 2013 at 06:33PM Nowadays, the computer has a very important place in everybody’s life, as a personal gadget used for a lot of different things. Everything is digital and it is stored on a computer’s hard-disk or on a cloud system, offering you easier access to your favorite data.Computers have become the place where you hold pictures, documents, favorite music and everything else in the same place. While storing may include regular data, random and even useless information, people may also keep important stuff, such as wedding photos, work documents, projects and others.Have you ever thought about protecting critical data with a password? Taking into consideration that all information could be vulnerable to hackers or to unauthorized persons, this is a rather obvious procedure. Another reason to encrypt data can appear in case somebody else also uses that computer and you don’t want them to have access to private pict…

Who Needs To Pirate Software With A Free Software List Like This!

Who Needs To Pirate Software With A Free Software List Like This!

May 03, 2013 at 05:30AM I found this interesting list at this random forum on Internet and I found it worth sharing. It is indeed a huge list of free available software that you can use instead of buying or pirating the expensive ones. The list goes as following:3D Graphics:3Delight Free –
Anim8or –
Aqsis –
Blender –
Houdini (Free Edition) –
Now3D –
OpenFX –
POV-Ray –
Terragen –
Toxic –
Wings 3D – –
AntiVir –
Avast – http://www.…