Creating Responsive Adsense Ads for Your Blog

Google Adsense ads are not responsive out of the box. But you can use a bit of code hack to make them responsive.

First understand the concept of viewport. In simple terms it is the visible portion on any device – web or mobile.

Different devices will have different viewports of different dimensions. Talking about dimensions, keep in mind that “width” of the viewport is what matters when you are designing something to be responsive.

Here is a nice table you can look up to see different viewport sizes

Ok – now that you have learnt about viewports let us move to the next step.

To make Google Ads responsive you will need to figure out what dimensions you want to display for your ads when your website is viewed in different devices.

Keeping in mind the long list of dimensions, i am limiting the scope of this article to only 3

1. 728×98 : When someone views site on a desktop system

2. 468×60: When someone views site on a tablet

3. 234×60: When someone views site on a smartphone

Steps:

Login to your Google Adsense account.

Click on ‘My Ads’ tab.

Create 3 ads with dimensions mentioned above ( i.e 728×98, 468×60 and 234×60 ).

Now open the webpage where you want to place Ads.

Place the following code where you want to display your Ad:


<script type="text/javascript"><!--
var viewportWidth = document.documentElement.clientWidth;
google_ad_client = "ca-pub-<your_publisher_id_here>";

if ( viewportWidth >= 768 ){
/* YourCompany 768x98 image */
google_ad_slot = "AAAAAA";
google_ad_width = 768;
google_ad_height = 98;

}elseif(viewportWidth >=600 ){
/* YourCompany 468x60 image/text */
google_ad_slot = "BBBBBBBB";
google_ad_width = 468;
google_ad_height = 60;
}elseif( viewportWidth >= 300{
/* YourCompany 234x60 image/text */
google_ad_slot = "CCCCCCCC";
google_ad_width = 234;
google_ad_height = 60;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Do not forget to replace your_publisher_id_here with you actual publisher id and also replace the Google ad slot numbers with actual slot numbers from your adsense account.

You can see an example of this implementation here at http://www.motivehub.com/

Disclaimer: As far as i know this hack is not violating Google adsense terms of use – as i am not changing output or behavior of code, i am just serving a different ad from my Adsense account based on viewport of the user. But to be sure i will request you to contact Google webmaster support before implementing this code on your site.

Let me know your comments and suggestions below.

 

 

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)
This entry was posted in General. Bookmark the permalink. Both comments and trackbacks are currently closed.