In my previous article on this series, I wrote about the basic implementation of the OpenX Single Page Call technique, a method of integrating the ad server into your website that has a lot of benefits. This edition is about the more advanced way of implementing OpenX Single Page Call, which helps prevent unnecessary ad requests by calling only those zones that you actually need for a given page.
Setting up a list of zones
The biggest disadvantage of the Single Page Call code that the OpenX software generates is that it automatically creates ad requests for every single zone that is defined for a given website. So if you have 15 zones (5 for your homepage, 5 for your article pages and 5 more for your forum), there is a waste of 10 zone request for every page loading in the browser. Fortunately, it’s simple to avoid this, by creating a list of zones that you need. Here’s the basic syntax:
<script type='text/javascript'><!--// <![CDATA[
var OA_zones = {
'zone_name_1' : X,
'zone_name_2' : Y,
'zone_name_3' : Z
}
// ]]> --></script>
Javascript programmers call this an “array”. It consists of a few lines (perhaps even as many as 10), and each line has a name and an associated zone ID.
- The names have to be unique in the list, and they don’t have to match the names of the zones inside OpenX. I always try to select names that describe where the zone will be displayed on the page. Keep in mind that these names are case sensitive. To avoid confusion, I always use lower case, and underscore (_) characters instead of spaces.
- The zone IDs X, Y and Z will have to match the IDs that OpenX has assigned to the zones when you created them.
- Each line ends with a comma, separating it from the next line. Of course, there should not be a comma after the zone ID of the last line.
Here is a code sample for the case I described in the first article, with a leaderboard zone at the top of the pages next to the logo, 3 medium rectangle zones in the sidebar and 1 full banner zone at the bottom of the page:
<script type='text/javascript'><!--// <![CDATA[
var OA_zones = {
'masthead_leaderboard' : 1,
'sidebar_medium_rectangle_1' : 2,
'sidebar_medium_rectangle_2' : 3,
'sidebar_medium_rectangle_3' : 4,
'bottom_full_banner' : 5
}
// ]]> --></script>
These lines of code don’t “do” by themselves, they are just preparation for the next step. An array called “OA_zones” has been created, and this will trigger the single page call to process only these zones and ignore all the other zones.
Advanced Single Page Call request code
The ad request connects that connects to the OpenX Ad Server is very similar to the basic implementation. Since the zones we need have already been listed, we can even leave out the site ID. Let’s have a look at the differences. The basic code looks like this:
<!-- Generated by OpenX 2.8 --> <script type='text/javascript' src='http://www.example.com/openx/www/delivery/spcjs.php?id=x'></script>
For the advanced implementation, we don’t need the id=x parameter, so we end up with:
<script type='text/javascript' src='http://www.example.com/openx/www/delivery/spcjs.php'></script>
As you can see, almost identical, in fact even a bit less code.
Single page call code for <body> of web page
The code that goes into the body section of the web pages is very similar to the basic variety, the only difference is that you’ll no longer be referencing the zones by ID but instead by the name you assigned to it earlier. Here is the basic syntax for the code:
<script type='text/javascript'><!--// <![CDATA[
OA_show('zone_name_1');
// ]]> --></script>
Make sure you use the exact same zone names as used in the list of zones, and enclose the zone names with two ‘ (quote) characters.
The <noscript>…</noscript>component of the code can be left out, in my opinion, since most websites nowadays display rich media advertising that won’t work in ‘noscript’ anyway.
For our example, the code snippet for the masthead_leaderboard zone would look like:
<script type='text/javascript'><!--// <![CDATA[
OA_show('masthead_leaderboard');
// ]]> --></script>
One additional benefit of this approach of naming zones is that you will find it much easier to understand the web page code in the future when you need to work on it again, because the zone names tell you exactly what they are.
Named zones single page call: how it works
When the browser loads a page with this advanced variety of single page call, this is what happens in sequence:
- The browser finds and executes the named zones code in the <head>, and as a result it creates an array called “OA_zones” in browser memory, with information for the zones needed.
- The browser then finds and executes the single page call code, also in the <head>. OpenX recognizes that there is an “OA_zones” array and processes the ad requests for each of the zones listed in the array. For each of the zones, the ad that is selected by the ad server is stored in browser memory. If enabled, OpenX counts these ad requests for the statistics.
- When the browser encounters the “OA_show()” code with a pre-defined zone name in the <body>, it outputs the ad that was selected in the <head> during the single page call. This is repeated for each occurrence of the “OA_show()” code. The ad comes with the code for recording the impression of the ad through a small and invisible beacon image.
Next article: using one zone multiple times on a page
In the next article in this series, I will discuss how you can use a variation of the named zones array to display multiple instances of the same zone, but still with a different ad in each instance.
Excellent article! Very helpful for reducing page load times.
I’m looking forward to your “multiple instances” article as we have several sites and pages that fall into that category.
Hi Dave,
Thanks for your kind words, I’ve got the next article in draft and will do my best to publish it shortly.
Regards, Erik Geurts
Thanks for the tip. Does it also apply for OpenX 2.6?
Hi Bruno,
Yes, Single Page Call is available in OpenX v2.6 as well, but I haven’t tested it in great detail. I would recommend upgrading to version 2.8 for all sorts of reasons, including performance.
Regards, Erik Geurts