Adsense Responsive Code

My Code Isn't Working and Can't Figure Out Why

[jimh009]

Hi,

I'm converting an existing fixed-width site to a responsive design. Since I run Adsense, I researched online how to show different ads to different viewport sizes and found several examples of code to use. Apparently, Google approves the code, too.

However, when I try to implement the code on my site it isn't working.

What I want to do is to display at 300x250 ad unit at viewport sizes at and above 360px. At sizes smaller than 360px, I want to display the 250x250 square.

Here's the code I'm using.

<script type="text/javascript">
 
 var width = window.innerWidth || document.documentElement.clientWidth;
 google_ad_client = "ca-pub-MYID";
 
 if (width >= 360) {
  google_ad_slot = "MYSLOT#1";
  google_ad_width = 300;
  google_ad_height = 250;
 } else {
  google_ad_slot = "MYSLOT#2";
  google_ad_width = 250;
  google_ad_height = 250;
 }
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

Each of the individual ads that I created do work. When I run them by themselves (using the boilerplate Adsense code provided), both the 300x250 and 250x250 ads work just fine on the page.

However, when I use the above code - only the 300x250 ad unit is displayed. No matter how small the viewport becomes, the 250x250 ad never shows - thus creating display problems on very small display sizes (such as portrait mode on a smartphone).

Any suggestions on how to get this code working?

[lucy24]

The usual preliminary questions: How are you testing? Just by playing with your browser's window width? Did you first check to make sure the function is returning the right value? (Nothing fancy: "alert(width)" will give you the information you need.*) It doesn't have to work in MSIE, because it will never meet MSIE in real life. But from your post it's impossible to tell where the error is happening.

Incidentally 360 seems awfully narrow for 300x250. It doesn't leave much horizontal space for other content.


* The first time I ever saw the "NaN" response was when testing something that involved innerWidth and MSIE. This is really true. I had to go ask a reference librarian what it means :(

[jimh009]

Hi,

I've tested it by narrowing the browsers window width (in Firefox and IE10) and also on my ipad and iTouch. Results are the same in all.

I haven't set on the final sizes where different ads will be displayed. Most likely I'll use 3 different sizes for the reason you mentioned. But for testing purposes, figured i'd start with two different ad sizes just to get things working.

I'm not that familiar with Javascript, so how would I go about implementing "alert(width)" to see what value the function is returning?

Thanks

Jim

[bhukkel]

Did You add the following metatag to your page:

<meta name="viewport" content="width=device-width">

[swa66]

When you use CSS media queries to get your responsive design, the layout gets updated when you resize your browser window without reloading or anything else. It doesn't need to reload anything, it's just needs to do a redraw (which the browser needs to do anyway, so it might use the "right" CSS bits just as well).

The code you show above for adsense will require a reload before it's executed again. So just resizing the window will NOT reload it - it's not supposed to do so. Don't try to make it do so: it'll cause tons of reloads of the ad and Google will not like that (unless you can get them to give you prior permission).

Normal users do not resize their windows all that much, just be ready with dealing with having too wide or too narrow ads if they do. Ipad, Iphone users will only use a limited range of screen widths, make sure what you chose works for both portrait and landscape modes.

[bhukkel]

This javascript code is approved by adsense.

[adsense-de.blogspot.de...]

Adsense doesnt support real responsive so at this moment it is the only solution.

[lucy24]

alert(some-text-here) is not part of your real code. It's a quick-and-dirty debugging trick; it simply means "put up an alert box containing this text". As in

{script, script, script, do stuff}
alert("The value of 'width' is currently " + width);
{script, script, more stuff}
alert ("And now it's " + width);

giving you a chance to say "Oh, ###, it was supposed to change between those two points". My own alerts tend to say "OK so far", meaning the code has not yet reached the spot where something offended it and caused it to stop executing.

Useful when code does two or more things concurrently: in your case, getting the window width and then taking action based on the window width.

[jimh009]

Hi lucy24,

Thanks for all your help! I finally got the code working, and of course, I feel like a moron since it was such a simple fix. But the alert(width) script you provided helped me find the simple fix.

The ultimate problem was...the script i was using was testing for the "container size" the ad was placed on, not the actual viewport of the device!

Additionally, none of the Adsense responsive code I've read about actually "resizes" the size of the Google Ad shown. Instead, the code will put up the appropriate sized ad based on viewport size at time of page loading. Hence, if you resize the browser screen after the page has loaded, you won't get a new ad nor will the ad be "redrawn."

Anyways, for anyone who might be interested, here is the code I used that works well on all browsers that i've tested as well as on an iPad and iPod Touch:

 <div id="g-1">
 <script type="text/javascript">
  
 adUnit = document.getElementById("g-1");
 adWidth = adUnit.offsetWidth;
  
 /* Replace this with Publisher ID */
 google_ad_client = "ca-pub-pubid";
  
 if ( adWidth >= 400 ) {
 /* Large Rectangle 336x280 */
 google_ad_slot = "slot1";
 google_ad_width = 336;
 google_ad_height = 280;
 } else if ( adWidth >= 300 ) {
 /* Medium Rectangle (300 x 250) */
 google_ad_slot = "slot2";
 google_ad_width = 300;
 google_ad_height = 250;
 } else {
 /* Square (250 x 250) */
 google_ad_slot = "slot3";
 google_ad_width = 250;
 google_ad_height = 250;
 } 
 </script>
  
 <script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 </script>
 </div>

[garyr_h]

I just received a reply from AdSense customer support about this. The rep stated that it is against the Terms of Agreement. They do not allow ANY change of the code. They even stated that the blog post that bhukkel mentioned is "out of date" and they do not allow it.

They stated that use of that code or any other code not specifically given by AdSense would result in a termination of account.

[Leosghost]

My adsense support, France, disagrees with your adsense support ( USA ? )..:) ..But G is not noted for the right hand to be knowing what the left hand is doing..:)

