Asynchronous google ads versus Synchronous

Question

I'm using google DFP.

If I use synchronous ads from google, my site loads slowly as it needs to load the ad at the same time it loads the website, and if an ad takes long to respond, then the load of the page gets paused.

If I use asynchronous ads, this is not a problem since the page will load wether or not ads are loaded. In other words, it makes the site load faster. The thing is, using asynchronous ads creates a div with fixed width and height no matter if there are ads displaying or not. So usually this creates a lot of blank space on my site, since not all ads position are being used. Same goes with synchronous ads.

Google offers a third choice that doesn't create a div, it just uses javascript to display ads, and if there aren't any ads publishing in that space, then it just doesn't display any blank space, which is good, however it behaves synchronously...

What I want is some method to use asynchronous ads and not get blank spaces in case no ad is publishing.

Thanks.

Answer 1

I think what you're looking for is

googletag.pubads().collapseEmptyDivs();

That will hide the empty divs when there are no ads to show. Call it before this line:

googletag.enableServices();

More documentation here, for reference: http://support.google.com/dfp_premium/bin/answer.py?hl=en&answer=1650154

Answer 2

Try this:

<div id='div-gpt-ad-YOURDFPIDGOESHERE-1' style='width:auto; height:auto; margin:0px auto; text-align:center;'>

That should stretch or shrink the div to match the creative dimensions (and even center smaller ads in a bigger adslot)

Answer 3

Add display: none; as in inline style to the containing div.

The collapseEmptyDivs method adds an inline style of display: none; to the parent container div. To prevent the flash of extra whitespace, I first tried adding display: none; as a css style in my stylesheet, but the style wasn't removed when the ads were loaded into the target ad unit space successfully. Moving the display: none; inline seemed to remediated the problem.

Answer 4

well.. you can try a workaround..i am not exactly sure. but you can give it a try..

You have the DIV where your ads will be loaded asynchronously, so you can add an element into it, any dummy item and attach event listener to know when it will be replaced by your ads.

you can listen to DOMNodeRemoved event which is fired when node is removed, and you can resize your div accordingly then .. let me know if it works or any progress in this.