Instream video with HBM and GAM

This document explains how to use instream video with HBM and Google Ad Manger along with an example using Brid Player.

Using instream-video with HBM works similar as when banner/outstream placements. The implementation is designed in such way so that a single Prebid auction can load both banner + instream placements. This is in order to improve page-load performance so that a video pre-roll placement can load simultaneously as the normal banner placements.

Re-build Prebid.JS with the necessary modules

The first step is to include the necessary Prebid modules, this includes:

  • dfpAdServerVideo - This module is required in order to make it work.
  • instreamTracking (optional) - This module is necessary for the Headerbid Analytics (HBA) Reports to include the instream revenue. (notice: there are certain situations where this reporting will not work properly depending on the video-player implementation)

To include these module with the bundled Prebid.js, follow these steps:

1

  • Select Global programmatic tag
  • Select Manage builds
  • Click on the build you want to update, you might only have one build as above.

2

  • In the Extra modules field, add dfpAdServerVideo and (optionally) instreamTracking.
  • Click Save and you'll get some UI-feedback that Prebid is being rebuilt. This might take a few minutes, and you don't need to stay on the page anymore.

Create an instream placement type

For instream you'll need special placement types of type Instream video that you can create like below:

3

It's recommended to add a dimension like in the image, this will be used as the default playerSize unless it's explicitly set in the Instream video settings (see below).

In Prebid parameters (on any level, for example on the placement type itself) you can edit the Instream video settings:

4

Notice that, in contrast to when using outstream - these settings doesn't control the player in any way. Instead this information is only propagated to the SSPs - so it is just a way to declare your inventory to buyers.

Adding instream placements

This works exactly the same as for other placements except that you'll use the instream placement type created above:

5

You can then add the placement to the normal prebid configuration(s) your using for the site.

Implementation with example using Brid Player

This example (live sample here) is using the Brid.TV player, but the concept is the same for other players.

Sample code:

<html>
<body>
<script src="//services.brid.tv/player/build/brid.min.js"></script> 
<script async src="https://zee-cdn.relevant-digital.com/static/tags/6204e5fa70e3ad10821b84ff.js"></script>
Instream Video
<div id="playerDiv" class="brid" style="width:640;height:408;"></div>
<script>
window.relevantDigital = window.relevantDigital || {};
relevantDigital.cmd = relevantDigital.cmd || [];
relevantDigital.cmd.push(() => {
    relevantDigital.addPrebidConfig({ consentManagement: { cmpApi: 'none' } }); // JUST for this test-page!!!
    
    /** Define "video slots", the concept is similar to using <div data-ad-unit-id="??"> or calling
     * googletag.pubads().defineSlot([path], ..) manually - except that they doesn't correspond to any <div>.
     * But the ids (obtained by getSlotElementId()) can be used e.g. as the allowedDivIds parameter to loadPrebid
     */
    const PRE_ROLL_IDS = relevantDigital.defineVideoSlots([
        { path: '/19968336/prebid_cache_video_adunit' },
    ]).map((s) => s.getSlotElementId());
    

    // Call relevantDigital.loadPrebid() "as normal", this will also load the video slots we created.
    relevantDigital.loadPrebid({
        configId: '6204e83a077c5825441b8508',
        manageAdserver: true,
        // allowedDivIds: PRE_ROLL_IDS, // uncomment this line to *only* load our pre-rolls
    });
    
    // Wait for the "video slots" to be loaded, order of this call and relevantDigital.loadPrebid() doesn't matter
    // Notice however that if no corresonding relevantDigital.loadPrebid() call is made, the callback will not be called
    relevantDigital.loadVideoUrls(PRE_ROLL_IDS, (urls) => $bp("playerDiv", {
        id: "33423",
        width: "640",
        height: "480",
        playlist: "18250",
        Ad: [{
            adType: "0", // pre-roll
            adTimeType: "s",
            adTagUrl: urls.map((url) => url + "&brid_parser=brid"), // Use Brid parser, instead of IMA SDK to make Header bid reports work (optional)
        }],
    }));
});
</script>
</body>
</html>