Skip to content

Home

Jump to bottom Edit New page
dhellmuth edited this page May 3, 2012 · 22 revisions

The Adplayer is a container on the ad placements which interacts with the ad and the placement and which offers the options of event handling, OBA/ Privacy Information and Webpage events for special rich media formats. The below sections will help to set up, configure and use the Adplayer.

Planning and realisation of Adplayer V1.0

The technical specifications, tasks and planning for Adplayer V1.0 are maintained in the wiki-page Specs and planning of v1.0

Purpose:

To offer a standard script based open ad environment in which publishers or networks can offer additional consumer ad options and vendor control, supporting the entire chain of delivery. This set of tools has been tested to work in multiple delivery environments, and offers full CSS based control of presentation of the overlay solution.

Solution:

The AdPlayer is a DOM-Tree based Javascript solution is linked to the particular creative with an HTML container (div, span).

Uses:

This product was designed to be as flexible as possible and offer a simple way for information, or code elements to travel with the creative. Reporting on these events as well as cookie based opt out systems will need to be supported by the vendors in the chain, and the default opt out will be directed to mycookies.org (!) (in US NAI is the most referred to partner for this)

Adding information or allowing users to opt out of any part of the ad delivery chain are foreseen uses for this, but the product could also be used for synchronizing delivery statistics with a ‘universal pixel’ implementation coordinating reporting on delivery or events to multiple sources.

Elements:

The AdPlayer solution consists of the following elements… (include documentation components, API)

adplayer-x.x.x.js adplayer-x.x.x.min.js json2.min.js adplayer-x.x.x-style.css adplayer-x.x.x-style-ie.css oba_icon_15x20.jpg stub file (apstub.html) api documentation (JSDOC output) demo pages (index.html, iframe.html) gpl license (gpl.txt)

Real World Implementation of the AdPlayer Library

The AdPlayer library is implemented by the following entities:

  1. The Publishers - The publisher is the parent or top website.
  2. Third Party Statistics and Targeting Entities – These entities are involved in the rendering chain of an advert that set cookies on the clients browsers up to and not including the call to the Ad Server to render the advert.
  3. The Ad Server - The Ad Server is the entity that delivers the actual advert code and is generally the last code to be included in the player chain.

To correctly implement the AdPlayer each of the above mentioned parties will need to do the following to ensure that the AdPlayer functions correctly.

The Publisher

The files of interest to the publisher to be installed are:

  • cplayer.js
  • apstub.html
  • iframe.html
  • adplayer.style.css
  • adplayer.style-ie.css
  • oba_icon.jpg

The publisher needs to do the following to enable AdPlayer able adverts to be served on their website:

*Include the adplayer.js javascript and the adplayer css files in the web page header block for each of the pages where AdPlayer adverts are to be rendered.

  <head>
    <script type="text/javascript" src="http://yourserverurl/path/to/adplayer-x.x.x.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/adplayer-x.x.x-style.css" />
    <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="css/adplayer-x.x.x-style-ie.css" /><!--[endif]-->
  </head>
  • Create a root player and container div as the first node in the body of the webpage or at the point where you would like to include the adverts. All the website html and more specifically the advert html needs to be rendered in this container. The Publisher should then add their opt out information to the player.
<body>
  <div id="publisher-container">
    <script type="text/javascript">
      var adPlayer = new $ADP.AdPlayer('Player name', 'publisher-container');
      adPlayer.addPrivacyInfo('Publisher Name', 'Opt out of this campaign Short Text','http://www.example.com/opt-out-link');
    </script>
    <!-- Adverts included HERE -->
  </div>
</body>

For Javascript Tag Delivery there is no extra configurations or setting up the publisher needs to do but for IFrame and Friendly IFrame tag delivery then the publisher will need todo the following to deliver ads via a friendly I-Frames

  • Install the iframe-stub html file and make it accessible under the same URL as the web page that will be rendering the adverts. For example if the publisher webpage url is http://www.example.com then the page should have a url of http://www.example.com/some/path/apstub.html
  • Insert the following code where you wish the Iframe banner to be rendered. The adloc needs to be set to the url of the advert/tag javascript file to be rendered in the friendly iframe.
  <div id="ad1-iframe">
    <script type="text/javascript">
      var ifrAdPlayer = new $ADP.AdPlayer('FRIENDLY_IFRAME_CONTAINER', 'ad1-iframe');
      friendlyIframeAdPlayer.addPrivacyInfo('FRIENDLY_IFRAME_CONTAINER', 'Friendly iFrame container message...','http://www.example.com/Fiframecontainer');
      document.write('<iframe id="friendlyIframe" width="300" height="250" border="0" scrolling="no"></iframe>');
      document.getElementById('friendlyIframe').src ='http://www.example.com/some/path/apstub.html#{"adloc":"http://www.example.com/javascript/file/location"}';
      </script>
  </div>
  • Update the src url of the apstub.html file so that it correctly loads the AdPlayer javascript and css file.

For Iframe tags to be rendered on the publishers page the publisher will need to do the following:

  • Remove the alert in the iframe.html file because this is purely for debugging the iframe PRIVACY.OPEN event and fix the links to the adplayer javascript and style sheet and provide it to any of your clients who provide you with iframe tags.

From this point the publisher is setup and is ready to display the AdPlayer. The publisher is able to customize the css styles to ensure that the look and feel matches that of the publishers styling themes.

Third Party Statistics and Targeting Entities

These entities simply need to create a player and assign the opt out link followed by the call to the next entity in the call chain.

The Ad Server

The Ad Server should create an AdPlayer before rendering the advert and attach the privacy options to the player. Then render the advert.

Some Information about the Events

The Framework Actively fires the following Events:

  • $ADP.AdEvent.INIT – When the page has loaded and the players have been created.
  • $ADP.AdEvent.PRIVACY_CLICK – This is fired whenever the privacy icon is clicked.
  • $ADP.AdEvent.PRIVACY_OPEN – This fires every time the privacy div is opened.
  • $ADP.AdEvent.PRIVACY_CLOSE – This is fired every time the privacy div is closed.
  • $ADP.AdEvent.TRACK – Fired by the iframe container to initiate the discovery of the Iframe in the publisher page and used to link iframe player to the player chain of its parent player.
  • $ADP.AdEvent.COUNT – This is fired from the friendly iframe to count the number of iframes in the player chain.

The Framework includes the following extra events that can be triggered by the publisher, agency and or ad server code:

  • $ADP.AdEvent.LOAD
  • $ADP.AdEvent.REMOVE
  • $ADP.AdEvent.SHOW
  • $ADP.AdEvent.HIDE
  • $ADP.AdEvent.PROGRESS
  • $ADP.AdEvent.CLICK
Add a custom footer
Add a custom sidebar

Clone this wiki locally