Serving Different Ad sizes On Different Devices Using JavaScript

Question

The sub-questions are inter-related, so I'll put them in order for clarity's sake.

Question - 1: Is loading different AdSense Ad sizes/formats depending on a device's browser/viewport width, using JavaScript, a good idea?

I am not asking if it's okay with Google AdSense's TOS or other policies. I've taken care of 'em.

What I want to know is, are there any drawbacks of using JavaScript to do this? I mean, will it mess with the quality of ads served by Adsense? or it doesn't matter?

Question - 2: Is there a better way to do it?

(2a) I've found two different code snippets to achieve what I need. I don't know which one's more reliable or better.

This:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-3658299045266116";
/* top */
if ($(window).width()<728 ){
     google_ad_slot = "4414183254";
     google_ad_width = 320;
     google_ad_height = 50;
}else{
     google_ad_slot = "1020377061";
     google_ad_width = 728;
     google_ad_height = 90;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Someone says, "You can not rely on window width as it is unstable. For example, on some Androids you can not rely on it at all, as it takes up to 500ms for browser to have its width." Is it true, and should be a concern?

(2b) OR this:

<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
    if (window.innerWidth >= 800) {
        google_ad_slot = "ad-unit-1";
        google_ad_width = 728;
        google_ad_height = 60;
    } else if (window.innerWidth < 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>

Again, somebody else says, _"Your solution is great but can break in older version of IE. Best is to use jQuery to query the browser width: width = $(window).width();" But I can't use it for the reason mentioned under code snippet of 2(a).

So, what'd be a good way to do what I need? document.documentElement.clientWidth? But what'd be its behavior like when the page is zoomed, on desktop or mobile devices?

In regard to question 1, it shouldn't matter. Showing targeted ads is a smart thing to do IMO. As for question 2, you should be checking the viewport size. You did this in example 1. An iPhone has a viewport of 320 by default. The note you wrote in sample 3 is actually telling you to do sample 1. There is another thread where viewports from javascript are discussed, you may want to look at the answer which has a link on it. [Get the Browser viewport dimensions with javascript](http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript) — Victoria French, Feb 22 '13 at 06:02
@VictoriaFrench Thanks for the link. It has made it clear that `window.innerWidth` is the way to go if support for IE8 and below is NOT necessary. `$(window).width();` is already a no-go, if the reason mentioned in the question is true (is it?). So, it's either `window.innerWidth` or `document.documentElement.clientWidth` -- the latter seems more promising. — its_me, Feb 22 '13 at 13:09

score 2 · Accepted Answer · answered Feb 22 '13 at 13:36

Here we go:

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

This is a 'Google Adsense Team-approved' method by the way.

Source: labnol.org

Serving Different Ad sizes On Different Devices Using JavaScript

1 Answers1