Changing Ad Size Based On Browser Width In Dfp

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

Solution 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>

Solution 2:

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

Solution 3:

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/