You are here: Publishers > Header bidding solutions > OpenX Bidder > .addSlot advanced implementation

.addSlot advanced implementation for OpenX Bidder

Last updated on Sepember 25, 2017

Important: This topic explains an alternate advanced implementation of OpenX BidderOpenX's header bidding solution. Bidder enables publishers to realize the true value of their direct and indirect inventory in real time. "Bidder" can also mean a program designed to bid in real time on inventory in the OpenX Ad Exchange.. Please contact your OpenX representative to ensure this implementation is right for you.

Publishers have different implementation needs. In some scenarios, a variation of the advanced implementation for OpenX Bidder might be needed. This guide explains how to implement the advanced implementation of OpenX Bidder using OX.dfp_bidder.addSlots(). The OX.dfp_bidder.addSlots() method allows you to request bids after the OpenX JavaScript Tag library loads.

In this topic we will:

Implementation process

  1. Provide a list of any special targeting or block lists to your OpenX representative.
  2. Define the global variable, OX_dfp_ads, as a blank array. This enables the advanced implementation of OpenX Bidder.
    <script>
       var OX_dfp_ads = [];
    </script>

  3. Load both the OpenX JavaScript Tag (JSTAG) and the Google Publisher Tag (GPT) JavaScript libraries asynchronously. The PUBLISHER, NETWORKCODE and SITE placeholders used to load the OpenX JSTAG are provided by your OpenX representative.
      <!-- Load JSTAG -->
       <script async type="text/javascript" src="//PUBLISHER-d.openx.net/w/1.0/jstag?nc=NETWORKCODE-SITE"></script>
    
       <!-- Load GPT ASYNC --->
       <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
  4. Setup the googletag command queue.
    <script>
       var googletag = googletag || {};
       googletag.cmd = googletag.cmd || [];
    <script>
  5. Add the following partial code block immediately after the googletag command queue.
    <script>
       (function() {
          var oxCallbackCalled = false;
    
    . . .
          } catch (err){
             // if there are any exceptions, release googletag
             displayAds();
          }
  6. After var oxCallbackCalled = false;, in step 5, add the following code to verify that OpenX is loaded and to set ad slotThe area on a web page set aside for the display of ads. targeting.

    The oxDone function verifies that OpenX has returned with price support.

    The OX.dfp_bidder.setOxTargeting function will dynamically add the OpenX key-value pair for each defined ad slot.

    window['oxDone'] = function oxDone() {
       if(!oxCallbackCalled){
          oxCallbackCalled = true;
          // Check to see if OX is loaded before calling setOxTargeting.
          if (window.OX && window.OX.dfp_bidder) {
             window.OX.dfp_bidder.setOxTargeting();
          }
          displayAds();
       }
    };

    Note: A callback function is required. You can specify the name of the callback function. For convenience, we have named the callback function oxDone.

  7. Add try { and define the ad slots for which you plan to fetch prices.
    try {
       var oxUnits = [
          [DFP_AdUnit, [size_array], div, {targetingMap}]
       ];

    Property

    Description

    Type

    Example

    Required?

    DFP_AdUnit

    DFP ad unitThe smallest inventory component that represents the space on a site where ads display. name.

    String'/18064236/TestPage_300x250'

    Yes

    [size_array]

    Available sizes for the specified ad unit.

    String (Array)['300, 250','300, 600']

    [[300, 250],[300, 600]]

    Yes

    div

    div id that will be called in the googletag.display call.

    String'div-gpt-ad-1483720362247-1'

    Yes

    {targetingMap}

    Targeting map for specific key-value pairs.

    Object or null{'pos':['atf']}

    No

    For example:

    try {
       var oxUnits = [
          ['/18064236/TestPage_300x250', [[300, 250],[300, 600]], 'div-gpt-ad-1483720362247-1'],
          ['/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0'],
          ['/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4'],
          ['/18064236/TestPage_728x90', [728, 90], 'div-gpt-ad-1483720362247-3']
       ];
  8. Use OX_dfp_bidder.addSlots() to request bids for the defined ad slots within try { }, immediately after defining the ad slots. Be sure to include the defined ad slots within OX_dfp_ads.push.

    OX.dfp_bidder.addSlots(oxUnits, oxDone)

    Allows calls to be made for delayed slots.

    Property

    Description

    Required?

    oxUnits

    Defined ad slots. See step 7.

    Yes

    oxDone

    Method to execute once the request for ads has been completed. See step 6.

    Yes

    div

    div id that will be called in the googletag.display call.

    Yes

    {targetingMap}

    Targeting map for specific key-value pairs.

    No

    For example:

    if (window.OX) {
       /* This will check if our JSTAG has finished loading. If it has then we will use .addSlots method to request bids. Otherwise it will use OX_dfp_ads to request.
       */
    						
       OX.dfp_bidder.addSlots(oxUnits, oxDone);
    } else {
       OX_dfp_ads.push(
          ['/18064236/TestPage_300x250', [[300, 250],[300,600]], 'div-gpt-ad-1483720362247-1'],
          ['/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0'],
          ['/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4'],
          ['/18064236/TestPage_728x90',  [728, 90], 'div-gpt-ad-1483720362247-3']);
    }
  9. Add the following timeout. This timeout is a fail-safe to ensure that your ads will display if the OpenX JSTAG fails to load.
    setTimeout(function () {
       if (!('OX' in window || 'oxhbjs' in window)) {
          oxDone()
       }
    }, 2500);
  10. After the code from step 5, define the displayAds() function and close the <script> tag.
          function displayAds() {
             googletag.cmd.push(function() {
                googletag.display('div-gpt-ad-1483720362247-1');
                googletag.display('div-gpt-ad-1483720362247-0');
                googletag.display('div-gpt-ad-1483720362247-4');
                googletag.display('div-gpt-ad-1483720362247-3');
             });
          }
       }());
    </script>
  11. Check your .addSlot advanced implementation of the OpenX Bidder.
  12. Send your test page to your OpenX representative for review.
  13. After OpenX review, deploy this implementation to all of your production digital pages.

Note: If you are using googletag.pubads().refresh() and googletag.pubads().disableInitialLoad() in your page setup, please refer to the Using refresh() section below.

Code sample

Below is an example of a test page created using the steps outlined above in the Process section. This example assumes that the publisherAn account type that represents a business with ad space to sell. is participating in OpenX Bidder and has the following ad units defined in DFP in the following format: /DFP_NetworkCode/DFP_AdUnit.

/18064236/TestPage_300x250

/18064236/TestPage_160x600

/18064236/TestPage_970x250

/18064236/TestPage_728x90

<head>
   <!-- DEFINE OX_dfp_ads as blank Array to enter Advanced Mode -->
   <script>
      var OX_dfp_ads = [];
   </script>

   <!-- LOAD JSTAG -->
   <script async type="text/javascript" src="//PUBLISHER-d.openx.net/w/1.0/jstag?nc=NETWORKCODE-SITE"></script>

   <!-- LOAD GPT ASYNC -->
   <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>

   <script>
      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];
   </script>

   <!-- BUILD your defineSlots and put in OpenX format.  Try to pass the adUnits in as an array of arrays instead of individually -->
   <script>
      (function(){
         var oxCallbackCalled = false;
		
         /* Set targeting and refresh when bids are back.
         We expose the method to the global scope so that our library can find it.
         */
	
         window['oxDone'] = function oxDone() {
            if(!oxCallbackCalled){
               oxCallbackCalled = true;
               // Check to see if OX is loaded before calling setOxTargeting.
               if (window.OX && window.OX.dfp_bidder) {
                  window.OX.dfp_bidder.setOxTargeting();
               }

               // Send slot information to DFP.
               displayAds();
            }
         };
				
         try {
            /* ****** OpenX Format *********

            var oxUnits = [
               ['DFP_AdUnit',[size_array],'div'],
               ['DFP_AdUnit',[size_array],'div']
            ]

            Size is for flexible ad units.
            It can be passed as an array of strings  - 
			['300x250', '300x600', '160x600']
                 or
            Google DFP's format - [[300,250],[300,600],[160,600]]

            ******************************* */

            var oxUnits = [
               ['/18064236/TestPage_300x250', [[300, 250],[300,600]], 'div-gpt-ad-1483720362247-1'],
               ['/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0'],
               ['/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4'],
               ['/18064236/TestPage_728x90', [728, 90], 'div-gpt-ad-1483720362247-3']
            ];

            /* After you have built your definedSlots this is where you will request bids. */

            if (window.OX) { 
               /* This will check if our JSTAG has finished loading. If it has then we will use .addSlots method to request bids. Otherwise it will use OX_dfp_ads to request.
               */

               OX.dfp_bidder.addSlots(oxUnits, oxDone);
            } else {
               OX_dfp_ads.push(
                  ['/18064236/TestPage_300x250', [[300, 250], [300,600]], 'div-gpt-ad-1483720362247-1'],
                  ['/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0']
                  ['/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4'],
                  ['/18064236/TestPage_728x90',  [728,  90], 'div-gpt-ad-1483720362247-3']);
            }


            /* Set a fail-safe to ensure that ads will display even if an exception occurs. */
            setTimeout(function () {
               if (!('OX' in window || 'oxhbjs' in window)) {
                  oxDone();
               }
            /* Time limit should not be lower than time limit of request. */
            }, 2500);
         } catch (err) {
            // if there are any exceptions, release googletag
            displayAds();
         }

         function displayAds() {
            googletag.cmd.push(function() {
               googletag.display('div-gpt-ad-1483720362247-1');          
               googletag.display('div-gpt-ad-1483720362247-0');
               googletag.display('div-gpt-ad-1483720362247-4');
               googletag.display('div-gpt-ad-1483720362247-3');
            });
         }
      }());
   </script>

   <script>
      googletag.cmd.push(function() {
         googletag.defineSlot('/18064236/TestPage_300x250', [[300, 250],[300,600]], 'div-gpt-ad-1483720362247-1').addService(googletag.pubads());
         googletag.defineSlot('/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0').addService(googletag.pubads());
         googletag.defineSlot('/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4').addService(googletag.pubads());
         googletag.defineSlot('/18064236/TestPage_728x90', [728, 90], 'div-gpt-ad-1483720362247-3').addService(googletag.pubads());
        googletag.enableServices();
      });
   </script>
</head>

<body>
<div class="row text-center">
   <div id='div-gpt-ad-1483720362247-0' style='height:600px; width:160px;'></div>
   <div id='div-gpt-ad-1483720362247-1' style='height:250px; width:300px;'></div>
   <div id='div-gpt-ad-1483720362247-4' style='height:250px; width:970px;'></div>
   <div id='div-gpt-ad-1483720362247-3' style='height:90px; width:728px;'></div>
</div>
</body>

Using refresh()

If you use googletag.pubads().refresh() and googletag.pubads().disableInitialLoad() in your page setup, review the code sample below for implementation guidance.

<head>
   <!-- DEFINE OX_dfp_ads as blank Array to enter Advanced Mode -->
   <script>
      var OX_dfp_ads = [];
   </script>

   <!-- LOAD JSTAG -->
   <script async type="text/javascript" src="//PUBLISHER-d.openx.net/w/1.0/jstag?nc=NETWORKCODE-SITE"></script>

   <!-- LOAD GPT ASYNC -->
   <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>

   <script>
      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];
      googletag.pubads().disableInitialLoad();
   </script>

   <!-- BUILD your defineSlots and put in OpenX format.  Try to pass the adUnits in as an array of arrays instead of individually -->
   <script>
      (function(){
         var oxCallbackCalled = false;
				
         /* Set targeting and refresh when bids are back.
         We expose the method to the global scope so that our library can find it.
         */
				
         window['oxDone'] = function oxDone() {
            if(!oxCallbackCalled){
               oxCallbackCalled = true;
               // Check to see if OX is loaded before calling setOxTargeting.
               if (window.OX && window.OX.dfp_bidder) {
                  window.OX.dfp_bidder.setOxTargeting();
               }

               // Send slot information to DFP.
               displayAds();
            }
         };
				
         try {
            /* ****** OpenX Format *********

            var oxUnits = [
               ['DFP_AdUnit',[size_array],'div'],
               ['AdUnitCode',[size_array],'div']
            ]

            Size is for flexible ad units.
            It can be passed as an array of strings  - 
			['300x250', '300x600', '160x600']
                 or
            Google DFP's format - [[300,250],[300,600],[160,600]]

            ******************************* */

            var oxUnits = [
               ['/18064236/TestPage_300x250', [[300, 250],[300,600]], 'div-gpt-ad-1483720362247-1'],
               ['/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0'],
               ['/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4'],
               ['/18064236/TestPage_728x90', [728, 90], 'div-gpt-ad-1483720362247-3']
            ];

            /* After you have built your definedSlots this is where you will request bids. */

            if (window.OX) { 
               /* This will check if our JSTAG has finished loading. If it has then we will use .addSlots method to request bids. Otherwise it will use OX_dfp_ads to request.
               */

               OX.dfp_bidder.addSlots(oxUnits, oxDone);
            } else {
               OX_dfp_ads.push(
                  ['/18064236/TestPage_300x250', [[300, 250], [300,600]], 'div-gpt-ad-1483720362247-1'],
                  ['/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0']
                  ['/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4'],
                  ['/18064236/TestPage_728x90',  [728,  90], 'div-gpt-ad-1483720362247-3']);
            }

            /* Set a fail-safe to ensure that ads will display even if an exception occurs. */
            setTimeout(function () {
               if (!('OX' in window || 'oxhbjs' in window)) {
                  oxDone();
               }
            /* Time limit should not be lower than time limit of request. */
            }, 2500); 
         } catch (err) {
            // if there are any exceptions, release googletag
            googletag.pubads().refresh();
         }
      }());
   </script>

   <script>
      googletag.cmd.push(function() {
         googletag.defineSlot('/18064236/TestPage_300x250', [[300, 250],[300,600]], 'div-gpt-ad-1483720362247-1').addService(googletag.pubads());
         googletag.defineSlot('/18064236/TestPage_160x600', [160, 600], 'div-gpt-ad-1483720362247-0').addService(googletag.pubads());
         googletag.defineSlot('/18064236/TestPage_970x250', [970, 250], 'div-gpt-ad-1483720362247-4').addService(googletag.pubads());
         googletag.defineSlot('/18064236/TestPage_728x90', [728, 90], 'div-gpt-ad-1483720362247-3').addService(googletag.pubads());
        googletag.enableServices();
      });
   </script>
</head>

<body>
<div class="row text-center">
   <div id='div-gpt-ad-1483720362247-0' style='height:600px; width:160px;'>
      <script>
         googletag.cmd.push(function() {
            googletag.display('div-gpt-ad-1483720362247-0');
         });
      </script>
   </div>
   <div id='div-gpt-ad-1483720362247-1' style='height:250px; width:300px;'>
      <script>
         googletag.cmd.push(function() {
            googletag.display('div-gpt-ad-1483720362247-1');
         });
      </script>
   </div>
   <div id='div-gpt-ad-1483720362247-4' style='height:250px; width:970px;'>
      <script>
         googletag.cmd.push(function() {
            googletag.display('div-gpt-ad-1483720362247-4');
         });
      </script>
   </div>
   <div id='div-gpt-ad-1483720362247-3' style='height:90px; width:728px;'>
      <script>
         googletag.cmd.push(function() {
            googletag.display('div-gpt-ad-1483720362247-4');
         });
      </script>
   </div>
</div>
</body>

Feedback form