1. Home
  2. Forums Index
  3. Search Engines and SEO / Google AdSense - Display Ads 11:03 am May 21, 2026

Forum Moderators: martinibuster

Message Too Old, No Replies

Modifying DFP to show different tags based on CSS / screen width

         

csdude55

12:27 am on May 21, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I wasn't sure whether to put this here, under Javascript, or Webmaster General. I chose here because I'm really implementing Adsense, and I figure that other Adsense people are most likely to have been where I am :-/

My site has some sections with infinite scroll, and others that aren't, so I had to modify my DFP code to match this guide:

[support.google.com...]

Here's an example of what I have working: 

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var slot = new Array();

googletag.cmd.push(function() {
slot[0] = googletag.defineSlot('/xxxx/320x50_Mobile_ATF',
[320, 50], 'adslot0')
.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>

// Later in the page
<div id='adslot0' style='height:50px; width:320px;'>

<script>
googletag.cmd.push(function() {
googletag.display('adslot0');
googletag.pubads().refresh([slot[0]]);
});
</script>

</div>


But in practice, the DIV section was originally set up like this: 

<div data-b="0" class="a ctr">
 <div class="lb_728">
  // code for 728x90
 </div>

 <div class="lb_mobile">
  // code for 320x50
 </div>
</div>


I use CSS to either show or hide lb_728 or lb_mobile, based on the width of the user's viewport.

So my question is, what's the best way to do the same thing with the DFP modification that I'm using now? AFAIK I can't create a responsive banner in DFP, and I'm not sure if it's OK to use "defineSlot" to create banners that aren't used on the page.

This is where I'm headed so far, but on an infinite scroll page it ends up with a LOT of JS coding that may not even be necessary. So I'm hoping you guys can suggest a cleaner way to accomplish the same thing: 

<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var slot = new Array();

googletag.cmd.push(function() {
if (screen.width >= 728 && screen.width <= 975)
slot[0] = googletag.defineSlot('/xxxx/728x90_Leaderboard_ATF',
[728, 90], 'adslot0')
.addService(googletag.pubads());

if (screen.width < 728)
slot[1] = googletag.defineSlot('/xxxx/320x50_Mobile_ATF',
[320, 50], 'adslot1')
.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>

<div data-b="0" class="a ctr">
 <div class="lb_728">
  <div id='adslot0' style='height:90px; width:728px;'>
<script>
if (slot[0])
googletag.cmd.push(function() {
googletag.display('adslot0');
googletag.pubads().refresh([slot[0]]);
});
</script>
  </div>
 </div>

 <div class="lb_mobile">
  <div id='adslot1' style='height:50px; width:320px;'>
<script>
if (slot[1])
googletag.cmd.push(function() {
googletag.display('adslot1');
googletag.pubads().refresh([slot[1]]);
});
</script>
  </div>
 </div>
</div>

freitasm

4:30 am on May 21, 2017 (gmt 0)

10+ Year Member Top Contributors Of The Month



You could use the new DFP tags. For example

var mappingadunitname970x250 = googletag.sizeMapping().
addSize([1300, 0], [[970, 250], [728, 90], [760, 120] ]).
addSize([800, 0], [[728, 90]]).
addSize([0, 0], []).
build();

googletag.defineSlot('/1003454/DFPADUnitName', [[970, 250], [728, 90], [760, 120]], 'div-gpt-ad-1324015435281-3').defineSizeMapping(mappingadunitname970x250).addService(googletag.pubads());

This means DFP knows this ad slot allows for 970x250x 728x90 or 760x120 depending on screen being more than 1300 wide, 728x90 if between 800 and 1300 or nothing it is less than 800 pixels wide.

If you traffic the inventory by direct sales then you can use that slot to any of these sizes (if they are defined in the ad slot in DFP)

What I found, and got confirmed by DFP support, is that if the ad unit is AdSense enabled then only the first size of the selected width is sent to AdSense.

This means that instead of AdSense paying the highest of any size, it will pay the highest of the first size. This will impact your revenue as I found out - I had 970x250 first and my AdSense revenue dropped 50%. The reason is that 970x250 is mainly text while 728x90 is mainly images, with more advertisers competing for that.

csdude55

7:34 am on May 21, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks, freitasm, that's very helpful! I googled sizeMapping(), and it's wildly confusing, but I think I've got the gist of it.

One question, though. When you define the slot: 

googletag.defineSlot('/1003454/DFPADUnitName',...


I see that you only plug in the name of one unit in the inventory ("DFPAdUnitName"). But would you, in fact, have 3 units created? One of 970x250, one for 728x90, and one for 760x120? If so, wouldn't they all have 3 different names? Do you just plug in the name of the first one in the list (in your example, the 970x250) or what?

csdude55

8:41 am on May 21, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Nevermind, I figured it out! In DFP, you create an ad unit and then assign multiple sizes to it. That makes sense now :-)

freitasm

11:01 am on May 21, 2017 (gmt 0)

10+ Year Member Top Contributors Of The Month



Correct. One ad unit, three sizes. In the mapping unit you define what sizes to show depending on the width of the page. You can then assign this to the defineSlot. You can then traffic your own sales to this inventory, by size or let AdSense show by default (but only first size will be considered for AdSense auction, so chose carefully).

Enjoy...

Samsam1978

12:41 am on May 23, 2017 (gmt 0)

5+ Year Member Top Contributors Of The Month



I know this sounds crazy but I really don't know how to set this up.

Does anyone know where I can find the network id?

csdude55

2:54 am on May 23, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Log in to DFP, and in the upper right corner it shows your company name, then a (xxxx) beside of it. The number in the () is your network ID.

You can also click on Admin, and it shows under "Network code".

You're not crazy, man, working with DFP is the LAST thing I wanted to do! Hopefully it'll make sense after working in it for awhile, but as of right now it's confusing as all-get-out.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Search Engines and SEO / Google AdSense - Display Ads 11:03 am May 21, 2026