OpenX jQuery plugin for ad tags invocation

Posted on by

This post is also available in: Russian

openx-jquery-lazy-load

Despite the fact that OpenX has discontinued release of new versions of OpenX Community Edition open-source ad server, still this server has a wide-spread user community. This is no surprise, as it is currently the most advanced and full-featured open-source Web ads server. In this article, we will show you how to improve ad tags invocation code for this server.

A standard JavaScript ad embed code for OpenX looks like this:

1
<!--/* OpenX Javascript Tag v2.8.8-rc6 */-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://openx.local/openx-now/www/delivery/ajs.php':'http://openx.local/openx-now/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=1");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://openx.local/openx-now/www/delivery/ck.php?n=a289d793&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://openx.local/openx-now/www/delivery/avw.php?zoneid=1&cb=INSERT_RANDOM_NUMBER_HERE&n=a289d793' border='0' alt='' /></a></noscript>

It is pretty sophisticated to make sense of it, especially for new users. In fact, if you need to change it, you’d better go to OpenX Manager and re-generate the code. Besides that, as it is based on document.write, you cannot load ads asynchronously without blocking page loading. It means that, if you have a banner at the top of your page, the page won’t load before the banner loads completely. As a result, your ad server becomes a bottleneck for the page load speed. We have already mentioned this issue in our post How to Optimize Client Side Ad Loading.

To solve the above issues and to tightly integrate OpenX ad invocation with jQuery library, we developed a plugin called OpenX Tag. This plugin is based on the jQuery library which has gained much popularity lately. This plugin allows us to avoid the cumbersome and unmaintainable standard ad invocation tag and use simple and concise JavaScript calls instead. The plugin is downloadable from the jQuery plugins website, and its development goes on Github.

The plugin features the following improvements over the standard OpenX tags:

  • The ads are inserted asynchronously, so that ad invocation code does not block page loading.
  • You can load several banners with just a single call.
  • You can set and override invocation tag parameters at several levels:
    globally for all ads loaded by the plugin, in the ad insertion JavaScript
    call, and in the ad placeholder class attribute using the jQuery Metadata
    plugin.
  • Callback on ad load.

The plugin was successfully tested with OpenX Community Edition version
2.8.8-rc6 (the most recent at the moment).

Use Cases

Before you can use the plugin, please load its Javascript code and the files required. Add the following lines inside your page head tag. Metadata plugin is optional.

1
2
3
<script src="jquery.min.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery.openxtag.min.js"></script>

Initiate the OpenX tag plugin with the required parameters:

1
2
3
4
$.openxtag('init', {
delivery: 'http://example.com/openx/delivery',
deliverySSL: 'https://example.com/openx/delivery'
});

Load the ad from OpenX zone 1 into Web page element with the “zone1″ ID.

1
$('#zone1').openxtag('zone', 1);

Use the “block” option to load ads from OpenX zone 1 into all elements with the “banner” class. “Block” instructs OpenX to skip banners that have already been loaded to the current
page. The function set in the third argument is called on ad load.

1
2
3
4
5
$('.banner').openxtag('zone', 1, {
block: true
}, function () {
console.log('loaded ad from zone ' + 1);
});

Set the ads load parameters in their HTML code.

1
2
<div class="banner {zoneID: 1, source: 'zone1'}"></div>
<div class="banner {zoneID: 1, source: 'zone2'}"></div>
1
2
3
$('.banner').openxtag('zone', function () {
console.log('loaded ad');
});

For more code samples, please download the plugin archive (see the Examples folder). We hope that this plugin will be useful for you. You feedback will be highly appreciated.

Update from 15-Jul-2011. Version 1.1

New features that were implemented in this version of plugin are Single Page Call and iFrame tag type. Now you can load ad invocation code for multiple banner zones on one page using only one request to OpenX server. Example:

1
2
3
$('.banner').openxtag('spc', function () {
    console.log('loaded ad');
});

Code used to load ads with iFrame tags is similar. But here you must also set width and height parameters of ad zone.

1
2
3
4
$('.banner').openxtag('iframe', 1, {
    width: 240,
    height: 400
});

Leave a Reply