How to Display different Adsense Ads depening on visitor’s Screen Size

Adsense is one of the most popular Advertising network which serves advertisements to millions of pages everyday. However Adsense ad units are not responsive yet, which means that the displayed advertisement size does not switch according to the screen size of the visitor’s device. The obvious result is lost revenue. How? Just because an average visitor is less likely to click on an advertisement if the complete frame doesn’t show up on his device.

Thanks to Amit Aggarwal, we now have an easy JavaScript which detects the screen-size (or window size) of the visitor’s browser and then serves the ads from the appropriate ad-unit which fits the visitor’s screen very well. All you need to do is to replace the Adcode (which you want to make responsive) with the following code:

JavaScript to show different ads based on Visitor’s Window/Screen Size

<script type="text/javascript">

    var width = window.innerWidth || document.documentElement.clientWidth;
    google_ad_client = "ca-publisher-id";

    if (width >= 800) { 
       google_ad_slot = "ad-unit-1"; 
       google_ad_width = 728; 
       google_ad_height = 60; 
    } else if ((width < 800) && (width < 400)) { 
      google_ad_slot = "ad-unit-2"; 
      google_ad_width = 300; 
      google_ad_height = 250; 
    } else { 
      google_ad_slot = "ad-unit-3"; 
      google_ad_width = 468; 
      google_ad_height = 60; 
    } 
</script> 
<script type="text/javascript" 
       src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

Remember to replace the google_ad_client and google_ad_slot identifiers with the exact values from your own code or it will not display ads.

Also make sure that you have created 3 different ad-units required by the code i.e 728×60, 300×250 and a 468×60. You can modify the above code to switch between other ad-sizes of your choice. You might also be willing to create a new ad-unit for the visitors browsing on a mobile device.

Is it in violation of Adsense terms?

It is worth noting that this JavaScript does not violate any Adsense Terms and has been approved by the Adsense team and called safe for use. However, you should not make any further changes with the look and feel of ads such as hiding ads with CSS and other Black Hat tricks to generate more clicks.