Prebid.js is an increasingly popular open-source solution for gathering bids from a publisher’s demand partners. Using Prebid requires simple to moderate javascript development by the publisher. Broadstreet can be configured to work with Prebid.js.

Here is the general flow of working with Prebid:

  1. Set up Prebid creatives in Broadstreet, optionally separated by demand partner
  2. Include both Prebid and Broadstreet header code onto the publisher’s website
  3. Pass a list of ad units and subsequent demand partner configuration items into Prebid
  4. Wait for a response of bids from demand partners
  5. Collect winning bids for each ad unit
  6. Initialize the adserver, passing targeting that would invoke the campaign of the winning bidder and specify the winning Prebid ad id.

Steps to Implementation

There are several ways that Prebid could be implemented with Broadstreet, although the process is generally similar among all of them.

Set Up Prebid Tags

The first step is to set up Prebid tags inside Broadstreet.

First, we’ll click Advertisers, and click “New Advertiser” on the top right.

Next, we’ll create an HTML advertisement.

Note: You can repeat the steps that follow for each of your demand partners and ad sizes. In this example, we’ll only create one creative that can be used for multiple demand partners in a 300×250 unit.

Once the Prebid advertiser has been created, click “New Advertisement” on the top right. Select the second ad format option, the HTML / 3rd Party Code.

Paste in the following code. When delivered, the creative will tell Prebid to display the creative from the winning bidder inside an iframe. Be sure to change the width and height settings of the iframe in the code to match your needs.

The above code in the interface:

Scroll down. Do not set the width and height fields below the HTML field. This will prevent the code from accessing Prebid in the parent window.

Save the ad.

Set Up Prebid Campaign(s)

Once the advertisement is saved, scroll down to the “Quick Campaign” area. Select the ad unit you would like the ad to run in and click “Create Campaign.”

On the next page, click “Edit Campaign.”

On the Weight tab, you can choose “Remnant” if you would like this tag to backfill when there aren’t campaigns of a higher weight competing against it.

You can also optionally set a keyword, such as a partner’s bidder code, along with “Keyword Exclusivity.” This is useful if you intend to set up different prebid creatives for each demand partner, so you can track which partners deliver winning bids most frequently.

Set any other required settings and save the campaign. Your prebid creative should now backfill.

Configure the site for Prebid

Like many adservers, Broadstreet can be initialized programmatically. Typically Prebid acquires bids, the winning bid is determined, and the adserver is initialized with certain targeting parameters.

Example code follows. Note that zone “12345” is an example zone id that would correspond to the Medium Rectangle zone we targeted our campaign to earlier.

At this point, your website should be fully configured for prebid. Information is also available for publishers who would only like to execute a Prebid when a zone is empty.