Description of how Prebid works

[htlcorp]

There are 3 main things that need to happen to integrate Prebid:

• Make the Prebid library available on the page
• Attach bidder IDs to existing AdUnit structure
• Call Prebid functions to actually run the bidding process

Make Prebid Available on the page

We need to include the Prebid.js javascript library from https://github.com/prebid/Prebid.js

This library contains two things:

1. the adapters for individual ad networks (60+ adapters)
2. the methods to orchestrate the whole bidding process

We will want to build a custom version that only includes the adapters we actually use. This is pretty straightforward, the library can be built on the command line using something like:

git clone https://github.com/prebid/Prebid.js.git
cd Prebid.js
yarn install #or npm install
gulp build --modules=openxBidAdapter,rubiconBidAdapter,etc...

And then you get a minified .js file at

Prebid.js/build/dist/prebid.js

We're thinking this script will go directly into the page source. But alternatively, this build process could become part of Bulbs itself.

Attach bidder IDs to existing Ad Units

Prebid wants to see something like this:

// an array of ad unit configs
var adUnits = [
	{
	    code: "btf-300-flex", // the DIV id
	    sizes: [
	        [300, 250],
	        [320, 50]
	    ],
	    bids: [ // an array of bids
	    {
	        bidder: "aol",
	        params: {
	            placement: "123456",
	            network: "1234.56",
	            sizeId: "170"
	        }
	    },
            // ...
	    {
	        bidder: "rubicon",
	        params: {
	            accountId: "123456",
	            siteId: "123456",
	            zoneId: "123456"
	        }
	    }]
	}
    // ...
];

There is some additional tricky stuff here around ensuring the correct sizes are sent when handling responsiveness and multi-size, but nothing unmanageable. That structure should be pretty easy to add to the existing AdUnit setup, since they are both "div oriented"

Call Prebid functions to actually run the bidding process

Once we've got the library loaded and the configuration defined, we just need to call the actual Prebid methods.

// prebid uses the same queue trick as Google/Index/Amazon
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

// specify the callback function that sets DFP targeting and sends the ad request to DFP
function sendAdserverRequest() {
    if (pbjs.adserverRequestSent) return;
    pbjs.adserverRequestSent = true;
    googletag.cmd.push(function() {
        pbjs.que.push(function() {
            pbjs.setTargetingForGPTAsync();
            googletag.pubads().refresh();
        });
    });
}

// convert the existing AdUnit structure into the format that Prebid likes
var adUnits = someMapFunction(AdUnits.units);

// actually send the bids
pbjs.que.push(function() {
    pbjs.addAdUnits(adUnits);
    pbjs.requestBids({
        bidsBackHandler: sendAdserverRequest
    });
});

// configurable timeout to give up if some bids are too slow
// this will send the bids we've already got to DFP, and ignore the slow ones
setTimeout(function() {
    sendAdserverRequest();
}, 2000);

Out of the box, this is pretty simple, but it gets a little trickier when we also need to coordinate with A9, reload ads upon viewport size changes, do lazy loading, etc. Much of that logic is already cleanly separated in Bulbs, so integration should be pretty straightforward. Of course, as with many libraries, there are also a lot of other settings/options that can be tweaked both of the individual bidders, and for Prebid itself.