Single Page Call – Advanced Implementation

by | Sep 20, 2013

Important note: Revive Adserver v3.2, which was released in April 2015, contains a major new feature called Async Javascript tags. This new feature has all of the benefits of single page call and none of the disadvantages. As such, I no longer recommend using Single Page Call.

This is the third article in a series of 3. You may also enjoy reading:

In my previous article on this series, I wrote about the basic implementation of the Revive Adserver 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 Revive Adserver 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 Revive Adserver 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 Revive Adserver. 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 Revive Adserver 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 Revive Adserver 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 Revive Adserver -->
<script type='text/javascript'

For the advanced implementation, we don’t need the id=x parameter, so we end up with:

<script type='text/javascript'

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[
// ]]> --></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[
// ]]> --></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>. Revive Adserver 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, Revive Adserver 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.

Recent Tweets: