Print

Google DFP Collapse empty div elements

Collapsing empty div elements

If you’re using the asynchronous mode of GPT in WP QUADS 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 Google Publisher Tags (GPT). This method may trigger a reflow of the content of your page, so how you use the method depends on whether or not the slot will get filled more times than not. You can use the method on a page-level or slot-level basis. Without the collapseEmptyDivs() method, divs will never collapse so the page content will never be reflowed but may leave a blank space on the page if an ad isn’t served to it.

Ad slots will get filled most of the time

When you know that your ad slots will get filled most of the time, you can add googletag.pubads().collapseEmptyDivs(); to the <head> portion of your page. This will collapse a particular div only when an ad is not served to its ad slot. If a slot isn’t filled, the div will collapse possibly moving the page content up with it and reflowing the page.

Ad slots will stay empty most of the time

When you know that your ad slots will stay empty most of the time, you can add googletag.pubads().collapseEmptyDivs(true); to the <head> portion of your page. This will collapse all divs on the page before the browser fetches any ads. When the ad request happens for the slot, if the particular slot is filled, the div will expand, possibly pushing down the page content and reflowing the page.

Ad slots will always stay empty

If you know that your ad slots will always be empty on a particular 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 isn’t served to a particular slot.

Slot-level overrides

You can 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>

Source: https://support.google.com/dfp_sb/answer/3072674?hl=en&ref_topic=1651546