Ads with Responsive Design

[levo]

A quick tutorial for using Adsense ads for responsive design. I've almost finished implementing it..

I'm using async Google Publisher Tag, just add the following div to your page.

<div id="adcode"><div id="div-gpt-ad-000000-0" style="width:160px;height:600px;" data-dfp="Skyscraper" data-cids="0000000+000000"></div></div>

data-dfp is the name of the ad unit, and data-cids is for adsense channels. Next, CSS:

@media only screen and (max-device-width: 640px) {
#adcode > div {
width: 468px !important;
height: 60px !important;
}
}

As you can see, if the device width is 640px or smaller, we set the ad to 468x60 pixels. Finally javascript (using jquery):

//find ad slots
var dfpslots=$("body").find("div[data-dfp]");

//if we find any
if ($(dfpslots).length) {

//start of GPT
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {

//for each slot, set adsense channel and define slot
//NOTE don't forget to change 0000000 to your specific id

$(dfpslots).each(function(){
if ($(this).attr('data-cids')) googletag.pubads().set("adsense_channel_ids", $(this).attr('data-cids'));
googletag.defineSlot('/0000000/'+$(this).attr('data-dfp'), [$(this).width(), $(this).height()], $(this).attr('id')).addService(googletag.pubads());
});

//standart GPT
googletag.pubads().enableSingleRequest();
googletag.enableServices();

//display Ads for each slot
$(dfpslots).each(function(){
googletag.display($(this).attr('id'));
});

});

//call GPT JS
$.ajaxSetup({cache:true}); //enable cache
$.getScript("http://www.googletagservices.com/tag/js/gpt.js");
}

This will display the ad in correct size. You can also check the visibility of the div and exclude/delete it before calling the gpt.js.

It doesn't change when you resize your window, but you can show different ad sizes based on media queries. Any comments or questions?

[synthese]

Thanks for the post - surprised no one else has commented.

I'm attempting to implement this now. Have also changed

var dfpslots=$(".adslot:visible");

And each ad div has a class of adslot. If any of the adslots are display:none (due to media queries), they will not appear in the selector and get an ad assigned to them.

The only issue I'm concerned about is performance, as I'm not making the ad calls until the document is ready -- as opposed to making the calls inline as the document renders.

However, due to the media queries you don't know what should render where.

[levo]

I actually use the id of the div that wraps the content for better performance; using visible is a good idea.

var dfpslots=$("#wrapper").find("div[data-dfp]:visible");

I'm not making the ad calls until the document is ready

I think the Google Publisher Tag also waits for document.ready to be able to make a single-request. By the way, you can load 'http://www.googletagservices.com/tag/js/gpt.js' asynchronously in the header, before any other code. But, for the rest of it, yes you have to wait for document.ready.