Collapsing empty div elements

If you're using the asynchronous mode of Google Publisher Tags (GPT) and know that one or more ad slots on your page don't always get filled, you can instruct the browser to collapse empty divs by adding the collapseEmptyDivs() method to your tags. This method may trigger a reflow of the content of your page, so how you use it depends on how often you expect an ad slot to be filled.

If you don't use the collapseEmptyDivs() method, divs will never collapse, so the page content will never be reflowed. However, this may leave a blank space on the page if an ad isn't served to one of its ad slots.

Collapse empty divs at the page level

If ad slots will get filled most of the time:

Add googletag.pubads().collapseEmptyDivs(); to the <head> portion of your page to collapse a particular div only when an ad doesn't serve to its ad slot. If a slot isn't filled, the div collapses, possibly moving the page content up with it and reflowing the page.

If ad slots will stay empty most of the time:

Add googletag.pubads().collapseEmptyDivs(true); to the <head> portion of your page to collapse all divs on the page before the browser fetches any ads. When an ad request happens for a slot, if the particular slot is filled, the div expands, possibly pushing down the page content and reflowing the page.

If ad slots will always stay empty on a page:

Don't specify the collapseEmptyDivs() method at all. The divs will never collapse ,so the page content will never be pushed down or pulled up; however, this may leave a blank space on the page if an ad doesn't serve to a particular slot.

Specify slot-level overrides

Override the page-level method by specifying one of three slot-level methods:

Don't collapse this slot

Add adSlot.setCollapseEmptyDiv(false); to the slot:

<script>
  googletag.cmd.push(function() {
  googletag.defineSlot("/1234/travel/asia/food", [728, 90], "div-gpt-ad-123456789-0")
    .addService(googletag.pubads())
    .setTargeting("interests", ["sports", "music", "movies"])
    .setCollapseEmptyDiv(false);
  });
</script>

Collapse this slot after ad fetch

Add adSlot.setCollapseEmptyDiv(true); to the slot:

<script>
  googletag.cmd.push(function() {
  googletag.defineSlot("/1234/travel/asia/food", [728, 90], "div-gpt-ad-123456789-0")
    .addService(googletag.pubads())
    .setTargeting("interests", ["sports", "music", "movies"])
    .setCollapseEmptyDiv(true);
  });
</script>

Collapse this slot before ad fetch

Add adSlot.setCollapseEmptyDiv(true,true); to the slot:

<script>
  googletag.cmd.push(function() {
  googletag.defineSlot("/1234/travel/asia/food", [728, 90], "div-gpt-ad-123456789-0")
    .addService(googletag.pubads())
    .setTargeting("interests", ["sports", "music", "movies"])
    .setCollapseEmptyDiv(true,true);
  });
</script>
Was this helpful?
How can we improve it?