homepage Welcome to WebmasterWorld Guest from 54.166.100.8
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Google / Google AdSense
Forum Library, Charter, Moderators: incrediBILL & jatar k & martinibuster

Google AdSense Forum

    
Ads with Responsive Design
levo




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

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




msg:4528881
 5:58 am on Dec 17, 2012 (gmt 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.

levo




msg:4529120
 11:03 pm on Dec 17, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Google / Google AdSense
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved