Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL & martinibuster

Message Too Old, No Replies

Ads with Responsive Design

7:51 pm on Dec 2, 2012 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 12, 2004
votes: 1

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

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

//display Ads for each slot


//call GPT JS
$.ajaxSetup({cache:true}); //enable cache

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?
5:58 am on Dec 17, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 8, 2007
votes: 0

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.
11:03 pm on Dec 17, 2012 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 12, 2004
votes: 1

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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members