What is the best way to lazy load doubleclick ads that use document.write?

Question

Ads requested via doubleclick often get served from an ad provider network that returns javascript that in turn performs document.write to place ads in the page. The use of document.write requires that the document be open, implying that the page hasn't reached document.complete. This gets in the way of deferring or lazy loading ad content. Putting such code at page bottom is helpful but doesn't do enough to lower all-important "page-loaded" time. Are "friendly iframes" the best we have? Is there any other alternative such as a clever way to override document.write that preserves the proper place in the dom?

Third party ads use document.write to add script and content into the "current" location in a page. The page owner doesn't have control over ad scripts and can't specify a display target div. The ad script expects to write and render at the document position where it is called, so it's not obvious how to position the ad correctly using deferred dynamic script loading. Lazy loading script into context is straightforward, but third-party content rendered in place via document.write is not so easily achieved.

Seraphim

What's the downside of using iframes? They won't hurt you; they're your misunderstood friends. – Fid

Have you tried to override document.write? Works ok. jsbin.com/ijowo4/edit – Exocarp

iframes are convenient, and I do consider them my friends :) but they come with a performance penalty. However, that's a fine tradeoff to get deferred loading and to avoid blocking the base page download. Chrome has a <frag> tag that may supplant <iframe> in the future, but for now, it's iframes. blog.scandinabox.com/… – Seraphim

one downside to using iframes is that the iframes block the parent page onload event. So, I get parallel downloading, but high latency ad requests will hamper the base page load performance. – Seraphim

Answer 1

postscribe.js by krux, as demonstrated at the HTML5 Dev Conference.

http://krux.github.com/postscribe/doc/postscribe.html https://npmjs.org/package/postscribe

Seraphim

Answer 2

OK, so there are basically two primary ways in which an ad is rendered to the screen.

1. Using a Javascript include and some variables.
2. Using an iFrame that you place on the page.

And honestly, the Javascript normally just renders an iFrame. Ad Networks want the iFrame b/c it gives them the easy ability to drop cookies (has this user seen this ad elsewhere on the network) and it's easy to drop impression pixels (method of counting that page was rendered).

So here's your best bet.

1. Figure out the iFrame URL that is being rendered. Some networks will tell it to you directly if you ask nicely.
2. Place the iFrame on your canvas / html with the appropriate size (e.g. 728x90), but point it to a known URL on your domain that is blank. (or has a background color that matches your page).
3. Add the javascript that updates the SRC of the iFrame at the appropriate time.

iframe.src = 'myurl?'; iframe.reload();

That should be all that you need to do. Set it up so that everything else loads and then load the advertising iFrames last.

Note that this may affect your revenue from the ads. It depends on the user experience, but if the ads don't load until the user has scrolled them off the screen, then you won't get clicks or make money.

Also, keep an eye on ad network performance. I know that these guys have pretty good response times, but there are lots of ad networks and sometimes even the big guys have crappy response times.

Cristophercristy

Answer 3

I will give you another solution without using iframe. See http://github.com/shenjunru/LazyWrite

It will help you to defer the document.write()

Lemaster

Answer 4

I get used to render the ads at the bottom of the page in a hidden div and moving them with javascript.

something like this wherever you want to put your ads:

<div id="destid" style="width:350px; heigh: 200px"></div>

and at the end of the page:

<div style="display:none">   
    <script type="text/javascript"> 
    document.write("<div id='srcid'>");
    //your doubleclickcode
    document.write("</div>");
    </script>
<script type="text/javascript"> 
    $("#srcid").appendTo("#destid");
</script>
</div>

Wise

I do this too. Works great for me, and keeps the page loading smoothly when they decide to not want to respond quickly. – Datestamp

This doesn't sound very compliant. Pretty sure hiding ads and moving them is against Doubleclick policies. – Amoebocyte

Answer 5

The iframe method will work fine unless you are serving rich media ads. These are the type of ads that are generally flash based and, in some cases, expand out of their container. If you use iframes the rich media ads are restricted to the container (iframe).

The best way to accommodated all possible ads is to use the script method.

Devonna

Answer 6

So there seems to be a standard forming around this called friendly iframes (FIF). It feels a bit like a hack but I feel better that the IAB is behind it.

Here's the documentation from the IAB: http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf

It worked for me, and even though you are writing the js dynamically into an iframe, it still allowed the rich media ads to expand outside their space.

Nicholasnichole

Answer 7

I solved the problem with an iframe. I replaced the script tag with an iframe that points to a simple page on my server that contains the script tag.

I replaced the tag

<script src="ad provider's url containing document.write()" type="text/javascript">
</script>

with

<iframe src="adpage.htm" style="border:none;width:...height:..."></iframe>

adpage.htm simply contains:

<html><head></head>
<body style="margin:0px;">
<script src="ad provider's url containing document.write()" type="text/javascript">
</script>
</body></html>

Pectoral

are you still using this method?, also how do you add an iframe tag in the head? im asking since the google ad script is asked to be added at the end of head tag – Ilanailangilang

Answer 8

Did you mean Lazy load ads with Document.write Then This is the best way Add the Lazy loader to Head

Wrap the Ad with Document.write in LazyHTML Wrapper

<div class="lazyhtml" data-lazyhtml>
  <script type="text/lazyhtml">
  <!--
  
Your Adcode with Document.write  (including wrapping <script>,<style> tags)
  
  -->
  </script>
</div>

More info: LazyHTML Github

Retiform