Integrate Prebid Video

HTL BID does not run the Prebid Video auction, but can help manage the following:

Prebid Video IDs
Add the Prebid Video module in the pbjs configuration
Provide code to implement directly on the page to extract the Video Prebid IDs

How to configure Prebid Video

1) In HTL BID

a. Select the “Prebid Video” checkbox in Tech Config > Services

b. Add the Video Prebid IDs in a new dedicated Prebid ID Group called “outstream”, “VAST Video” or similar so it can be easy to identify. It should not be tied to any slots in the Ad Configuration.

In the Prebid ID Group (eg. “outstream”) add the AppNexus PlacementId=13232361 (for testing purposes only, it’s guaranteed to bid every time)

2) On the page and GAM

Use this sample source code to extract IDs from HTL BID and use them to run a video auction (requires section 1 be completed):

<html>

<head>
    <title>PBJS Video</title>
</head>

<body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
    <script src="https://dev.htlbid-staging.com/stage/v3/test.com/htlbid.js"></script>

    <script>
        window.htlbid = window.htlbid || {};
        htlbid.cmd = htlbid.cmd || [];
        window.pbjs = window.pbjs || {};
        pbjs.que = pbjs.que || [];


        htlbid.cmd.push(() => {
            pbjs.que.push(() => {
                // create the video slot
                const videoAdUnit = {
                    code: 'video1',
                    mediaTypes: {
                        video: {
                            context: 'instream',
                            playerSize: [640, 480],
                            mimes: ['video/mp4'],
                            protocols: [1, 2, 3, 4, 5, 6, 7, 8],
                            playbackmethod: [2],
                            skip: 1
                        }
                    },
                };
                
                // set HB IDs from HTL BID UI
                videoAdUnit.bids = htlbid.config.prebidGroups.outstream;

                // run the auction
                pbjs.addAdUnits(videoAdUnit);
                pbjs.setConfig({
                    debug: true,
                    cache: {
                        url: 'https://prebid.adnxs.com/pbc/v1/cache'
                    }
                });
                
                pbjs.requestBids({
                    bidsBackHandler: bids => {
                        // create the GAM VAST tag
                        // using buildVideoUrl() will automatically include prebid KVs
                        // but you can also do it yourself by extracting them
                        // from the bids array ^^
                        const videoUrl = pbjs.adServers.dfp.buildVideoUrl({
                            adUnit: videoAdUnit,
                            params: {
                                iu: '/19968336/prebid_cache_video_adunit',
                                cust_params: {
                                    section: 'blog',
                                    anotherKey: 'anotherValue'
                                },
                                output: 'vast'
                            }
                        });
                        // run the video player with that tag
                        window.invokeVideoPlayer(videoUrl);
                    }
                });
            });
        });
    </script>

    <div class="example-video-container">
        <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640' height='480'>
        <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
        <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
        <source src="https://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
        </video>
    </div>


    <script>
        const vid1 = videojs('vid1');
        function invokeVideoPlayer(url) {
            videojs("vid1").ready(function() {
                var player = this;
                var vastAd = player.vastClient({
                    adTagUrl: url,
                    playAdAlways: true,
                    verbosity: 4,
                    vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                    autoplay: true
                });
                player.muted(true);
                player.play();
            });
        }

    </script>

    <pre>
        VideoJS header bidding example

        Note: AppNexus will not bid on localhost. So you may need to use source overrides an set the domain to "example.com" in order to test this
    </pre>

</body>

</html>

This is largely boilerplate code adapted from https://docs.prebid.org/examples/video/instream/videojs/pb-ve-videojs.html, with the biggest difference being this critical line of code:

videoAdUnit.bids = htlbid.config.prebidGroups.outstream;

The sample code sends the request to GAM after running the auction. You can adjust the bidsBackHandler to instead do something else with the bids, such as rendering the video directly, without going through GAM.

To do that, you need to get the video from the Prebid Cache. When the video auction runs, each bid is associated with a UUID. That UUID goes into a “prebid cache” server. To fetch the actual video file, you have to make a request to the cache server, inserting the UUID of your bid into this URL, replacing %%UUID%% with the actual UUID: https://prebid.adnxs.com/pbc/v1/cache?uuid=%%UUID%%

This “fetch the creative from Prebid cache” step is only necessary if you want to avoid GAM for video. If you DO want to use GAM, then you’ll need GAM Video Line Items for Prebid, and everything Prebid cache related would be handled there instead.

With regard to setting up GAM line items, HTL should be able to set these up for you as long as the necessary GAM access is given (Administrator role). This access can be temporary while the Line Items are created.