Collapse empty ad slots

By default, ad slots which are not filled are left visible, which may result in blank space on your page. If you know ahead of time that one or more ad slots on your page are unlikely to get filled, you can instruct the Google Publisher Tag (GPT) library to collapse them.

The optimal configuration of this feature will depend on how often you expect ad slots to be filled:

  1. If slots will be filled most of the time, use PubAdsService.collapseEmptyDivs(). In this configuration, ad slots are expanded by default and collapse only if they cannot be filled.
  2. If slots will not be filled most of the time, use PubAdsService.collapseEmptyDivs(true). In this configuration, ad slots are collapsed by default and only expand if they can be filled.

It's also possible to configure per-slot overrides, as shown in the example below, if specific slots on your page are more or less likely to be filled.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collapse empty ad slots</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
        // Configure all ad slots on the page to be expanded by default, but
        // collapse slots that are unable to be filled with an ad.
        googletag.pubads().collapseEmptyDivs();

        // The above setting assumes all ad slots are likely to be filled.
        // If ad slots are not likely to be filled, pass true as a parameter as
        // shown below. In this configuration, slots will be collapsed by
        // default and expanded only if they are able to be filled.
        // googletag.pubads().collapseEmptyDivs(true);

        // This slot will use the page-level settings configured above.
        googletag.defineSlot('/6355419/Travel', [300, 250], 'ad-slot-1')
            .setTargeting("test", "responsive")
            .addService(googletag.pubads());

        // Configure per-slot overrides.
        // This slot will be expanded by default, but collapse if it cannot be
        // filled.
        googletag.defineSlot('/6355419/Travel', [250, 200], 'ad-slot-2')
            .setTargeting("test", "responsive")
            .setCollapseEmptyDiv(true)
            .addService(googletag.pubads());

        // This slot will be expanded by default and never collapse.
        googletag.defineSlot('/6355419/Travel', [200, 150], 'ad-slot-3')
            .setTargeting("test", "responsive")
            .setCollapseEmptyDiv(false)
            .addService(googletag.pubads());

        // This slot will be collapsed by default and only expand if it can be
        // filled.
        googletag.defineSlot('/6355419/Travel', [150, 100], 'ad-slot-4')
            .setTargeting("test", "responsive")
            .setCollapseEmptyDiv(true, true)
            .addService(googletag.pubads());

        // Enable SRA and services.
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
      });
    </script>
    <style>
      div.ad-container {
        border: solid;
      }

      div.ad-slot {
        border-style: dashed;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="ad-container">
      <p>Ad slot #1</p>
      <div id="ad-slot-1" class="ad-slot" style="width: 300px; height: 250px;"></div>
    </div>

    <div class="ad-container">
      <p>Ad slot #2</p>
      <div id="ad-slot-2" class="ad-slot" style="width: 250px; height: 200px;"></div>
    </div>

    <div class="ad-container">
      <p>Ad slot #3</p>
      <div id="ad-slot-3" class="ad-slot" style="width: 200px; height: 150px;"></div>
    </div>

    <div class="ad-container">
      <p>Ad slot #4</p>
      <div id="ad-slot-4" class="ad-slot" style="width: 150px; height: 100px;"></div>
    </div>

    <script>
        googletag.cmd.push(function() {
          googletag.display('ad-slot-1');
        });
      </script>
  </body>
</html>