Apr 242011

After we successfully installed the OpenX ad management system, we can now integrate this tool into our website. That allows us to set up accounts and management interfaces for individual advertisers, or to display advertisements from the OpenX Market.

We start by logging in as the administrator:

In the Administrator’s Dashboard we click to Inventory -> Websites.

There we can Add a new website. We fill out the information for this specific site. There is nothing special here. Since we provide information on the deployment of internet technology, we select Web Tools as our category for this site.

After clicking Save changes, the new website is added to our ad management system.

Adding Zones to our Website

The next step is to add zones for each spot on our website where we wish to place an advertisement. So we click Inventory -> Zones -> Add new zone. If you have already added more than one website to OpenX, make sure you select the right site for the new zone to be added to. Here we create a zone in the header for full banner ads:

Having the option Serve ads from OpenX Market ticked, arranges for OpenX ads to be served when nothing from your own advertisers’ inventory would be displayed.

In a similar way, we create all the zones we might need for our portal.

Generating the Zone Invocation Codes

On the far right side of each zone, you see a link for the Invocation Code. This gives you
the snippet of HTML/JavaScript source code that you should include at the location in your web site design where you want to display this specific zone. You can access the same page by opening (clicking) the zone and then selecting the Invocation Code tab.

As you can see, there are a few options to set. Since we do not want to see the same banner twice on the same page, we select No for 'Don’t show the banner again on the same page'. The Target Frame we leave at Default, having the landing pages opened in a new tab. The rest we leave as is as well.

After clicking the Refresh button, the code snippet is updated:

<!--/* OpenX Javascript Tag v2.8.7 */-->

  * The backup image section of this tag has been generated for use on a
  * non-SSL page. If this tag is to be placed on an SSL page, change the
  *   'http://www.example.com/openx/www/delivery/...'
  * to
  *   'https://www.example.com/openx/www/delivery/...'
  * This noscript section of this tag only shows image banners. There
  * is no width or height in these banners, so if you want these tags to
  * allocate space for the ad before it shows, you will need to add this
  * information to the <img> tag.
  * If you do not want to deal with the intricities of the noscript
  * section, delete the tag (from <noscript>... to </noscript>). On
  * average, the noscript tag is called from less than 1% of internet
  * users.

<script type='text/javascript'><!--//<![CDATA[
  var m3_u = (location.protocol=='https:'?'https://www.example.com/openx/www/delivery/ajs.php':'http://www.example.com/openx/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=40&amp;block=1");
  document.write ('&amp;cb=' + m3_r);
  if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
  document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
  document.write ("&amp;loc=" + escape(window.location));
  if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
  if (document.context) document.write ("&context=" + escape(document.context));
  if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
  document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://www.example.com/openx/www/delivery/ck.php?n=aa567a16&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://www.example.com/openx/www/delivery/avw.php?zoneid=40&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=aa567a16' border='0' alt='' /></a></noscript>

This is no different than what we did before when we integrated Google AdSense into our WordPress portal. Later on we can even add the AdSense invocation codes to our campaigns, basically hooking the OpenX ad management system in between.

Since we do not want to insert advertisement code directly into our web design, we place the invocation code in a separate file. We then include this file in our design using PHP:

<!-- advertisement -->
<div alt="<?php echo (gp_display_core_text2html (_("Advertisement"))); ?>">
  <!-- Yahoo! nocontent tag -->

include (GP_PLATFORM_ADS_INTERNAL . "OpenX/OC-header-leaderboard-728x90.php");


And here we are! Since we have not yet defined campaigns ourselves, the ad manager serves advertisements from the OpenX Market.

Ad Campaigns

The next step is to create a campaign for Google AdSense. And then move on to creating accounts, management interfaces, and campaigns for specific advertisers.

  One Response to “Integrating OpenX with your Website”

  1. […] integrating OpenX zones into your website, you better make sure that the sizes of your zones match those of the banners your advertisers want […]

Leave a Reply