Responsive adsense joomla moduleIf you have started thinking responsive and you use the Google Adsense,in your Joomla! responsive website, probably you already know that there are some problem with the Google Adsense wich don't look good across all screen sizes, specially if you use the horizontal ad units. The problem arise when mobile and tablet devices has width less than the ad unit,Google AdSense ads have a fixed width and they will not shrink or expand based on the screen size of the visitor.

The situation was:

  • Google Adsense TOS don't permits code modification
  • ,
  • they recommend to use responsive design instead of creating a separate mobile site “keeps your desktop and mobile content on a single URL”

so after some request on the official blog, now allows to modify the code for render the ad unit properly for all screen size, there’s a simple JavaScript based workaround that will make your Google Ads respond to the screen size, this snippet of code was found searching on the net

 

 
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 728x90 */
  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;
} 

How it works

On initial page load, it determins the optimal ad for that position, the inserted ads will never exced the content area width, so shows that ad properly, does not resize ads on the fly so rember when you test. I've ported that snippet of code on a Joomla! module, wich allows you to easily place responsive Google AdSense in your Joomla! website's.

Setup is easy

responsive adsense module parametersFirst

inside your AdSense dashbaord create AdSense ads for the different sizes that you want to use on your website, create multiple ad units (say 768×90, 468×60 , 300×250, etc),

Second

inside your Joomla! site administration report the ads slot to the proper module paramenter.
That's it!. If you want to show your responsive adsense ads unit on article you can use the loadposition plugin

 

 

 

 Live demo 

here is how the module works from responsinator 

The Joomla! module responsive google adesense emulator test

works on Joomla! 2.5 works on Joomla! 3

Download Responsive Google Adsense for Joomla!


Disclaimer

Alikonweb.it is not affiliated with or endorsed by the Joomla!®Project or Open Source Matters. The Joomla!® name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.