These days lot of people access website on smartphones and tablets, which has made the life of the web designers and developers more difficult, thanks to Apple and Google for giving smartphone and tablets in almost every hand. A recent survey mentions that 35% of American adults have smartphones and 87% of them access internet on their phones. That is the reason most of the big websites are working on responsive web designs.
Google has also officially recommended that website owners use the responsive design approach instead of maintaining separate mobile and desktop website as responsive design “keeps your desktop and mobile content on a single URL.”
Google Adsense And Responsive Layouts
Its likely that you use Adsense to monetize the content on your website but the problem is that ads delivered by adsense are not responsive, which means that if a user visits a responsive website on a smartphone all the Adsense ads will be delivered of the same size. Lets take an example to make things more clear, if a website is using 728×90 banner and you are viewing the website on a mobile phone, the webpage might extend beyond the screen. That being said, how can we deliver ads of different size based on the viewer screen. Google Adsense is not responsive by design, but can be made to work with your responsive design with a simple Javascript code.
<!-- You can add multiple Adsense Ad units -->
<!-- Just change the ad on Line #4 and Line #7 -->
<div id="google-ads-1">
<script type="text/javascript">
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 if ( adWidth >= 200 ) {
/* Ad Link Unit (200 x 90) */
google_ad_slot = "FFF";
google_ad_width = 200;
google_ad_height = 90;
} else {
/* Do not display the Google Ad */
google_ad_slot = "0";
adUnit.style.display = "none";
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Thanks to Amit from Digital Insipiration for this awesome code.
Lets make our hands dirty and try to understand this code. We are basically using the javascript offsetwidth property to get the width of the div element which encloses the google ad and based on the width we are delivering different ad banners and if the screen width is too small we are not displaying the ad at all.
To get started, create multiple ad units (say 768×90, 468×60 and 300×250) inside your AdSense dashbaord and replace the relevant google_ad_client (ca-pub-1234) and google_ad_slot (AAA, BBB, etc.) identifiers in the code with your own values.
Let me know how this goes. Until next time..!!!
Recent Comments