Days
Hours
Minutes
Seconds

American Independence Day DEAL is here!
25% off on Everything for a very limited time

Claim The Offer Now

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

Powered by BetterDocs