Tutorial: Header bidding

In this tutorial we'll show how to setup header bidding for video embeds originating from Flowplayer Video platform.

In order to apply this functionality you need to be able to add some JavaScript code to your website.

Introduction

In order to achieve header bidding with platform embedded videos you need to complete five steps:

1. Setup header bidding on your website
2. Add an ad tag to pick up the header bidding setup
3. Create an ad schedule that uses the created ad tag
4. Create a player configuration that uses this ad schedule
5. Embed a video using the created player configuration

In this tutorial we are using the Prebid.js library, but you can adapt the code to work with any header bidding library of your choice.

Setup header bidding

In your website (or your CMS templates, depending on the technology running your website) you need to add two <script> tags that are included on on all your pages:

• The Prebid.js library
• The global ad tag configuration

You can either write the JavaScript in a separate file or inline on your page.

The JavaScript should follow the Prebid.js example for the standalone player.

Example:

 <script src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
 <script>
 var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];

  const BIDDER1_PROVIDER = 'appnexus';
  const BIDDER1_PLACEMENT_ID = '13232361';

  // The ad tag in Flowplayer can be actual ad tag or promise to an ad tag.  
  // We return the ad tag if it is available before the player is ready to play  
  // Otherwise the player waits for 2 secs for tag to be available.

  var adtag = null
  var timeout = 2000
  window.prebid_fetcher = function() {
    if (adtag) return Promise.resolve(adtag)

    return new Promise(function (resolve) {
      setTimeout(function() {
        resolve(adtag)
      }, timeout)
    })
  }

  /*
   Prebid Video adUnit
   */

  var videoAdUnit = {
    code: 'video1',
    sizes: [640,480],
    mediaTypes: {
      video: {
          context: 'instream',
          playerSize: [640, 480],
          mimes: ['video/mp4'],
          protocols: [1, 2, 3, 4, 5, 6, 7, 8],
          playbackmethod: [2],
          skip: 1
      }
    },
    bids: [
      {
        bidder: BIDDER1_PROVIDER,
        params: {
          placementId: BIDDER1_PLACEMENT_ID
        }
      }
    ]
  };

  pbjs.que.push(function(){
    pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request

    pbjs.setConfig({
      debug: true,
      cache: {
        url: 'https://prebid.adnxs.com/pbc/v1/cache'
      }
    });

    pbjs.requestBids({
      bidsBackHandler: function(bids) {
        var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
          adUnit: videoAdUnit,
          params: {
            iu: '/19968336/prebid_cache_video_adunit',
            cust_params: {
              section: "blog",
              anotherKey: "anotherValue"
            },
            output: "vast"
          }
        });
        adtag = videoUrl;
      }
    });
  });
</script>

In the example above please note the window.prebid_fetcher function we define. That's part of the magic sauce.

Ad an ad tag

The next step is to go to your dashboard and create a new ad tag with a special URL flowplayer://prebid_fetcher:

The flowplayer:// URL scheme will tell the player that it's a special ad tag. It will make the player look for the function window.prebid_fetcher that we defined in the previous step from the global scope.

Create an ad schedule

Next we create a new ad schedule and configure it to use the ad tag we created in previous step:

You want to add a name for your schedule and add the ad tag we created as a preroll.

Create a player configuration

We are closing to the end of this tutorial. The last configuration step is to add a player configuration that uses the ad schedule we created:

Note the ad schedule we selected. It matches the ad schedule we created in the previous step.

Embed video

Next you need to navigate to a video you want to embed. Hit the embed code and select the player configuration we created. Make sure to select the JavaScript embed method.

Hit Copy to clipboard.

Copy paste the embed code to your webpage:

Example:

<div data-player-id="198368bd-a76e-40a1-be13-35805feef245"><script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">{"src": "de3f6ca7-2db3-4689-8160-0f574a5996ad"}</script></div>

It should result into a player doing header bidding and serving you a preroll ad: