Using Jsonp To Prevent Document.write() From Blocking Page Render Options

[KyleK]

I recently started working with OpenX and discovered that using the javascript invocation codes--which allow for companion ads and non-duplicate ads--depend on document.write() to write script blocks to the page to display the ad anchors/images. Since, document.write() can only write to the current location in the document flow, ad tags cannot be lazy loaded after all page content has been rendered.

My solution to this problem was to use JSONP to wrap the ad html string in a callback function. Since I am using the javascript invocation tags, I edited ajs.php to return an html string wrapped in my callback function:

CODE

echo $_GET['callback'] . '("'.$output['html'].'");';

$_GET['callback'] retrieves the callback parameter from the url query string, ex. adserver.com/zoneid=1&callback=renderAds

Instead of returning something like:

CODE

var OX_81891ae6 = '';
OX_81891ae6 += "<"+"a href=\'http://adserver.com/www/delivery/ck.php?oaparams=2__bannerid=10__zoneid=3__cb=b7efeefa0a__oadest=http%3A%2F%2Fwww.test.com%2Fapps\' target=\'_blank\'><"+"img src=\'http://img.adserver.com/89c02df07c3ab7bdc5e4cfbcf1f2fb4d.jpg\' width=\'250\' height=\'250\' alt=\'\' title=\'\' border=\'0\' /><"+"/a><"+"div id=\'beacon_b7efeefa0a\' style=\'position: absolute; left: 0px; top: 0px; visibility: hidden;\'><"+"img src=\'http://adserver.com/www/delivery/lg.php?bannerid=10&amp;campaignid=8&amp;zoneid=3&amp;loc=http%3A%2F%2Ftest.com%2F&amp;cb=b7efeefa0a\' width=\'0\' height=\'0\' alt=\'\' style=\'width: 0px; height: 0px;\' /><"+"/div><"+"script type=\'text/javascript\'>document.context=\'YjoxMHw=\'; <"+"/script>\n";
document.write(OX_81891ae6);

The JSONP method returns:

CODE

renderAds("<a href=\'http://adserver.com/www/delivery/ck.php?oaparams=2__bannerid=10__zoneid=3__cb=b7efeefa0a__oadest=http%3A%2F%2Fwww.test.com%2Fapps\' target=\'_blank\'><img src=\'http://img.adserver.com/image.jpg\' width=\'250\' height=\'250\' alt=\'\' title=\'\' border=\'0\' /></a><div id=\'beacon_b7efeefa0a\' style=\'position: absolute; left: 0px; top: 0px; visibility: hidden;\'><img src=\'http://adserver.com/www/delivery/lg.php?bannerid=10&amp;campaignid=8&amp;zoneid=3&amp;loc=http%3A%2F%2Ftest.com%2F&amp;cb=b7efeefa0a\' width=\'0\' height=\'0\' alt=\'\' style=\'width: 0px; height: 0px;\' /></div>")

On my webpage that contains the ad banners, I created custom tags

CODE

<ad zone="1"></ad>

When the page content has finished loading, I use javascript to grab the zone parameter off each <ad> tag and make a request to the ad server. When the request returns, the adRender function replaces the <ad> tags with a div containing the html string.

Does anyone have thoughts on my approach to solve this problem? Have you had any success with something similar or other alternative methods (jQuery plugin, writeCapture, etc.)?

[rakshan]

Have you looked at the single-page-call method? (spc.php or spcjs.php instead of ajs.php)

[KyleK]

I've looked into using SPC previously, but it seems SPC also is unable to avoid the render blocking problem. I'm looking into making similar changes to spc.php and spcjs.php in order to reduce the load on the ad server.