Multiple Ad/Creative Sizes in DFP

Question

I'm wondering how one would go about creating different ad / creative sizes for different browser widths / screen resolutions in DFP. I found this DFP article regarding this issue, but it was specifically for mobile users, and they do not give any code, rather just a method. Here is the article:

http://support.google.com/dfp_premium/bin/answer.py?hl=en&answer=2615435

In it they give a code method that looks like this:

if screen size < 300px
ad tag size = 216
else if screen size < 600px
ad tag size = 300
else
ad tag size = 600

But this article was for mobile ads only. :( Here is a jsfiddle of my ad image: http://jsfiddle.net/EptwH/3/

If anyone could inform me on whether or not there is a method to have multiple creative/ad sizes for different browser widths, that would be amazing. And one more thing to add, I do not COMPLETELY want to change the ad dimensions, the ratio will stay the same... so for example, I'd like a 100x50 ad, then a 200x100, then a 300x150, then a 400x200 etc. If anyone could help me out, or let me know if this is even possible....that would be amazing!

Answer 1

If you see the JS code that DFP asks you to embed into your page, they are split into three "phases" :

• first you define the available slots on the page
• second you enable the service
• third you ask the slots to be filled.

In the very first step, you can have some conditional code. So you could replace this statement :

googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());

with a conditional :

if(window.width>728) {
   googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());
} else {
   googletag.defineSlot('/1234567/my_slot', [468, 60], 'gpt-apps-large').addService(googletag.pubads());
}

Edit: Bonus tip -- use the information here https://support.google.com/dfp_sb/bin/answer.py?hl=en&answer=181070 to debug your ad delivery.

Answer 2

For me simple window.width no working, but this good:

if(window.innerWidth>728) {
   googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());
} else {
   googletag.defineSlot('/1234567/my_slot', [468, 60], 'gpt-apps-large').addService(googletag.pubads());
}