Table of contents
- Introduction
- What is Header Bidding?
- What is Header Bidding Wrapper?
- Header bidding wrapper vs. Prebid.js
- Header bidding wrappers
- How to set up Prebid.js
- Prebid.js integration with EXADS
- Conclusion
Introduction
Programmatic advertising has come a long way since its beginnings. There are several types of programmatic advertising like RTB (Real Time Bidding), Private Marketplace and Direct Deals. In this article, we try to tackle some key questions: what is header bidding, what is header bidding wrapper, and one of its most known implementations, Prebid.js. We look at how and why header bidding gained popularity and why Prebid came into existence. Finally, we explain some technical challenges of both Prebid.js and Prebid Server to help you decide which of these solutions is more suitable for you. Let's look into it!
What is Header Bidding?
The widespread definition of Header Bidding is known as a technical solution that allows Publishers to offer their impressions to multiple Ad Exchanges and demand partners at the same time, running an auction with all of them bidding against each other and making competition more fair.
Waterfall vs. Header Bidding improvements
Before header bidding, publishers were relying on waterfall or daisy chaining. Publishers usually have direct deals agreed for their premium inventory, but for the rest of their inventory, they generally use waterfall, which means making another request to the next demand partner until someone buys the impression. Waterfall prioritizes partners based on historical data, for example; highest bid, highest fill rate, lowest latency, etc.
Relying on a waterfall technique has its own pros but it requires more human input, such as adjusting priorities based on the average bid price from previous requests. Header bidding simplifies this because it is all done automatically, as bidding happens while the page is rendered.
In scenarios when publishers work with multiple ad exchanges, header bidding helps with getting the impression value in advance (before ad slots load on the page) instead of relying on the average prices that each exchange paid in the past. This is what makes competition fairer, everyone bidding on impressions in real-time.
One very important aspect is latency improvements since waterfall is using sequential requests when a previous request fails for any reason. In case an ad exchange is not able to provide an ad, the publisher is then forced to either not show an ad or perform another request. With header bidding, this all happens in advance and is known even before the page finalises rendering and everything the system has to do is to decide on a winning bid out of all the bids returned.
Revenue improvement is another important aspect. With the waterfall method, there are pre-defined priorities set up based on previous average bid prices for example. This means the winning bid is not competing with others and may not necessarily be the highest one the publisher could get. With header bidding, the publisher is able to guarantee the highest bid wins.
Lastly, we mentioned that with header bidding the whole demand side now bids against each other, however, it also gives more control to the publisher. By adding special deals or direct deals into the mix, the publisher can influence the way in which the bids compete.
Header Bidding Wrapper vs. Prebid.js
Header Bidding wrapper is a solution to overcome different requests and responses from different networks or Advertisers. Before wrappers were introduced you would have a different setup for every partner leading to more development time. Site performance was also affected due to more code that had to be executed for each partner request/response.
Prebid, which is an open source implementation used for Header Bidding, has a header wrapper, also known as Prebid.js, built on top of it, which gives Publishers more control over partner management, and in a much simpler way. It is the most widely used Header Bidding "container/wrapper" in the ad tech space with 300+ demand partners integrated. That means that it has one of the largest repositories of adapters publicly available online.
Prebid adapters are code modules provided by Ad Exchanges and demand side partners which are code reviewed, approved and merged by Prebid developers. These adapters exist to make the integration between Publisher websites and demand side platforms simpler than it used to be at the very beginnings of Header Bidding.
Simply put, it means that multiple Header Bidding solutions are being replaced with a single container/wrapper that is able to work with a range of 300+ partners just by specifying which partners’ adapters you want to work with.
Header Bidding Wrappers
There are two types of Header Bidding wrappers:
- Client side wrapper - Prebid.js
- Server side wrapper - Prebid Server
Client side wrapper or Prebid.js, handles the whole auction in the user's browser. Wrapper code and configs are added to the <head> tag of the website and all requests, responses, competition, and winner notifications happen directly on the client side. Prebid.js is used as the most common solution for this scenario and all adapters are written in JavaScript.
Server side wrapper or Prebid Server, as its name suggests, happens on the auction server, which is usually the publisher's server. The header script on the user's browser performs an initial call to the server which simplifies the whole header script. The client makes a request and gets a response with a winning bid; everything else is done at the server level. In this scenario, the wrapper adapters developed by ad exchanges and demand partners are written in server-side languages (Prebid supports Go and Java).
In order for ad exchanges and demand partners to be compatible with client and server side wrappers it's highly recommended they write their own adapters for both scenarios.
Advantages and disadvantages of Prebid.js and Prebid Server
The advantages of Prebid.js are that it offers much better transparency and visibility in real-time, as every request can be seen in the Dev Console the second it comes through.
Another advantage is cookie matching, where cookies can be shared directly with demand partners, making this part simpler. In order to use cookie matching via the server side some extra development logic needs to be implemented to leverage this feature.
The main disadvantages of Prebid.js are latency and page loading since all code needs to be executed as the page loads (same would happen with server side bidding but in that case we can leverage async requests in order to mitigate this problem).
Another disadvantage which is not always obvious is “Connections per Domain” and “Max Connections” for a browser. Different browsers have different limits but what can happen is that those limits can be hit on older browsers mainly, especially if the website uses a lot of demand partners and is opened in multiple tabs.
On the other hand, server side bidding avoids all these disadvantages but the Publisher loses the transparency made available by using Prebid.js.
Adapters for both can be found on Github:
How to set up Prebid.js
- Download the latest Prebid.js version including:
- Prebid core library
- Partner adapters you want to work with so that your codebase is smaller if you plan to work with only 10 partners out of 300+
- Specific features modules such as GDPR
This can be downloaded from the Prebid website.
-
Add extra code on your website to make all the above run smoothly. This will require help from the Publisher’s developer team or webmaster. For more information read the next paragraph.
Prebid.js integration with EXADS example
After getting familiar with header bidding and Prebid, it is now time to dive into technicalities. We prepared an example of how to integrate header bidding with EXADS RTB (Real Time Bidding).
The first requirement is that you have a publisher account with an EXADS-powered network. Once you have this you can follow the steps below. For the purpose of this tutorial, we will focus on an integration with a banner ad source.
Once you have a site registered in the network you are ready to create zones. Currently our adapter supports:
- Banner Ads
- Native Ads
- In-Stream Video Ads
- Outstream Video Ads
- Video Slider Ads
Each zone type supports different sizes. For example RTB Banner Supply supports a variety of sizes such as 300x250, 300x100, 300x300 and more.
After selecting the format you need to set up your zone. There are a few options available but default ones suit most clients. The only thing you need to do is to use your preferred zone name and select the partner, which in our case is OpenRTB v2.4.
After you click Create you will be redirected to a screen where you can find your RTB endpoint.
Take note of the URL returned. You will need four parameters to set up your Header Bidding. Three of them can be extracted by the URL as described here.
Let’s suppose to get this URL:
- Endpoint: This is the first part of the address.
- Fid: You can find it in the generated endpoint as fid parameter.
- ZoneId: This is also part of your endpoint, as idzone parameter.
- SiteId: You can find it on the Sites & Zones list once you click Back to Sites & Zones.
Please note, aside from the parameters mentioned above you will need to specify other parameters and settings. Check out our Documentation for more information.
After you have added all of the necessary parameters, you can download the Prebid.js library to continue setting up. Here’s what you need to do:
- Navigate to https://docs.prebid.org/download.html;
- Select the EXADS module
- Now, you can select additional modules based on your needs:
- Prebid Video Module - this is required if you decide to use our RTB In-Stream Video example
- Consent Management (GDPR) - this is needed in order to use GDPR and it is required to use any of our available examples
- Click on “Get Prebid.js!” to download the file that you have just generated.
This is all that you need to set up on your Publisher account, the rest is done directly on your website.
For your convenience, below you can find links to the Prebid version and adapter files from our public Github repository as well as an example page:
- EXADS adapter
- Prebid.js library (You have to select EXADS and other modules that you need. The minimum Prebid.js version supported is 8.48.0)
Now you are ready to add Header Bidding code in the <head> of your website. To make it as easy as possible, we created an Example for you. It consists of two parts, client config and Header Bidding code. There is no need to change the Header Bidding code. You just need to update the client config part by changing endpoint, zoneId, fid and siteId to one that corresponds to your zone and endpoint and all other parameters mentioned above.
Note: When you download the library, the default file name is prebidVERSION.js. You need to change the Prebid.js filename in the script tag according to what you have downloaded previously.
Below you can find a fully functional example page using Prebid.js with EXADS Header Bidding integration:
Refresh your page and Voilà, you should be up and running.
Below are more Prebid.js code examples, which you have can use and customize based on your specific needs:
- RTB Image Banner
- RTB Video Banner
- RTB Native
- RTB In-Stream Video: as mentioned above, remember that this requires selecting the Prebid Video Module before downloading the library.
For more details relating to the different parameters utilized to integrate Prebid.js on your website and Publisher Panel, you can find additional information here.
Conclusion
This article aims to give you a better understanding of what Header Bidding and wrappers are, how to implement Prebid.js, and its limitations. Although there are other techniques that are popular, like Waterfall, header bidding is a great option for growing and diversifying your business.
Prebid.js and Prebid Server give you flexibility depending on the amount of inventory you have and things you want to track or the way you want to optimize your traffic. Prebid.js gives you more transparency while Prebid Server enables you to store different kinds of logs that can help you optimize in the future.
The example of setting up Prebid.js with EXADS shows you how easily you can monetize your website. And while you may still require some technical knowledge to get things working, it should help you get a grasp of it and make a decision if Prebid.js suits your business or not.
If you want to kickstart your programmatic advertising, then contact our team and start planning your journey!