-
Notifications
You must be signed in to change notification settings - Fork 11
Home
The Adplayer is a privacy button with privacy information that can be added to an ad placement. The privacy button, when clicked, will display a list of all the parties from the publisher to the adserver that are involved in the serving of the ad that is being shown. The list can be displayed in a floating layer or in a popup. The list effectively displays the organizations name, a short description and a link to their privacy information.
The Adplayer is a javascript solution that has been designed to work with current adserving technology and advertising formats. The adplayer will, by default, render the button in the top right hand corner floating over the advertisement. The position of the button is configurable. In the case where it is not possible to display the button, the privacy array can be retrieved and passed to the advertisement which can then render this privacy information to fit into the advert (Flash, Silverlight, etc...).
The below sections will help to set up, configure and use the Adplayer.
- Download latest Build of Adplayer
- [API Documentation] (http://rolloutadplayer.de/wordpress/wp-content/uploads/apidocs_adplayer-v1.5.2.RC1_.zip)
- AdPlayer v1.5.2RC1 Privacy Info Registration and Player Initialization
- After that, check out our Adplayer FAQ page.
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.
The AdPlayer is a Javascript based solution that uses a unique advert placement id which is used to register and retrieve all the privacy information for the advert being rendered. The unique id needs to be passed from one member to the next in the advert delivery chain.
This product was designed to be as flexible as possible and offer a simple way for privacy information 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.
Adding information or allowing users to opt out of any part of the ad delivery chain.
The AdPlayer solution consists of the following elements… (including documentation components, API)
- adplayer-x.x.x.js
- adplayer-x.x.x.min.js
- adplayer-x.x.x-style.css
- oba_icon.jpg
- api documentation (JSDOC output)
- demo pages (index.html, iframe.html)
- gpl license (gpl.txt)
The AdPlayer library is implemented by the following entities:
- The Publishers - The publisher is the parent or top website.
- 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.
- 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 files of interest to the publisher to be installed are:
- adplayer-x.x.x.min.js
- adplayer-x.x.x-style.css
- oba_icon.jpg
The publisher needs to do the following to enable AdPlayer on their website:
- Include the adplayer-x.x.x.min.js javascript and the adplayer css file (adplayer-x.x.x-style.css) in the web page header block for each of the pages where AdPlayer adverts are to be rendered. Please ensure that the urls you provide correctly link to the javascript and css files.
<head>
<script type="text/javascript" src="js/adplayer-x.x.x.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/adplayer-x.x.x-style.css" />
</head>- For each advert slot generate a unique id and then register the publisher's privacy information. Then include the advert tag.
<div id="advert-slot-1-landscape">
<script type="text/javascript">
var publisherinfo = {
title: 'Publisher Name',
text: 'Short Description',
url: 'http://www.example.org',
linkTet: 'More',
usePopup: false
};
var obaId = $ADP.Registry.generateId();
$ADP.Registry.register(obaId, publisherinfo);
/* Adverts included HERE */
/* (A) Javascript Tag */
document.write('<script type="text/javascript" src="./adserver.js?oba=' + obaId + '"></script>');
/* (B) Friendly IFrame Tag */
var width=300, height=250;
document.write('<iframe id="ad-iframe" src="./adserver.html?oba=' + obaId + '" style="margin:0px;padding:0px;width:' + width + 'px;height:' + height + 'px;" scrolling="no"></iframe>');
/* (C) Non Friendly IFrame Tag */
var width=300, height=250;
document.write('<iframe id="ad-iframe" src="http://advert.url/advert.html?oba='+obaId+'" style="margin:0px;padding:0px;width:' + width + 'px;height:' + height + 'px;" scrolling="no"></iframe>');
/* (D) Friendly IFrame Tag using window.name and not postmessage */
var width=300, height=250;
publisherinfo.usePopup = true;
var name = $ADP.Util.btoa( $ADP.Util.JSON.stringify( $ADP.Registry.pullById(obaid) ));
document.write('<iframe name="' + name + '" id="ad-iframe" src="./adserver.html?oba=' + obaId + '" style="margin:0px;padding:0px;width:' + width + 'px;height:' + height + 'px;" scrolling="no"></iframe>');
</script>
</div>For Javascript Tag Delivery (A), there is nothing else that needs to be done by the publisher but if the publisher uses frames or iframes (B, C, D) then these frames and iframes need to be updated to include the Adplayer javascript and css files. The iframes will also need to retrieve the oba id from the url and inject it into the javascript to register privacy information and pass the oba id onto the next include party using oba=obaId in the url. When using an IFrame it is recommended that the extra option usePopup is set to true. This will display the privacy list in a popup window which will avoid the problem with part of the privacy list layer being hidden. This value is set in the example code above for case (D). (D) also shows how one can embed the privacy information in the window.name of the iframe/frame this can be used for popups which only work with the window.name feature
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.
These entities will need to register their privacy information and when including the next party in the chain must include the oba id in the include url as the example shows
<script type="text/javascript">
var privacyInfo = {
title: 'Party Name',
text: 'Short Description',
url: 'http://www.example.org',
linkText: 'More',
usePopup: false
};
$ADP.Registry.register(obaId,privacyInfo);
//include next in chain
document.write('<script type="text/javascript" src="./adserver.js?oba=' + obaId + '"></script>');
</script>The Ad Server will create the advert with an information button. The Adplayer will then be created with the privacy info and the button dom object or reference. The button will then be rendered. if no button is created then a default button will be created in the top-right of the advert area, or if the position is defined then it will render in the specified position. The code shows a basic example for the adserver
<script type="text/javascript">
var privacyInfo = {
title: 'Party Name',
text: 'Short Description',
url: 'http://www.example.org',
linkText: 'More',
usePopup: false
};
$ADP.Registry.register(obaId, privacyInfo);
var domId = ''; // should be equal the dom id where the button will be rendered
var PlayerInfo = {
domId: domId,
position: 'top-right',
header: 'Header Information',
footer: 'Footer-Information',
usePopup: false
);
$ADP.Registry.createPlayer(obaId, playerInfo);
</script>Example implementation how to check if $ADP is availible and how to queue the Register call until $ADP is loaded.
<script type="text/javascript">
// encapsulation of $ADP.Registry.register
// avoids redundant code
var obaInitId = "oba_init_" + new Date().getTime();
window[obaInitId] = function() {
var privacyInfo = {
title: 'Party Name',
text: 'Short Description',
url: 'http://www.example.org',
linkTet: 'More',
usePopup: false
};
// if your adserver provides a oba substitution token you should use this
// otherwise use $ADP.Registry.generateId() to generate a new random ID
var obaId = "%obaId%";
$ADP.Registry.register(obaId, privacyInfo);
}
// checking if window.$ADP is accessible
if (window.$ADP) {
// run initialization immediately
window[obaInitId]();
}
else {
(function() {
// local declaration of obaInitFunction
// global obaInitId could be overridden
var obaInitFunction = window[obaInitId];
// path to JS ressource
var ADPScriptUrl = "http://yourhost/adplayer/js/adplayer.js";
var ADPCssUrl = "http://yourhost/adplayer/css/adplayer.css";
var ADPScript = document.createElement('script');
ADPScript.setAttribute('type', 'text/javascript');
if (navigator.userAgent.indexOf("MSIE") == -1) {
ADPScript.onload = function() {
obaInitFunction();
};
}
else {
var checkReadyState = function(element) {
return ((element.readyState == "loaded" || element.readyState == "complete") && window.$ADP);
}
// first block to avoid errors in IE while history browsing
if(checkReadyState(ADPScript)) {
obaInitFunction();
}
else {
ADPScript.onreadystatechange = function() {
if ((checkReadyState(this)) && !this.loaded){
this.loaded = true;
obaInitFunction();
}
};
}
}
ADPScript.setAttribute('src', ADPScriptUrl);
document.getElementsByTagName('head')[0].appendChild(ADPScript);
var ADPCss = document.createElement('link');
ADPCss.rel = "stylesheet";
ADPCss.type = "text/css";
ADPCss.media = "screen";
ADPCss.href = ADPCssUrl;
document.createStyleSheet ? document.createStyleSheet(ADPCss.href) : document.getElementsByTagName("head")[0].appendChild(ADPCss);
})()
}
</script>