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

responsive website designAdsense 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.

, ,

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

  1. Bharath M June 27, 2013 at 1:25 pm #

    Yeah. Superb. When I get approval from ad sense I will do just that.
    Thank you.

    • singhnsk June 27, 2013 at 3:50 pm #

      Yeah bro. Just noticed your blog and its surprising to see that you’re maintaining one too. You’ve done another great job by using a custom domain for your blogger blog. Adsense approval.. hmm.. The approval process has become quite hard these days and I don’t think they’ll approve you with that much of traffic and page-views. Need to work harder 🙂
      Let me know if you face any problems setting up your blog. I’m not an expert, but can still try to help.

  2. Bharath m June 27, 2013 at 4:46 pm #

    Thank you so much. My website is just 52 days old as of 27/06/2013. I have bought custom domain just 2 days ago. Everything is going perfectly. I am not interesting in adsense as of now. I think i’ll go for it after decent traffic.
    I saw your another website. Its superb. I am a fan of you and ur sites. Good job.
    OK. I’ll contact you if i face any trouble.

    Till then I should concentrate on my studies (CA-IPCC) 😀
    Thank you.

  3. Kaloyan September 30, 2013 at 5:47 pm #

    Thank you very much, VERY helpful info indeed 🙂 !

  4. didka nach October 29, 2013 at 7:09 pm #

    very good. May to take it in the future

  5. Dr. Irfan January 7, 2015 at 2:59 pm #

    Where should I insert this code?
    As far as i understand, I should insert a separate code for each ad?

    • Narender Singh January 7, 2015 at 3:41 pm #

      Yep. You need the ad identifier codes from the genrated ad units and add into the javascript provided. Also, Adsense now supports responsive designs and you can make use of the responsive code directly, unless you want to show ads in certain fixed dimensions.

      • Dr. Irfan January 7, 2015 at 4:05 pm #

        AWESOME!! Bundle of thanks. The code is working PERFECTLY.

        I know about Responsive ads but they are not very flexible 🙂

        • Narender Singh January 7, 2015 at 5:13 pm #

          Cool. Good to know that it was helpful. Myself using this as well because responsive units choose a lot of sizes while I want to only how the high performing ones 🙂

  6. Dr. Irfan January 7, 2015 at 4:15 pm #

    And yes, I needed this code for ‘Link ads’

  7. pankaj January 8, 2015 at 5:42 pm #

    AWESOME!! Bundle of thanks. The code is working PERFECTLY.

    I know about Responsive ads but they are not very flexible
    you can check my site myjokessms.com

  8. Juan Carlos February 13, 2015 at 7:40 pm #

    Thanks! this is exactly what I needed it. Works perfect!

  9. denkar November 5, 2015 at 6:38 pm #

    hello sir,was it really safe? i even saw your site uses big banner and when i view on mobile,it gets customised to mobile screen.

    i even use big banner at my website but when viewed from mobile it doesnt fit the screen

Leave a Reply