How to Create Responsive Google Ads?

We all are aware about responsive web designs. Responsive web design re-scales your website or blog depending upon the size of screen being used for opening it; thus, presents your online content in the best possible way.

However, you might have noticed that in spite of your theme or website being responsive, your Google ad does not tend to resize itself. This is because they are not responsive and Google even clearly states that you are not allowed to change the size of its ad code.

Therefore, how to resize it so that it goes well with our responsive theme?

 

The Problem

Non Responsive Google Ads

Suppose you have a 728×90 leaderboard unit on your website. If someone opens your website in mobile or some small screen device, this ad will not resize due to fixed width and will extend beyond that device screen. This definitely gives a bad impression and may unnecessarily add up a long sideways scroll bar of no use. Any visitor will click on those ads barely and what you lose in the process are visitors, money and your time.

 

How to make Google AdSense Ads Responsive?

No, you definitely don’t need to make a different mobile based website and show smaller ads on that, though it is an option but requires a complete different setup and maintenance.

However, we don’t need such a complex way to make the most of Google AdSense to capture mobile viewership. We will use a simple trick here.

[box type="info"] This is not resizing of ads as you are not allowed to do so as per T&C of AdSense. But this trick is based on the idea of displaying ads which suits the best for the screen size being used for viewing. Remember, a responsive website always knows what screen size is being used by the viewer. [/box]

We will be doing this by the help of a simple JavaScript, which is based on the condition that different screen size runs a different ad code.

You need to use this code. The code has been referenced from Labnol.org.

<div id=”google-ads-1″>
 
                                adUnit   = document.getElementById(“google-ads-1″);
               adWidth  = adUnit.offsetWidth;
               /* Replace this with your AdSense Publisher ID */

                google_ad_client = “ca-pub-xxxxxxxxxx”;

 

                                if ( adWidth >= 768 ) {

                                 /* Leaderboard 728×90 */

                                  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>

                 

                 

                   src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

  </script>

</div>

How the Code Works?

Replace the codes with your respective codes. It not essential that you place only codes for those ad types which are mentioned here. Range of screen size is defined in the condition next to “if” and “elseif”.

The ad codes for the respective size range can be any other which you think will suit at that screen size. What we are doing is that we are storing the value of the screen width with this command adWidth  = adUnit.offsetWidth in “adWidth” variable.

Now we are specifying a range of screen size by “If Else” conditional statement. This statement will run the conditions which suits the best thus the condition which lies in the given range of a screen size will show the ads you decided at that screen size

[box type="info"] Don’t forget to replace the publisher id and the ad codes which you want to show.[/box]

Copy and paste this code anywhere on your website. WordPress users can experiment with this code by adding a widget and then pasting this code. Whenever this code will run, based on the screen size, your website will display the most appropriate ad to the viewer.

If you want to create multiple units of ads with condition then you can do so. You just need to change the zero “1” of adUnit = document.getElementById(“google-ads-1“); and make it google-ads-2, google-ads-3 and so on.

After adding Responsive Code

This technique is not about re-sizing the ads size. It’s displaying the best possible ad depending upon the screen size. So you don’t need to worry as this does not violates any of the AdSense TOC.

This trick is officially approved by Google AdSense.

Comments

  1. says

    This is the first time I have heard about responsive Google ads. It sounds really exciting to make Google ads responsive. If it doesn’t violate Google terms, I should also give it a try sometime soon.

    • says

      Hello Kapil,
      I assure you that the trick mentioned above does not violates Google Adsense T&C in any manner. So you may give it a try if you want to and grab some more bucks… :)

    • says

      Yes, It does not violates any rules of Adsense. We are not altering adsense codes in any manner…. we are just showing different ads on different screen.. Google has officialy approved this method….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>