Adsense - Responsive Ads using a Javascript interface

Adsense - Responsive Ads with a Javascript interface

How to make responsive ads using Javascript

So, the idea is check the user screen size and then based on that value show up the ads.

In my case I have the following set:

• Desktop
• Leaderboard (728x90)

• Portrait tablet to landscape and desktop
• Banner (468x60)

• Landscape phone to portrait tablet
• Banner (468x60)

• Landscape phones and down
• Half Banner (234x60)

See the source code example:

 <script type="text/javascript">  
       google_ad_client = "ca-pub-XXXXXX";  
       google_ad_slot = "";  
       if(window.innerWidth >= 800) {  
        //visible-desktop  
        //Medium Rectangle  
        google_ad_slot = "xxxxxxx";  
        google_ad_width = 300;  
        google_ad_height = 250;  
       }  
       else if((window.innerWidth > 480)&&(window.innerWidth < 800)) {  
        //visible-tablet  
        //Square  
        google_ad_slot = "xxxxxxx";  
        google_ad_width = 250;  
        google_ad_height = 250;  
       }  
       else if(window.innerWidth <= 480) {  
        //visible-phone  
        //Large Rectangle  
        google_ad_slot = "xxxxxxx";  
        google_ad_width = 336;  
        google_ad_height = 280;  
       }  
       if(google_ad_slot != "")  
        document.write('1: <scr'+'ipt type=\"text/javascript\" src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\"></scri'+'pt>');  
       </script>  

Are you using Twitter Bootstrap? If so, you can make the same thing quite easier. Take a look!

Adsense - Responsive Ads with CSS @media queries from Bootstrap responsive utility classes

Adsense - Responsive Ads with Bootstrap and CSS @media queries

Twitter Bootstrap is built with Responsive utility classes that help us to implement different sizes of ads   for different devices.

Class	Phones767px and below	Tablets979px to 768px	DesktopsDefault
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

So, the idea is to use these classes to show the right ads. In my case I have the following set:

• Desktop
• Leaderboard (728x90)

• Portrait tablet to landscape and desktop
• Banner (468x60)

• Landscape phone to portrait tablet
• Banner (468x60)

• Landscape phones and down
• Half Banner (234x60)

It is really simple to achieve this using the Bootstrap built-in responsive utility classes. See the example bellow:

 <div class="visible-desktop">  
        <script type="text/javascript">  
             google_ad_client = "ca-pub-XXXXXX";  
             google_ad_slot = "XXXXXXX";  
             google_ad_width = 728;  
             google_ad_height = 90;  
        </script>  
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>   
 </div>  

 <div class="visible-tablet">  
        <script type="text/javascript">  
             google_ad_client = "ca-pub-XXXXXX";  
             google_ad_slot = "XXXXXXX";  
             google_ad_width = 468;  
             google_ad_height = 60;  
        </script>  
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
 </div>  

 <div class="visible-phone">  
        <script type="text/javascript">  
             google_ad_client = "ca-pub-XXXXXX";  
             google_ad_slot = "XXXXXXX";  
             google_ad_width = 234;  
             google_ad_height = 60;  
        </script>  
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
 </div>  

Easy uh?!

Here is a example showing how we can make the same thing using Javascript only.