1

In DFP Small Business / DoubleClick, I generated the following ad tag for an ad unit with three different sizes along with one creative for each specified sizes. So there are three different sizes for the ad unit and when you hit refresh the ad changes into one of my three specified ad sizes. This works fine, but its not what I want the ads to do,

I want the ads to do this:

I want the ads to change sizes based on browser width, so for example, if the viewers browser width is greater than 800px then show the ads at the biggest specified size, if the browser width is between 600-800, then use the second biggest specified sizes for the ads and finally, if the ads are smaller than 600px then use the smallest ad size... the ads should change size accordingly on browser width change. 800, 600-800 and less than 600 aren't the actual sizes, just example sizes, but anyways the three ad sizes are specified in this line:

googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207], [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());

Here is the full code:

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
 gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + 
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

 <script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207],     [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>

<!-- Different-Sizes-Unit-Test -->
<div id='div-gpt-ad-1363309773051-0'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1363309773051-0'); });
</script>

`

Here is the jsfiddle for this code (hit run or refresh to see the ads randomly change sizes):

http://jsfiddle.net/Zkm5j/

So again, I'd like the ads to change sizes accordingly on browser width size / change. If anyone could help me come up with a method to achieving this, it would truly mean a lot to me! :)

2
  • When I try to load that jsfiddle, I don't see anything in the result window. The request to load the Google JS file fails. For the purposes of SO, it is often better to rephrase the question and remove the need to load any external dependencies (unless they themselves are the problem in question). Basically, reduce the problem to its core elements and mock that up in the jsfiddle. In any case, you should be able to do this by selectively adding/removing classes to the ad containers based on the browser size and have those CSS classes define different widths. Mar 15, 2013 at 23:43
  • @RubenInfante Hey Ruben, the ad should show now... stackoverflow.com/questions/15452905/… there is a jsfiddle in there! But the thing about DFP (google ads) is that all there ads are in an iframe so you cant directly manipulate the image within the iframe. you have to upload images for each size ads you want. the part that i'm stuck on is loading the given google code for different browser widths, i explain it more in the question but thanks for the help so far man it means a lot.. all I need is to get this one little thing working :)
    – Dyck
    Mar 16, 2013 at 18:29

3 Answers 3

1

You should use the mapping functionality provided by DFP

Here is an example with 5 Ad Units on one page. Step 1: Define all possible sizes for each Ad Unit. Define these sizes it in the Ad Unit setup in DFP. Step 2: Decide which Ad Unit will use which sizes on which viewport. Create size mapping as shown in the code bellow with the variables megaboardsize firstsize and so on. Step 3: Define the slots and the appropriate defined mapping as shown bellow.

In the example, the sizes will be served in the ad units as follows: Ad Unit - example-megaboard: On devices with viewport width more than 970px: 970x90,970x250,728x90. On devices with viewport width more than 728px: 728x90. On all devices with smaller viewport: 320x100,320x50 Ad Unit - /XXX/example-300x250-1st: On devices with viewport width more than 920px: 300x250,300x600. On devices with viewport width more than 300px: 300x250. On all devices with smaller viewport: no ads.

And so on...

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

<script>
var gptAdSlots = [];
googletag.cmd.push(function() {

    var megaboardsize = googletag.sizeMapping().addSize([970, 0], [[970,90],[970,250],[728,90]]).addSize([728, 0], [728, 90]).addSize([0, 0], [[320, 100],[320,50]]).build();
    var firstsize = googletag.sizeMapping().addSize([920, 0], [[300,250],[300,600]]).addSize([300, 0],[300,250]).addSize([0, 0], []).build();
    var secondsize = googletag.sizeMapping().addSize([920, 0], [300,250]).addSize([0, 0],[]).build();  
    var thirdsize = googletag.sizeMapping().addSize([920, 0], [300,250]).build();  
    var fourthsize = googletag.sizeMapping().addSize([690, 0], [300,250]).addSize([0, 0],[]).build();

    gptAdSlots[0] = googletag.defineSlot('/XXX/example-megaboard', [[970, 90], [320, 100], [320, 50], [728, 90], [970, 250]], 'gpt-megaboard').defineSizeMapping(megaboardsize).addService(googletag.pubads());

    gptAdSlots[1] = googletag.defineSlot('/XXX/example-300x250-1st', [[300, 600], [300, 250]], 'gpt-1st').defineSizeMapping(firstsize).addService(googletag.pubads());

    gptAdSlots[2] = googletag.defineSlot('/XXX/example-300x250-2nd', [300, 250], 'gpt-2nd').defineSizeMapping(secondsize).addService(googletag.pubads());

    gptAdSlots[3] = googletag.defineSlot('/XXX/example-300x250-3rd', [300, 250], 'gpt-3rd').defineSizeMapping(thirdsize).addService(googletag.pubads());

    gptAdSlots[4] = googletag.defineSlot('/XXX/example-300x250-4th', [300, 250], 'gpt-4th').defineSizeMapping(fourthsize).addService(googletag.pubads());

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

You cannot really control the width of the line-item that will be served to the user based on his device width/height straight from dfp configuration.

What you can do is - . While triggering the ad specify the size according to the device width/height. For e.g if the device is smaller than 600px in width then only use the smallest ad size to trigger. E.g

 if(window.innerWidth < 800){
     googletag.defineSlot('ADID', [[292, 195]], 'domid')
  }

Check these two demo links, they trigger the same adunit with different sizes.

320x50 - http://tinyurl.com/q2x3562

300x250 - http://tinyurl.com/o3vx4qk

0

For me this post summarises the best options: http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website

I made a WordPress plugin based on #3: https://wordpress.org/plugins/responsive-ad-shortcodes/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.