Set up PB with Video Prebid for GAM (Web Player)

If you have an existing Video Prebid implementation and some of your ad partners are not integrated with PB, you can still use PB. PB permits multiple, side-by-side video bidding implementations.

Set up Player Bidding

If you manage your line items in Google Ad Manager (GAM), use the following steps to implement PB with an existing Video Prebid implementation or Amazon TAM:

Add the JWP library to the <head> of your page.
In a text editor, follow the steps to create the advertising object for setting up PB for GAM mediation.

⚠️
Be sure to set "tag": "DFP_TAG".

Copy and paste the following code to your page.

// Your line-item configured DFP tag.
const DFP_TAG = '{dfp_ad_tag}';

// Timeout in case Prebid.js doesn't load.
const FAILSAFE_TIMEOUT = 3_000; // 3s.

// Set-up Prebid on the page.
const pbjs = window.pbjs = window.pbjs || {};
pbjs.que = pbjs.que || [];
pbjs.que.push(() => {
    pbjs.setConfig({
        debug: true
    });
});
const pbjsLoaded = new Promise((resolve, reject) => {
    pbjs.que.push(resolve);
    setTimeout(reject, FAILSAFE_TIMEOUT);
});

// Callback which performs Prebid.js header bidding.
function performAsyncBidding(player, item, index) {
    const videoAdUnit = {
        code: `video-${index}`,
        mediaTypes: {
            video: {
                playerSize: [
                    // Dimensions might not be final while player is setting up.
                    player.getWidth() || 640,
                    player.getHeight() || 360
                ],
                context: 'instream'
            }
        },
        bids: [{
            // Existing non-partner bidder settings
        }]
    };
    return new Promise(resolve => {
        pbjs.addAdUnits(videoAdUnit);
        pbjs.requestBids({ bidsBackHandler: resolve });
    }).then(() => {
        // Make sure you are using Prebid.js with the DFP Video module.
        return pbjs.adServers.dfp.buildVideoUrl({
            adUnit: videoAdUnit,
            url: DFP_TAG
        });
    });
}

// Set-up JWP.
const player = jwplayer('player').setup({
    "playlist": "{playlist_url or video_url}",
    "advertising": {
        "client": "googima",
        "tag": DFP_TAG,
        "bids": {
            "settings": {
                "mediationLayerAdServer": "dfp"
            },
            "bidders:" [
                /* JWP Player Bidding SSP partner configuration */
            ]
        }
    }
});
player.setPlaylistItemCallback((item, index) => {
    return pbjsLoaded // Wait until Prebid.js is loaded.
        .then(() => performAsyncBidding(player, item, index)) // External bidding.
        .then(tag => {
            // Update the playlist item.
            return Object.assign({}, item, {
                adschedule: [{
                    tag,
                    offset: 'pre'
                }]
            });
        }).catch(() => item); // If bidding fails, use unmodified playlist item.
});

In the code you pasted in the previous step, replace {dfp_ad_tag} with your ad tag.
Replace {playlist_url or video_url} with the URL of a playlist or video.
Replace the advertising object with the advertising object in your text editor from step 2.

💡
Combining with Player Bidding: If you have an existing Prebid implementation and some of your ad partners are not integrated with Player Bidding, you can still use this implementation with a JW Player instance configured to use Player Bidding.