Perhaps ( as some of us have suspected, and voiced our suspicions here in the past as to why it has never been posted on an English adsense official blog page ) is that it was / is only authorised for use on Dutch, German and French language publisher sites..or only on sites owned by publishers from those countries..irrespective of the language in which we publish our sites..

It may very well be that your adsense support can only read English..( possibly even only as a second language ) ..were the French and German "official adsense pages" to be "out of date"..they would have been modified..and the reps for these two countries ( I'm not aware of the approved "responsive" adsense code using media queries existing in other languages, on other official adsense pages ) would have been informed..

Clarification from G in English would be helpful to many here ..but I'm not holding my breath..

Btw..As far as I'm aware ( my German language skills are not as good as my French or English ) there have not been any reports from either French or German publishers being banned, for using what was stated by Google ( on it's own adsense official blog ) as officially approved responsive site adsense serving methods..

[adsense-fr.blogspot.fr...]

You'll note that in fact in France we got this approval on December 14..2012..

and in Germany it was 3 days earlier..Dec 11.2012

[adsense-de.blogspot.de...]

Since then Netmeg mentioned around March or April of 2013 that adsense USA had said to her that it would be announced "soon" in English..<= paraphrasing Netmeg's post, as I can't find it ATM ..

[garyr_h]

Yes, my AdSense support is for USA. So that's interesting if only European sites are allowed to use it.

[Leosghost]

Don't know if it applies to all European countries ..or just those whose adsense blogspot has their TLD ..( FR, DE, NL ) and who has posted that code..

The new TOS we signed upto for adsense ( the one to be able to continue using adsense ) was not quite the same from country to country..

The French TOS ( which was only available in French if you accessed your account from France..and was in very "legalistic" French* )..was quite a bit longer and different to the TOS for the USA which I saw later..

*Many English speaking ex-pats ( whose French is nowhere near as good as they think despite living here for decades ) will have no idea of what some of the French legal terms meant..that they had to click "yes" or "no" to..;)

[swa66]

Take care with adsense support replies: their first line is not authoritative on compliance issues, there's a backend that is. Is they refuse things with a form letter: just insist you need a solution - any solution. I think those tickets go to their second line or so, who do talk to the compliance people from what I can reverse engineer out of their responses.

But it's by far not always possible to get through to the second line.

Anyway: I've had permissions given to me by the compliance people that were first refused by the first line.

[jimh009]

Well, thanks for the heads up that the code used to show different ads to different viewports "might" not be compliant with the TOS. Since there's 1000's of sites likely already using the code, seems like the horse has left the gate already on this.

But still, to avoid some algo dumping me off a "you're booted" letter, I removed the code and re-designed things so that the 300x250 ad looks good at all resolutions (although not ideal on mobile devices, obviously).

Perhaps before the onset of the next Ice Age the Adsense people will release some responsive optimized ads for general use. But admittedly, I won't be holding my breath on that one.

[ColinPL]

I'm not aware of the approved "responsive" adsense code using media queries existing in other languages, on other official adsense pages

Polish: [adsense-pl.blogspot.com...]
Turkish: [adsense-tr.blogspot.com...]
Italian: [it-adsense.blogspot.com...]

[Leosghost]

Thanks :) I hadn't done more than cursory looking..( G is very aggressive with their GEO-redirecting ) and as I don't read Polish or Turkish ( can read some Italian..enough to make many errors ;) wouldn't have found them :)..

[lucy24]

<topic drift>
Whoops! Given that group of URLs, I did the obvious experimenting. And I know darn well that
Kali ini saya akan Membahas ...
is neither Norwegian (.no) nor any language spoken in Norway (also .no). G### Translate, which ought to know, says it's Indonesian. Turns out "no" was not a good choice of first try-- but the form "language-adsense" or "adsense-language" is wholly random, arbitrary and capricious. Some are blank pages, some aren't even registered. You'd expect a pattern wouldn't you?
</drift>

[Rubincain]

Hi (my first post on the forum)

I just wanted to say that my AdSense rep in Ireland gave me responsive code for my UK based site. I edited the code to make it work a little better and got her to confirm that the edits were fine for use (been using it for 6 months now).