You can use the Google Publisher Tag (GPT) to build responsive ads that fit the browser your visitors use to view your website. This means that your ads will look good whether your visitors are using
support.google.com
Collapse empty ad slots
If you 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, an empty <div> won't collapse and the page content will never be reflowed. This may result in a blank space on the page if an ad isn't served to one of its ad slots.
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.
Caution: Using this feature can trigger a reflow of the content of your page, so it should be used with caution.
The optimal configuration of this feature will depend on how often you expect ad slots to 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.
- If slots will be filled most of the time, use . In this configuration, ad slots are expanded by default and collapse only if they cannot be filled.
- If slots will not be filled most of the time, use . In this configuration, ad slots are collapsed by default and only expand if they can be filled.
Code:<!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>