Question

Okay, so I’m working on a responsive site and I’m trying to handle Adsense in the best way possible that doesn’t get me banned! What I’d like to do is use jQuery to add in my Adsense code only if the browser width is less than 533px. This way, I can display a smaller ad that will fit the window properly and not break the layout. I’m having some trouble getting the Adsense javascript added though. This works:

(function($){
//detect the width on page load
$(document).ready(function(){
var current_width = $(window).width();
//do something with the width value here!
if(current_width < 533){
        $('.ads').prepend("THIS IS WHERE I WANT THE ADSENSE CODE TO GO");
}
});

But when I include my Adsense code to replace THIS IS WHERE I WANT THE ADSENSE TO GO, it doesn’t. This is the Adsense code:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567890";
/* Test Ad */
google_ad_slot = "1234567890";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

I’ve also tried to include the Adsense javascript code in a .html file and use jQuery.get and jQuery.getScript for a .html and .js file. I just can’t get it to work.

I could do it with a simple PHP header detect, but I want the ads to display based on width, not device type.

Anybody know how this can be done?

(Reposted as no replies to previous question)

Answer 1

The problem you’re facing is that Google doesn’t really support AdSense ajax. The normal way of including adsense code uses the URL of the page where it lives in order to render the right content.

Now, suppose you could reduce the adsense code to a particular URL. You could do something like this:

// note, this url is just a suggestion, not something that will likely work 

var url = 'http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1234567890&ad_slot=1234567890&ad_width=250&ad_height=250';

var adsContainer = $('.ads');  // though, if there's only one, use id, not class

$.ajax({
type:'GET',
    url:url,
    async:true,
    success:function(html) {
        adsContainer.html(html);
        return false;
    },
    error: function(html) {
      adsContainer.html('SOME DEFAULT AD MESSAGE');
      return false;
    } 
});

But I think this is almost assuredly the kind of thing that will get you in trouble with Google.

Google used to have an adsense ajax program:

https://developers.google.com/adsense-for-ajax/

But it is now “unavailable”. The reason you can’t put your code in an external .html or .php file and ajax on your own server is that the javascript doesn’t get executed by an engine on the client side by the ajax call. You are injecting raw javascript into a page that has already been interpreted by the javascript engine.

Could you use node.js or some kind of server side javascript parser to serve your .html file? Maybe, but that’s a lot to solve this problem.

My advice is this: include multiple, smaller ads that will look good if stacked on a big page, or tiled if crammed together on a small page.