How to Create Responsive Google Ads?

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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) */

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

                                  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.

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
Comments
  1. Suresh Maurya
    • Chitraparna
  2. Kapil
    • Kumar Ashutosh
  3. Kumar Ashutosh
  4. rakesh kumar
    • Chitraparna
  5. Achin Jain
    • Kumar Ashutosh

Leave a Reply

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