OpenX jQuery plugin for ad tags invocation

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
});

22 thoughts on “OpenX jQuery plugin for ad tags invocation

  1. Hi,
    Nice work there! I appreciate your efforts for the community of users of OpenX Source, which runs into the hundreds of thousands world wide.
    One downside of doing calls to ajs.php is that you’ll have to do one call for each of the zones on your pages. If you have many zones, that means many calls to the ad server.
    There is a much better alternative called Single Page Call, which I’ve described on my blog at http://www.openxconsultant.com/blog/2011/05/benefits-of-openx-single-page-call-for-maximum-site-speed/
    Have you considered doing a version of your code for single page call?
    Best regards, Erik Geurts – OpenX Specialist

  2. Thanks for your feedback! Yes, we thought about implementing other tag types in future versions of the plugin and will definetely do it. Another possibility is to patch OpenX to implement our own tag types. For example, ads can be delivered using WebSocket API. This will allow to bypass ad blockers and make less requests to the server.

  3. This is great, and it’s exactly what I’ve been looking for.

    But I’m using OpenX’s OnRamp service, so it won’t allow the SPC javascript to be loaded via ajax. (get an “Access-Control-Allow-Origin” error)

    I REALLY wish I could use this. Thanks anyway.

  4. Thanks for your feedback.
    I don’t have experience working with OnRamp version of OpenX, but from what I understand it is similar to Source version. The issue that you’ve mentioned actually can affect Source version too, although to a lesser degree, because you have more control over your own installation. I’ll look further into it. For now as a workaround you can try to use iFrame tags, which are not affected by this problem.

  5. Great work and a very useful feature OpenX ommited for some reason.

    One newbie question though – where do I put the banner parameters like align or site variable using this code?

  6. You can add your own custom parameters to the ad request using ‘extra’ option. For example,

    $(‘#zone1′).openxtag(‘zone’, 1, {
    extra: {name1: ‘value1′, name2: ‘value2′}
    });

    To use this feature get the latest version from github.

  7. Great work … i was looking for something like that… but i have a little question …

    can i use “extra” property in the SPC function? i mean … i have this class=”glr-ad { ‘zoneID’: ’96′, ‘extra’: { ‘var’: ‘home’}}”

    and in my js file have this:

    jMozz(‘.glr-ad-openx’).openxtag(‘spc’, function(){});

    i cannot make this work … is it the right way??

  8. ohhh the css class is glr-ad-openx in both cases .. and still not work … is it correct?

  9. The mechanism behind SPC calls does not allow to set separate parameters for each zone that is requested inside single SPC call. Because of this, metadata parameters that are set inside class attribute do not work for SPC (except zoneID). You should set those parameters in your jMozz(‘.glr-ad-openx’).openxtag(‘spc’, { extra: { … } }, function () {});
    And all parameters will be applied to all zones if you have more than one .glr-ad-openx.

  10. Thanks for the reply … i didnt see this post again because i found a way to set extra variables in the init method too. :D

    Now, i notice something about this SPC call, when i use this function … i have a response response like this:

    OA_output['z6'] = ”;
    OA_output['z6'] += “\n”;

    where [OPENX] is my ADServer, well this works fine! but i the same response i have something like this:

    OA_output['z7'] += “\n”;
    OA_output['z7'] += “\n”;
    OA_output['z7'] += “flowplayer(\”a.player\”, \”http://[OPENX]/www/delivery/fc.php?script=deliveryLog:vastServeVideoPlayer:player&file_to_serve=flowplayer/3.1.1/flowplayer-3.1.1.swf\”, {\n”;
    OA_output['z7'] += “playlist: [ \'http://ads.batanga.bz/media/traffic/2012/Post/Happy_Cereal_PreRoll_592x333.flv\' ],\n”;
    OA_output['z7'] += “clip: {\n”;
    OA_output['z7'] += “autoPlay: false\n”;
    OA_output['z7'] += “},\n”;
    OA_output['z7'] += “plugins: {\n”;
    OA_output['z7'] += “controls: {\n”;
    OA_output['z7'] += “url: escape(\’http://[OPENX]/www/delivery/fc.php?script=deliveryLog:vastServeVideoPlayer:player&file_to_serve=flowplayer/3.1.1/flowplayer.controls-3.1.1.swf\’)\n”;
    OA_output['z7'] += “}\n”;
    OA_output['z7'] += “}\n”;
    OA_output['z7'] += “});\n”;
    OA_output['z7'] += “\n”;

    when i check the HTML of my webpage i cannot see this code, its like the plugin openxtag cut off this part of the response and video ad isnt work because is not accepting tag, is that true?? or maybe and doing something work or i forget something when i called spc method…

    can u help me?

    thanks in advance
    viktor

  11. O___O …

    notice the script tag was cut off again … U_U … but now in my previous comment … :(

  12. Hello! I find this plugin extremely useful. Have been using SPC by itself for some time but doing SPC asynchronously is even more useful.

    Of the three zones that I load via SPC, there is one specific zone that I’d like to manipulate via jQuery. Is there a way to target that through the function that is called on ad load?

  13. Fantastic work!
    Just what I needed. Quick loading of the banners via SPC. Since the function is called after the content is loaded I managed to load the custom site values in the content of the site. This was the problem I had with normal SPC call: the site variables needed to be loaded before the content, ie. before they were known… The jQuery way solved my problems! Thanks!

    /Mike

  14. I’m trying to implement this on a wordpress site. I get some conflicts with other jquery plugins. For other jquery implementations I have used var $j = jQuery.noConflict(); Any hints on how to implement the spc functionality with noConflict??

    All the best,
    Mike

  15. Hey Nikolay,

    your script is awesome, except for the little bug with the missing “script” Tag.

    It would be great if you could fix that. I’m more then willing to pay for it, just give me your paypal address and i will send you a donation ;)

  16. Yes. Same case with me. Examples not showing banners. How to get those example files working?

  17. I’m still looking for someone who could fix the bug with the missing “Script” Tag on the SPC call.

    Nikolay, could you please fix this? As said before, i would give you a small donation for this.

  18. I am having a very strange issue. Getting too many clicks after integrating Openx jQuery plugin. 450 clicks on banner/day with this plugin, where as with the old openx implementation I am getting around 10 clicks/day. Now after showing that banner with google ad manager I am getting around 12 clicks/day. Help me out to resolve the issue, what is making this OpenX jQuery plugin to generate too many clicks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box