Set up PB with Video Prebid for GAM

For Google Ad Manager setups, add Player Bidding to an existing Video Prebid implementation with JW Player non-partners.

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.


Demo



Tutorial

📘

GOAL

After completing this tutorial, you should be able to answer the following question:
  • If I use GAM, how can I combine PB with an existing instance of Prebid.js?


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

  1. Add the JW Player library to the <head> of your page.
  2. 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".
  3. 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 JW Player.
const player = jwplayer('player').setup({
    "playlist": "{playlist_url or video_url}",
    "advertising": {
        "client": "googima",
        "tag": DFP_TAG,
        "bids": {
            "settings": {
                "mediationLayerAdServer": "dfp"
            },
            "bidders:" [
                /* JW Player 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.
});
  1. In the code you pasted in the previous step, replace {dfp_ad_tag} with your ad tag.
  2. Replace {playlist_url or video_url} with the URL of a playlist or video.
  3. Replace the advertising object with the advertising object in your text editor from step 2.


Did this page help you?