How do I setup DFP GPT ad slot for multiple ad placements on same page?

Question

I am new to Google Ad Manager (DFP) and need little help in setting up structuring my DFP inventory and implement it on page. CONSIDERING my website is a small news website, I've 5 sections of my website - World/Business/Politics/Entertainment/Sports. and every section has atleast 3-5 ad placements including some placements with same size i.e. sports section has two 300x250 placement whereas politics section has three 728x90 placements.

The approach I've taken was creating five ad slots in DFP as following -

/12345678/website.com/world /12345678/website.com/sports /12345678/website.com/business /12345678/website.com/entertainment /12345678/website.com/politics

Now the bigger challenge I am facing here to determine, should I call

googletag
      .defineSlot('/12345678/website.com/sports',
                  [[300, 250], [728, 90], [300, 250]], 'div-gpt-sports12345')
      .addService(googletag.pubads());

Will my page body be coded as -

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.defineSlot('/21871128741/teststack', [[300, 250]], 'div-mrec1').addService(googletag.pubads());
    googletag.defineSlot('/21871128741/teststack', [[300, 250]], 'div-mrec2').addService(googletag.pubads());
    googletag.defineSlot('/21871128741/teststack', [[728, 90]], 'div-lb728x90_1').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>


<!-- /21871128741/teststack/300x250 -->
<div id='div-mrec1' style='width: 300px; height: 250px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-mrec1'); });
  </script>
</div>


<!-- /21871128741/teststack/300x250 -->
<div id='div-mrec2' style='width: 300px; height: 250px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-mrec2'); });
  </script>
</div>

<!-- /21871128741/teststack/300x250 -->
<div id='div-lb728x90_1' style='width: 728px; height: 90px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-lb728x90_1'); });
  </script>
</div>

I've also tried another version by calling the gpt ad slot using thier unique child ad units .

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.defineSlot('/21871128741/teststack/mrec1', [[300, 250]], 'div-mrec1').addService(googletag.pubads());
    googletag.defineSlot('/21871128741/teststack/mrec2', [[300, 250]], 'div-mrec2').addService(googletag.pubads());
    googletag.defineSlot('/21871128741/teststack/lb728x90_1', [[728, 90]], 'div-lb728x90_1').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>


<!-- /21871128741/teststack/300x250 -->
<div id='div-mrec1' style='width: 300px; height: 250px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-mrec1'); });
  </script>
</div>


<!-- /21871128741/teststack/300x250 -->
<div id='div-mrec2' style='width: 300px; height: 250px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-mrec2'); });
  </script>
</div>

<!-- /21871128741/teststack/300x250 -->
<div id='div-lb728x90_1' style='width: 728px; height: 90px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-lb728x90_1'); });
  </script>
</div>

Answer 1

Regarding your needs, you have to define multiple slots for the same page :

• banner = [728, 90]
• mpu1 = [300,250]
• mpu2 = [300,250]

Each defined slot is linked to a div ID (as detailed here) :

googletag.Slot googletag.defineSlot(adUnitPath, size, opt_div) 

where :

• adUnitPath /string/ : Full ad unit path with the network code and unit code.
• size /array/ : Width & Height of the sizes allowed to be call in this slot
• opt_div /string/ : ID of the div that will contain this ad unit.

In your code sample, you try to use the same div ID 3 times in the same DOM, and you only declare one adslot... What you should do is more something like :

//banner definition
googletag.defineSlot('/12345678/website.com/sports',[[728, 90]], 'div-banner').addService(googletag.pubads());

//mpu1 definition
googletag.defineSlot('/12345678/website.com/sports',[[300, 250]], 'div-mpu1').addService(googletag.pubads());

//mpu2 definition
googletag.defineSlot('/12345678/website.com/sports',[[300, 250]], 'div-mpu2').addService(googletag.pubads());

In this case, the adserver will generate 3 adcalls (one for each placement defined and displayed).

To make sure you will we able to include or exclude one of the mpus on the page, you could add key-values such as :

• banner = [728, 90]
• mpu1 = [300,250], position = 1
• mpu2 = [300,250], position = 2

To do so, you will have to setTargetings on each mpu slot (here for details) :

//mpu1 definition
googletag.defineSlot('/12345678/website.com/sports',[[300, 250]], 'div-mpu1').setTargeting('position', '1').addService(googletag.pubads());
    
//mpu2 definition
googletag.defineSlot('/12345678/website.com/sports',[[300, 250]], 'div-mpu2').setTargeting('position', '2').addService(googletag.pubads());