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

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.

About the author

Narender Singh

Narender is a B-school graduate who loves technology. He generally, avoids news and spends his time writing guides and tutorials which add value to the web. Shoot any of your questions to him at narender@techmesto.com

14 Comments

Click here to post a comment

Email me when somebody replies to my comment.

  • 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

  • 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

    • 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.

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

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

        • 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 🙂

  • 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.

    • 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.