The Simplest Way to set up Video Header Bidding with OneVideo

Introducing the OneVideo Built-In Outstream Player for Header Bidding.

ONE Video’s Header Bidding Adaptor now provides publishers with a free built-in Outstream video unit eliminating the need to integrate with 3rd party players. Setting up video header bidding couldn’t be simpler than this.

In this article, we explain the full process of setting up a publisher page with Outstream Video Header Bidding including links to our LIVE DEMO and a DEMO PROJECT you can download.

Advantages: 

  • No need to integrate with a Player.
  • Tap directly into Outstream Video Demand.
  • Simple prebid.js plug and play.
  • Client side responsive outstream units.

 

Get started in 6 easy steps

  1. Contact OneVideo for your account setup.
  2. Download Prebid.js + OneVideo Adaptor.
  3. Embed Prebid.js in your page header.
  4. Declare your Outstream ad unit for auction.
  5. Designate an HTML element to contain the Outstream unit.
  6. Invoke prebid.js to run the auction and render the winner.

Note: See our Testing & Troubleshooting section for Proof of concept credentials, base project and live demo.

 

Step 1: Contact OneVideo for Account Setup

Before you start, please perform the following 2 steps: 

  1. contact your OneVideo Account Manager and please provide then with the following information so we may set your account up for Header Bidding:
    A. Your organization name/ID (If you do not have one, we can provide one for you)
    B. A list of all your publisher domains you intend to run your Header Bidding auctions from.

    In return, we will provide you with a unique ‘Publisher_ID’ required for your client-side Adaptor setup.
  1. Please add/verify that your Organization ID is added to your Ads.txt under advertising.com file.
    For example:
advertising.com,YOUR_ORGANIZATION_ID, DIRECT #video
advertising.com, 123456, DIRECT #video

 

Step 2: Download Prebid.js + OneVideo Adaptor

To download Prebid.js including the OneVideo Adaptor, perform the following steps: 

  1. Go to http://prebid.org/download.html
  2. Select a Prebid version of 2.23.0 or above.
  3. Select the OneVideo checkbox to include our adaptor.
  4. Click on ‘Get Prebid.js!

 

Step 3: Embed Prebid.js in your page <head>

After downloading and hosting the prebid.js file, you need to reference it in your site’s page head, to do so perform the following steps: 

  1. Open your site’s HTML template using the code editor of your choice.
  2. Add an HTML script tag that will reference your prebid.js file so your page will load it.
    For example: 
 <script src="./prebid2.23.0.js"></script>

Note: In this example, we are referencing a locally hosted file within our project.

 

 

Step 4: Declare your Outstream ad unit for auction

The adUnits variable is the prebid.js standard of defining your ad opportunities intended to be auctioned. Here you will need to declare one adUnit for your outstream ad opportunity. 

In the following example, we are defining a Video adUnit that is specifically using just the OneVideo bidder. The Object within the bids: array is the OneVideo Bid Adaptor configuration.

You can copy and paste the following example. Make sure to update the following 3 properties:
code, playerWidth, playerHeight.

const videoAdUnits = [{
           code: 'video1',
           mediaTypes: {
               video: {
                   context: 'outstream',
                   playerSize: [640, 480]
               }
           },
           bids: [
           /**This is the OneVideo Bidder Configuration Object - refer to */
               {
                   bidder: 'oneVideo',
                   params: {
                   /**Optional: Set a bid floor price.*/
                       Bidfloor: 10,
                       video: {
                   /**Define the actual playerWidth & playerHeight.*/
                           playerWidth: 640,
                           playerHeight: 480,
                           mimes: ['video/mp4', 'application/javascript'],
                           protocols: [2, 5],
                           api: [1,2],
                           delivery: [2]
                       },
                       /**Replace the 'Publisher_ID' placeholder with the one  */      
                      /** provided by OneVideo in Step 1*/
                       pubId: 'Publisher_ID'
                   }
               }
           ]
       }];

For the official Prebid.js documentation on how to declare a Video adUnit Click here.

 

Step 5: Designate a containing element for the Outstream unit

In your page HTML body create a new block element or designate an existing one with a CSS id selector. Set the value of the id selector must be identical to the name of your adUnit’s code name. Additionally, you will need to define the element’s width as the Outstream unit is responsive to its parent element.

For example: 
If you declared the “code” value for your adUnit in step 3 as 'video1'

 const videoAdUnits = [{
          code: 'video1'
         . . . /**Rest of the ad unit declaration below */
}]

then the id of your element should identical:

<div id="video1"></div>  

Additionally, set the width of the element to the size declared in your adUnit. Because we defined playerWidth in step 3 as 640px we will do the same here.

<div id="video1" style="width:640px;"></div>

 

Step 6: Invoke prebid.js to run the auction and render the winner

After setting everything up, you can now invoke prebid.js to run the auction and load the winning ad. In this example we are using the prebid.js template to invoke the auction and define a winner on the client using the highest CPM method.

Copy and paste the following script tag to your page after the adUnit declaration:

Important!
Make sure you are passing the correct adUnit code value as an argument to the getHigestCpmBids() method. The argument should be passed as a string value. 

pbjs.que.push(function() {
      pbjs.addAdUnits(videoAdUnits)
      pbjs.requestBids({
          timeout: 2000,
          bidsBackHandler: function(bids) {
             let highestCpmBids = pbjs.getHighestCpmBids('video1');
             pbjs.renderAd(document, highestCpmBids[0].adId);
          }
      })
}); 

 

  

Testing & Troubleshooting

Take a look at our LIVE DEMO or download our DEMO PROJECT.

Important! The demo project is for reference only and uses placeholders that must be changed in order to work.
If you are trying to test, please use the following settings: 

  1. Set your Publisher_ID value in the adUnits configuration to HBExchange.
    This is our demo account you can use to see if your integration works.
  2. Pass a site object with the  following page and ref override values to simulate previously whitelisted domains. place the site key and object before the pubId key.
const videoAdUnits = [{
           code: 'video1',
           mediaTypes: {
               video: {
                   context: 'outstream',
                   playerSize: [640, 480]
               }
           },
           bids: [
               {
                   bidder: 'oneVideo',
                   params: {
                       Bidfloor: 10,
                       video: {
                           playerWidth: 640,
                           playerHeight: 480,
                           mimes: ['video/mp4', 'application/javascript'],
                           protocols: [2, 5],
                           api: [1,2],
                           delivery: [2]
                       },
                     /**Pass a site object with page and ref values */
                       site: {
                           id: 1,
                           page: 'https://www.amazonaws.com',
                           ref: 'https://www.amazonaws.com/10'
                       },
                       pubId: 'Publisher_ID'
                   }
 }]}];

 

Limitations 

  • The OneVideo Outstream Player will only load if the winning bid is from OneVideo.
  • A target HTML Element must be defined with valid CSS id selector for the Outstream unit to inject itself into.
  • The Outstream unit is responsive and therefore depends solely on the size of the Element it is injected into for sizing.
  • You must declare the actual width of the target element to communicate to Demand partners the true size of your ad opportunity.
Have more questions? Submit a request