How to really Post Load Google Ads (while keeping document.write happy & page rendering snappy)

So you have a web page and it is getting some hits. One day, you decide you might as well earn some pennies off that traffic and began copy-pasting some Google Ads into it.

But you know, Google Ads suck. They use document.write. Yep, the things we were warned against. But that's not all. Their document.write actually pulls in more javascript, which in turn say "weeeeell, while we're at it!" and start to do even more document.write! (In this aspect, Microsoft ads seem more thoughtful, or it seems from Digg's homepage).

Anyways, this chokes the browser & makes them stutter. Your web page now renders to your audience in stops and starts:

some content appear > ads appear (stall) > more content appear > ads appear (stall) > rest of content appear

A necessary evil? There are a few things that will fix to a certain extent: 1) use "script defer" or 2) hacking document.write. Not ideal in terms of fragility, and subsequent maintenance of ads embed codes.

Let's look at the problem again: 1) Google wants you to paste the script where the ad appears, 2) Wherever the script is pasted, the browser will stutter & stall the content that comes after it.

For #2, maybe the "solution" is to paste the script AFTER all content? But wait -- doesn't that mean #1 the ads get rendered there & not where I want them? Yes, but only initially.

Why not reposition these ads to where they're supposed to be after they are constructed:

all content appear > ads appear (below the fold, stall) > ads appear in position

Let's say that works, unfortunately it sound convoluted & a hassle, the site has too many existing ads to migrate & our guy managing the ads doesn't code, he just copies whatever Google provides & blah blah blah...

That's what the postload_google_ads Rails plugin is for :-) site-wide benefit for minimum fuss (upfront & subsequently)

To see it in action, see this demo. Click on "Before" and "After". They 2 pages are essentially the same, but only one of them applies an "after_filter":

The postload_google_ads plugin is an "after_filter" in Rails. This means that after your webapp has done its thing & generated the dynamic HTML, the after_filter transplant the ads' script tag to the bottom of the DOM tree, leaving behind some placeholders. This modified html is then sent back & rendered on the user's browser. After all your content renders, the ads will construct themselves (document.write all they want). After the ads are done, a little javascript repositions the rendered ads based on the absolute position of their corresponding placeholders.

Until ads nework catch up to use unobtrusive javascript, I guess I'll have to settle for this.

Comments

[Herry]

Sweeet!!

[khigia]

Very nice indeed!

[Peter Giovane]

I like that

[OJIMA]

Excuse me if i am wrong but... This method only demonstrates that you can shift the code to the bottom of the page instead of having to put it in the head. I have done this method too, and just removed it again, since it does not help. At least if the goal is to increase loading speed. In fact, it makes things 'worse', that is extra code, repositioning and prob some more... 'Best way' i found until now is using iframes, which i do not like. So, you make for each ad-block a separate page and that one you can render whatever way you like. But that i find annoying, since i have multiple sites and looooots of ad-slots. So, for me, i still have to find a solution what really makes your ad-slots load after onload without the use of iframes. Hopefully Google will add an asynchrone loading option, like they have done now with Google analytics...

[choonkeat]

If you use iframes, you lose the use of context & content of the current page as hints for the ads itself.

Fear not, Google had indeed launched asynchronous api not too long ago http://googlecode.blogspot.com/2009/12/google-analytics-launches-asynchronous.html