DoubleClick for publishers: Displaying responsive ads

Question

Here is my current code.

// Head
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
</script>
<script>
    googletag.cmd.push(function() {
        googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
</script>

// Body
<div style="width:100%;text-align:center;margin-bottom:10px">
    <div id='div-gpt-ad-1545041384304-0'>
        <script>
             googletag.cmd.push(function() { googletag.display('div-gpt-ad-1545045413584304-0'); });
        </script>
    </div>
</div>

But it displays the banner in side iframe with fixed width & height.

How can I make this responsive? Previously I was using custom html with sync rendering, but it is deprecated now.

What would be the best way to achieve this?

I have followed - https://support.google.com/admanager/answer/3423562?visit_id=636827968345729217-1005578671&hl=en&rd=2

But for this I have to mention every height and width of screens.

Answer 1

Most adverts which are trafficked through DFP are not responsive in the traditional sense, the reason for this is because an advertisement is essentially just a static image. Because of this what you'll need to do is define a size map which tells DFP which adverts it should fetch at specific screen sizes when it loads.

In this part of your code you're saying that this slot can load either a 728x60 or a 375x60 sized ad, this will be chosen either at random or with a specific priority depending on how it's configured in DFP.

googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads())

You need to update the code to include a size mapping, letting it know that it should fetch an appropriately sized ad for the size of the screen that is viewing the content.

You can do this using google tags defineSizeMapping method.

var mapping = googletag.sizeMapping().
  addSize([100, 100], [88, 31]). 
  addSize([320, 400], [[320, 50], [300, 50]]). 
  addSize([320, 700], [300, 250]).
  addSize([750, 200], [728, 90]). 
  addSize([1050, 200], [1024, 120]).build();

googletag.defineSlot('/6355419/travel', [[980, 250], [728, 90], [460, 60], [320, 50]], 'ad-slot')
  .defineSizeMapping(mapping)
  .addService(googletag.pubads())
  .setTargeting('test', 'responsive'); // Targeting is only required for this example.

Each addSize call requires two arguments. In the example below the first is an array telling DFP that it should use this sizemap at the browser width/height of 375 / 60 (You can set height to 0 if you only care about width), and the second argument is telling DFP that it should load a 320x50 or a 300x50 ad when the browser size requirement is met.

addSize([320, 400], [[320, 50], [300, 50]])

The browser sizes are minimums, meaning that in this following example if the browser size is 1028 wide or larger it will load a 728x90 ad, and anything below 1028 wide will load a 320x50 ad.

.addSize([1028, 0], [[728, 90]])
.addSize([0, 0], [[320, 50]])

DFP will only check the browser size on initial load, it will not refresh by default when you resize the screen. You can use another DFP helper method to refresh the ad slot but you'll need to write additional logic which checks the size of the screen first.

googletag.pubads().refresh(['ad-slot'])

Here is an example of how this works together with multiple sizemap breakpoints, you'll need to save this as a HTML file and try it locally as the iFrame that JSFiddle and Codepen uses causes it to behave incorrectly. Load up the page, resize the screen, and then reload it again, you'll get an appropriately sized advertisement depending on your browsers current size.

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

<script type='text/javascript'>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];

</script>

<script type='text/javascript'>
  googletag.cmd.push(function() {
  // Defines the size mapping, there are multiple examples here.
  var mapping = googletag.sizeMapping().
    addSize([100, 100], [[88, 31]]). 
    addSize([320, 400], [[320, 50], [300, 50]]). 
    addSize([320, 700], [[300, 250]]).
    addSize([750, 200], [[728, 90]]). 
    addSize([1050, 200], [[1024, 120]]).build();

    // Enables async rendering and single request.
    googletag.pubads().enableSingleRequest();
    googletag.pubads().enableAsyncRendering();

    // Here the slot is defined, the smallest advert should be defined as the slot value
    // as this gets overwritten by the defineSizeMapping call.
    googletag.defineSlot('/6355419/travel', [320, 50], 'ad-slot')
      .defineSizeMapping(mapping)
      .addService(googletag.pubads())
      .setTargeting('test', 'responsive'); // Targeting is only required for this example.

    // Tells the advert to display.
    googletag.enableServices();

  });

</script>


<div id='ad-slot'>
  <script type='text/javascript'>
    googletag.cmd.push(function() {
      googletag.display('ad-slot');
    });
  </script>
</div>

You can find some more examples of size mapping here and a definition of all googletag methods here.

Alternatively you can choose to traffic native ads which are responsive, but you'll require the ad creative to support it as most ads are not built this way. You can learn more about native ads here and here. They get served very similarly.

googletag.defineSlot('/6355419/travel', 'fluid', 'ad-slot')

Answer 2

I read the documentation and I got the solution for the problem and this is the sample solution from the documentation:

var slot = googletag.defineSlot('/1234567/sports', [160, 600], 'div-1').
    addService(googletag.pubads());
var mapping = googletag.sizeMapping().
    addSize([100, 100], [88, 31]).
    addSize([320, 400], [[320, 50], [300, 50]]).
    build();
slot.defineSizeMapping(mapping);

In your case I edited your code so it should work this way. You can adjust it according to the screens that you want to target:

<script>
    googletag.cmd.push(function () {
     var adSlot = googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads());
      var mapping = googletag.sizeMapping().
        addSize([1024, 768], [970, 250]).
        addSize([980, 690], [728, 90]).
        addSize([640, 480], [120, 60]).
        addSize([0, 0], [88, 31]).
        // Fits browsers of any size smaller than 640 x 480
        build();
      adSlot.defineSizeMapping(mapping);

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

For more information you can check this link: https://developers.google.com/doubleclick-gpt/reference#googletagslot