شركة زري لذهب والمجوهرات - labadserver/Adplayer GitHub Wiki

1. [Disambiguation](#disambiguation) 1. [Including the AdPlayer resources](#resources) 1. [Registering of OBA-Information](#registration) 1. [Redirects](#redirects) 1. [Creating the AdPlayer Button (Ad Server)](#creation) 1. [LazyLoading](#lazy-loading)

## <a name="disambiguation"/>Disambiguation

  • 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 that renders 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.

## <a name="resources"/>Including the AdPlayer resources

The publisher must include the following required files into the HTML header block for the AdPlayer to function correctly in their website:

  • adplayer.min.js
  • adplayer-translation.min.js
  • adplayer.min.css
  • oba_icon.png

Please ensure that the urls you provide correctly link to the JavaScript and CSS files.

NB: To ensure that the AdPlayer correctly handles foreign languages you will need to ensure that the document character set is set to utf-8 when including the AdPlayer javascript. Please make sure to set the link to the adplayer-translation.js which will provide the Internationalization functionality. This file is loaded automatically when it is required.

An example of including the AdPlayer:

<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="js/adplayer.min.js"></script>
  <script type="text/javascript">
    $ADP.Registry.setTranslation({
      href: 'http://www.example.org/js/adplayer-translation.js'
    });
  </script>
  <link rel="stylesheet" type="text/css" href="css/adplayer.min.css" />
</head>

The publisher is able to customize the CSS styles to ensure that the look and feel matches the publishers styling themes.

## <a name="registration"/>Registering OBA-Information

All parties involved in the adverts delivery chain must register their privacy information. The registration of privacy information is done using the following method:

To Register OBA Information the $ADP.Registry.register(obaId, obaInfo) is used. This function expects the following two parameters:

  • obaId: The obaId is a unique id and is generated once per advert slot and passed as a parameter to the parties in the ad delivery chain. When no obaId is received then it should be generated using $ADP.Registry.generateId() and then passed on as a parameter to the subsequent third party requests.<br />

Important: When the obaId parameter is passed as a parameter it MUST be used.

  • obaInfo: The oba information is an object with the following attributes:
    • title: The name of the party/organization
    • text: A short description
    • url: URL to opt-out link
    • linkText: The text displayed instead of the link
    • header: (optional) The text that is displayed before the privacy information list.
    • footer: (optional) The text that is displayed after the privacy information list.
    • usePopup: (optional) When this is set to false then the information will be displayed in a layer, by default it is displayed in a popup window.
    • renderCloseButton: When set to false the closing -"x" should not be displayed in the popup Iframe.

Privacy-Information registration example:

<div id="advert-slot-1">
  <script type="text/javascript">
    var obaId = 'idFromServer' || $ADP.Registry.generateId(); //You have to user the obaId from the parent if one is committed

    var obaInfo = {
      title:    'Name',
      text:     'Short Description',
      url:      'http://www.example.org',
      linkText: 'More'
    };

    $ADP.Registry.register(obaId, obaInfo);

    /**
     * Adverts included HERE
     */
  </script>
</div>

## <a name="redirects"/>Redirects

With Javascript or Iframe redirects the obaId must be included in the url parameters. The key used must be oba so that oba='obaId'.When the obaId is received it must be used when registering privacy information and should be passed onto all the included urls and redirects.

<div id="advert-slot-1">
  <script type="text/javascript">
    var obaId = 'idFromServer' || $ADP.Registry.generateId(); // You have to use the obaId from the parent if one is committed

    /**
     * OBA-Information registration HERE
     */

    /* (A) JavaScript Tag */
    document.write('<script type="text/javascript" src="./adserver.js?oba=' + obaId + '"></script>');

    /* (B) 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>');
  </script>
</div>

### Instructions for redirects using Frames and Iframes

The AdPlayer resource files will need to be included in the html header of the Frames and Iframes. (see [Including the AdPlayer resources](#resources) for instructions on how to include the AdPlayer resource files)

## <a name="creation"/>Creation of the OBA-Button (Ad Server)

The AdPlayer requires a container div where the information button can be rendered. The last party to be included in the advert chain, generally the Ad Server, must create this button container div where the AdPlayer button is to be rendered. This allows the Ad Server to have control over where the button is rendered and is able to ensure that the button does obstruct the adverts buttons.

The AdPlayer is created using the function $ADP.Registry.createPlayer(obaId, playerInfo). The function expects the obaID and a playerInfo object. The playerInfo object has the following arguments:

  • domId: ID of the container div where the information button is to be rendered
  • position: (optional) The position of the button. (Default: top right)
  • header: (optional) Text that will be displayed before the privacy list.
  • footer: (optional) Text that will be displayed after the privacy list.
  • usePopup: (optional) When false the AdPlayer is rendered in a Layer, by default the information is displayed in a popup window.
  • renderCloseButton: Will hide the close-x button when set to false.

The Ad Server must first generate an obaId if one is not passed as a parameter and then first register its privacy information before it attempts to create the AdPlayer.

Creation of AdPlayer button example:

<script type="text/javascript">
  var obaId = 'idFromServer' || $ADP.Registry.generateId(); //You have to use the obaId from the parent if one is committed

  var domId = 'adp_container_'+obaId;
  document.write('<div id="'+domId+'"></div>');
  
  /**
   * If the Ad Server has to register OBA Information please insert the registration HERE
   */

  var playerInfo = {
    domId:    domId, 
    position: 'top-right'
  };

  $ADP.Registry.createPlayer(obaId, playerInfo);
</script>

When the Ad Server does not receive an obaId and does not have any OBA-Information to register, then it should not execute any of the AdPlayer code.

## <a name="lazy-loading"/>LazyLoading

_BEGIN: DE_

In einigen Fällen ist es als Online-Vermarkter nicht möglich, die AdPlayer-Ressourcen direkt in den DOM jeder Webseite zu integrieren und diese somit mit der Webseite auszuliefern. Ebenso kann sich eine Drittpartei, die an einer Auslieferungskette beteiligt ist, nicht sicher sein, dass eine AdPlayer-Instanz im Kontext der Webseite initialisiert wurde.

Um die beschriebene Problematik zu lösen, kann das folgende JavaScript genutzt werden. Es stellt sicher, dass bevor eine OBA-Information registriert wird, eine AdPlayer-Instanz initialisiert wurde. Dazu werden die AdPlayer-Ressourcen, falls nicht vorhanden, von einem zu bestimmenden Server nachgeladen. Die Registrierung der einzelnen OBA-Informationen wird solange verzögert, bis eine AdPlayer-Instanz verfügbar ist.

Bevor das unten aufgeführte Script produktiv eingesetzt werden kann, müssen die Einstellungen im Bereich der ADPConfig jeweils angepasst werden. Dazu gehören u.a. die Pfade zu den jeweiligen AdPlayer-Ressourcen und die Übergabe der obaId. Außerdem muss festgelegt werden, ob der Player erstellt werden soll. Dies ist der Fall, wenn die Partei das physische Werbemittel ausspielt bzw. sie die letzte Partei in der Auslieferungskette ist. Zuletzt müssen die jeweiligen OBA-Informations-Items angepasst werden. Am Ende des Skriptes muss der eigentliche AdCode hinterlegt werden.

_END: DE_

try { (function(){
  var ADPConfig = {
    items: [                                                                            // Insert your OBA information.
      {
        title:    'Name of OBA-Party I',                                                // You can add one or more information items.
        text:     'Short Description I',                                                // This example handles two information items.
        url:      'http://www.example.org',
        linkText: 'More Information'
      },
      {
        title:    'Name of OBA-Party II',
        text:     'Short Description II',
        url:      'http://www.example.org',
        linkText: 'More Information'
      }
    ],

    obaId: undefined,                                                                   // Pass in the obaId as string value if it is submitted from the predecessor in the chain.
    domId: 'adp_container_'+(0|9999*Math.random()),                                     // Set the id of AdPlayer container if you want to generate it by yourself.
    createPlayer: true,                                                                 // Must be true, if you deliver the physical ad (last in chain). Otherwise false.

    jspath: 'http://link-to-your-resources.com/js/adplayer.min.js',                     // Insert the path to your AdPlayer javascript resource.
    csspath: 'http://link-to-your-resources.com/css/adplayer.min.css',                  // Insert the path to your AdPlayer CSS Resource.
    translationpath: 'http://link-to-your-resources.com/js/adplayer-translation.min.js' // Insert the path to your AdPlayer translation resource.
  };

  document.write('<div id="'+ADPConfig.domId+'"></div>');                               // Remove this line if you want to generate the AdPlayer container by yourself.

  // DO NOT MODIFY ANYTHING BELOW THIS LINE!
  (function lazyLoad(){
    if (window.$ADP) {
      if(ADPConfig.translationpath) $ADP.Registry.setTranslation({href: ADPConfig.translationpath});
      var obaId = ADPConfig.obaId ? ADPConfig.obaId : $ADP.Registry.generateId();
      if(ADPConfig.items) {
        for(k in ADPConfig.items) { $ADP.Registry.register(obaId, ADPConfig.items[k]); }
      }
      if (ADPConfig.createPlayer) $ADP.Registry.createPlayer(obaId, {domId: ADPConfig.domId});
    } else {
      if (!document.getElementById('adpscript')) {
        var adp = document.createElement('script'); adp.type = 'text/javascript';
        adp.async = true; adp.src = ADPConfig.jspath; adp.id = 'adpscript';
        document.getElementsByTagName('head')[0].appendChild(adp);
      }
      if (!document.getElementById('adpstyle')) {
        var adp = document.createElement('link'); adp.type = 'text/css';
        adp.href = ADPConfig.csspath; adp.rel = 'stylesheet'; adp.id = 'adpstyle';
        document.getElementsByTagName('head')[0].appendChild(adp);
      }
      window.setTimeout(lazyLoad, 50);
    }
  })();
})();
} catch (e) {}

// INSERT YOUR AD-CODE HERE
⚠️ **GitHub.com Fallback** ⚠️