Understanding Prebid.js: A Simple Guide to Header Bidding

2025-04-1

Want to make more money from your website's ads? That's where header bidding comes in. It's like having multiple advertisers compete in a real-time auction for your ad space. Prebid.js is the most popular tool that makes this happen. Let's break down what it is and how it works.

What is Prebid.js?

Think of Prebid.js as a traffic controller for ads. It's a free tool that lets multiple advertisers bid for your ad spaces at the same time, helping you get the best price for each ad spot on your website. For more detailed information, check out the official Prebid.js documentation.

How Does Prebid.js Work?

Here's what happens behind the scenes:

Image source: Prebid.org Documentation

1. Getting Started

If you're ready to implement Prebid.js on your website, you can follow the getting started guide which provides step-by-step instructions. Here are the basic steps:

• Add Prebid.js to your website
• Set up which ad spaces you want to sell
• Choose which advertisers can bid on your ads

2. The Bidding Process

• When someone visits your page, Prebid.js asks all your chosen advertisers: "How much will you pay for this ad space?"
• Advertisers quickly respond with their offers
• Prebid.js collects all the bids
• The highest bidder gets to show their ad

3. Showing the Ad

The winning bid goes to your ad server (usually Google Ad Manager), which then displays the winning ad on your page. All of this happens in milliseconds!

Example Setup

// Basic Prebid.js Setup
pbjs.que.push(function() {
    pbjs.addAdUnits({
        code: 'div-1',
        mediaTypes: {
            banner: {
                sizes: [[300, 250], [728, 90]]  // Common ad sizes
            }
        },
        bids: [{
            bidder: 'appnexus',  // Example advertiser
            params: {
                placementId: '12345678'
            }
        }]
    });

    // Start the auction
    pbjs.requestBids({
        timeout: 1000,  // Wait 1 second for bids
        bidsBackHandler: function() {
            // Show the winning ad
            googletag.cmd.push(function() {
                pbjs.setTargetingForGPTAsync();
                googletag.pubads().refresh();
            });
        }
    });
});

Other Options Besides Prebid.js

1. Google Open Bidding

• Run by Google
• Easier to set up
• Less control over how it works

2. Amazon's Ad System (TAM)

• Run by Amazon
• Good if you want Amazon's advertisers
• Need to partner with Amazon first

3. Custom Solutions

• Build your own system
• Complete control over everything
• Costs more time and money to build

How to Choose What's Right for You

Ask yourself these questions:

• How tech-savvy is your team?
• How much money do you want to make from ads?
• How fast does your website need to be?
• How much control do you want over your ads?
• What ad tools are you already using?

Wrapping Up

Prebid.js is popular because it's free, transparent, and gets the job done well. While there are other options, most websites start with Prebid.js because it's easier to understand and use. The key is picking what works best for your website and your team's skills.