Prebid.js Implementation: Step-by-Step Guide for Publishers

This step-by-step guide walks publishers through implementation, troubleshooting common issues, and optimizing for better yield with practical examples.

DAte

May 7, 2025

Key Takeaways:

Prebid.js is an open-source header bidding solution that helps publishers increase ad revenue by enabling multiple demand partners to bid simultaneously
Implementation requires adding the Prebid.js library to your site, configuring bidder adapters, and setting up price granularity in your ad server
Common challenges include timeouts, browser compatibility issues, and bid discrepancies
Regular monitoring and optimization are essential for maximizing revenue potential
Setup complexity varies based on publisher size, existing ad stack, and technical resources

What is Prebid.js and Why Should Publishers Care?

Header bidding revolutionized programmatic advertising by allowing multiple demand partners to bid simultaneously on ad inventory before making the ad request to the publisher's ad server. At the center of this revolution is Prebid.js, an open-source JavaScript library that manages the header bidding process.

Developed in 2015, Prebid.js has become the most widely adopted header bidding solution, with over 400 demand partners integrated. Unlike proprietary solutions, Prebid.js is maintained by Prebid.org, a nonprofit organization dedicated to fair and transparent ad monetization.

For publishers, implementing Prebid.js can lead to significant revenue increases, typically 20-30% according to various industry case studies. This boost comes from creating more competition for your inventory and reducing the dependency on a single demand source like Google AdX.

But lets be honest, the implementation can seem daunting, especially for publishers with limited technical resources. This guide aims to simplify the process and help you navigate the potential pitfalls.

Prerequisites: What You'll Need Before Starting

Before diving into the implementation process, make sure you have:

Access to your website's codebase - You'll need to add JavaScript code to your site's header
Google Ad Manager (GAM) or another ad server account - Prebid works with most ad servers, but GAM is most common
Relationships with demand partners - You'll need to establish relationships with SSPs like Rubicon, AppNexus, or OpenX
Ad units defined in your ad server - Make sure your ad units are properly configured
Basic understanding of programatic advertising concepts - It helps to understand terms like bid density, price floors, and timeouts

Additionally, having someone with JavaScript knowledge on your team will make the implementation process smoother, although the basic setup doesn't require advanced programming skills.

The Implementation Process: Step-by-Step

Let's break down the implementation process into manageable steps:

Step 1: Download and Set Up the Prebid.js Library

First, you need to download a customized version of Prebid.js that includes only the adapters (bidders) you plan to work with. This keeps the file size small and improves page load performance.

Go to the Prebid.js download page and select the bidder adapters you want to include. You can also choose additional modules like currency conversion, user ID modules, or analytics adapters.

Once you've downloaded the file, upload it to your server or use a CDN like Google Cloud Storage or Amazon S3.

Then, add the Prebid.js file to your website's header before the ad server's tag, like this:

<head>
    <!-- Other head elements -->
    <script src="path/to/your/prebid.js" async></script>
    <!-- Google Publisher Tag or other ad server code -->
</head>

The async attribute is important as it prevents Prebid.js from blocking your page's rendering.

Step 2: Define Your Ad Units for Prebid

Next, you need to define your ad units for Prebid. This involves creating a JavaScript array that specifies:

The code for each ad unit
Size specifications
Which bidders to include
Bidder-specific parameters

Here's a basic example:

var adUnits = [
    {
        code: 'div-gpt-ad-1234567890-0',
        mediaTypes: {
            banner: {
                sizes: [[300, 250], [300, 600]]
            }
        },
        bids: [
            {
                bidder: 'appnexus',
                params: {
                    placementId: 13144370
                }
            },
            {
                bidder: 'rubicon',
                params: {
                    accountId: '14062',
                    siteId: '70608',
                    zoneId: '335918'
                }
            }
        ]
    }
];

This configuration defines a single ad unit with the code matching your GPT (Google Publisher Tag) div ID. It specifies two sizes (300x250 and 300x600) and two bidders (AppNexus and Rubicon) with their specific parameters.

The parameters for each bidder are unique and provided by the demand partner when you set up your account with them.

Step 3: Configure Prebid Settings

After defining your ad units, you need to configure Prebid's global settings. The most critical settings include:

Timeout: How long (in milliseconds) to wait for bidders to respond
Price granularity: How precisely to bucket bid prices
Bidder sequencing: Whether to call bidders simultaneously or sequentially
User syncing: How to sync user IDs between different systems

Here's an example configuration:

pbjs.setConfig({
    debug: true,
    priceGranularity: 'medium',
    enableSendAllBids: true,
    bidderTimeout: 1000,
    userSync: {
        filterSettings: {
            iframe: {
                bidders: '*',
                filter: 'include'
            }
        },
        syncsPerBidder: 3,
        syncDelay: 3000
    }
});

This configuration sets:

Debug mode to true (helpful during implementation)
Price granularity to 'medium' (predefined set of price buckets)
Sends all bids to the ad server (not just the winning bid)
Sets a 1000ms (1 second) timeout for bidders
Configures user syncing to allow all bidders using iframes

The priceGranularity setting is particularly important as it determanes how bid prices are rounded, which must match your line item setup in your ad server.

Step 4: Integrate with Your Ad Server

Now comes the crucial part: integrating Prebid with your ad server. This example uses Google Ad Manager (GAM), the most common ad server used with Prebid:

function initAdserver() {
    if (pbjs.initAdserverSet) return;
    pbjs.initAdserverSet = true;
    googletag.cmd.push(function() {
        pbjs.que.push(function() {
            pbjs.setTargetingForGPTAsync();
            googletag.pubads().refresh();
        });
    });
}

// Request bids
pbjs.que.push(function() {
    pbjs.addAdUnits(adUnits);
    pbjs.requestBids({
        bidsBackHandler: initAdserver,
        timeout: 1000
    });
});

// Failsafe timeout to initiate ad server
setTimeout(function() {
    initAdserver();
}, 1500);

This code:

Defines a function to initialize the ad server
Adds the ad units to Prebid
Requests bids with a callback to initialize the ad server when bids return
Sets a failsafe timeout to ensure the ad server is called even if bids don't return in time

The pbjs.setTargetingForGPTAsync() function sets key-value targeting on your GPT ad slots based on the bids received.

Step 5: Set Up Line Items in Your Ad Server

The final step in the implementation is setting up line items in your ad server to correspond with the bid prices from Prebid.

For Google Ad Manager, you'll need to create:

A new order for Prebid
Price priority line items matching your price granularity
Creative with a snippet that references the winning bidder

For example, if you chose 'medium' price granularity, you'd create line items at $0.10 increments from $0.10 to $5.00 (resulting in 50 line items).

Each line item would target a specific hb_pb value (e.g., hb_pb=0.10, hb_pb=0.20, etc.) and contain a creative with a snippet like:

<script>
    var w = window;
    for (var i = 0; i < 10; i++) {
        w = w.parent;
        if (w.pbjs) {
            try {
                w.pbjs.renderAd(document, '%%PATTERN:hb_adid%%');
                break;
            } catch (e) {
                continue;
            }
        }
    }
</script>

This creative displays the winning creative from the appropriate bidder.

Common Challenges and Troubleshooting

Despite its benefits, Prebid.js implementation can present several challenges:

1. Timeouts and Latency Issues

One of the most common problems is bidders not responding within the set timeout, leading to fewer bids and potentially lower revenue.

Solution: Start with a conservative timeout (e.g., 1000ms) and gradually adjust based on bidder performance. Use Prebid's analytics adapters to monitor bidder response times. Consider lazy loading ads below the fold to prioritize critical content loading.

2. Line Item Setup Errors

Mismatches between your price granularity setting in Prebid and your line item setup in GAM can lead to bids not being monetized correctly.

Solution: Double-check that your line item targeting exactly matches the values being passed by Prebid. The Prebid Line Item Manager tool can help automate this process.

3. Browser Compatibility Issues

Sometimes Prebid might behave differently across browsers, especially older ones.

Solution: Test your implementation across multiple browsers and devices. Consider using feature detection and fallbacks for older browsers.

4. Discrepancies in Reporting

You may notice discrepancies between what Prebid reports and what your ad server or analytics show.

Solution: Implement an analytics adapter (like Google Analytics or Prebid Analytics) to get more granular data on the header bidding process.

5. GDPR and Privacy Compliance

With increasing privacy regulations, ensuring your Prebid setup is compliant can be challenging.

Solution: Implement the Prebid Consent Management module and stay updated on GDPR and other regulatory changes.

Optimizing Your Prebid Implementation

Once you have a functioning Prebid.js implementation, focus on optimization:

1. Add More Bidders Strategically

Start with a few reliable bidders and gradually add more based on performance. Not all bidders will perform well for your specific audience and content. Consider using supply path optimization (SPO) strategies to find the most efficient routes to demand.

2. Adjust Timeouts Based on Data

Use analytics to find the optimal timeout setting that maximizes bid participation without adding too much latency. This is essential for maintaining good load speed while capturing maximum bids.

3. Implement Bid Adapters

Different bidders perform better with different ad formats. Implement bid adapters that align with your inventory types (e.g., video, native ads, etc.).

4. Test Different Price Granularities

The default 'medium' granularity works for many publishers, but you might generate more revenue with 'high' or 'custom' granularity settings. This directly impacts your CPM rates.

5. Use Prebid Server

For publishers with high traffic, consider implementing Prebid Server to move the bidding process server-side, reducing latency and improving user experience.

Measuring Success and ROI

To determine if your Prebid implementation is successful, track these key metrics:

Revenue lift: Compare revenue before and after implementation
Bid rate: Percentage of auctions that receive bids
Win rate: Percentage of auctions won by Prebid bidders
Timeout rate: Percentage of bidders that don't respond in time
Page load impact: How Prebid affects your overall page performance

Tools like Google Analytics, Prebid Analytics, and your ad server's reporting can help you track these metrics.

Advanced Features to Consider

As you become more comfortable with Prebid, consider these advanced features:

1. User ID Modules

Implement user ID modules to improve user matching across different bidders, potentially increasing bid rates and CPMs.

2. First-Party Data Targeting

Use Prebid's targeting capabilities to pass first-party data to bidders, enabling more precise targeting and higher CPMs.

3. Currency Conversion

If you work with international bidders, the currency conversion module can help normalize bids to your preferred currency.

4. Multi-Format Support

Expand beyond banner ads to include video, native, and other formats in your Prebid implementation.

5. Prebid Mobile

If you have mobile apps, consider implementing Prebid Mobile to bring header bidding benefits to your app inventory.

Frequently Asked Questions

Q: How long does a typical Prebid.js implementation take?

A: For smaller publishers with straightforward setups, implementation can take 1-2 weeks. Larger publishers with complex requirements might need 1-2 months for full implementation and optimization.

Q: Will Prebid.js slow down my website?

A: When properly implemented with async loading and reasonable timeouts, the impact on page load times should be minimal. However, adding too many bidders or setting very long timeouts can affect performance.

Q: Can I use Prebid.js with non-Google ad servers?

A: Yes, Prebid.js works with most major ad servers, including Smart, Xandr, and others. The integration process varies slightly depending on the ad server.

Q: How many bidders should I include in my Prebid setup?

A: Start with 3-5 top-performing bidders and gradually add more based on performance data. More bidders can increase competition but may also impact latency.

Q: Does Prebid.js work with AMP pages?

A: Yes, Prebid offers specific support for AMP pages through Prebid Server.

Q: How often should I update my Prebid.js implementation?

A: Check for updates every 3-6 months. Regular updates ensure you have access to new features, bug fixes, and additional bidder adapters.

Implementing Prebid.js requires careful planning and attention to detail, but the potential revenue benefits make it worthwhile for most publishers. By following this step-by-step guide and continuously optimizing your setup, you can maximize your programmatic advertising revenue while maintaining a good user experience.

Remember that header bidding technology continues to evolve, so staying informed about new Prebid features and best practices is essential for long-term success.

THE STACK

Buzz

Academy

Miniz

Tools & Sources

Dive Into a Topic

Monetization Basics

Ad Platforms & Networks

Programmatic Advertising

Optimization & Analytics

In-App Monetization

Web Monetization

Privacy & Regulation

Programmatic Video

Advanced Tactics

Newsletter

No Noise. Just Real Monetization Insights.

Join the list. Actionable insights, straight to your inbox. For app devs, sites builders, and anyone making money with ads.

Newsletter

No Noise. Just Real Monetization Insights.

Join the list. Actionable insights, straight to your inbox. For app devs, sites builders, and anyone making money with ads.

Prebid.js Implementation: Step-by-Step Guide for Publishers

Prebid.js Implementation: Step-by-Step Guide for Publishers

Key Takeaways:

What is Prebid.js and Why Should Publishers Care?

Prerequisites: What You'll Need Before Starting

The Implementation Process: Step-by-Step

Step 1: Download and Set Up the Prebid.js Library

Step 2: Define Your Ad Units for Prebid

Step 3: Configure Prebid Settings

Step 4: Integrate with Your Ad Server

Step 5: Set Up Line Items in Your Ad Server

Common Challenges and Troubleshooting

1. Timeouts and Latency Issues

2. Line Item Setup Errors

3. Browser Compatibility Issues

4. Discrepancies in Reporting

5. GDPR and Privacy Compliance

Optimizing Your Prebid Implementation

1. Add More Bidders Strategically

2. Adjust Timeouts Based on Data

3. Implement Bid Adapters

4. Test Different Price Granularities

5. Use Prebid Server

Measuring Success and ROI

Advanced Features to Consider

1. User ID Modules

2. First-Party Data Targeting

3. Currency Conversion

4. Multi-Format Support

5. Prebid Mobile

Frequently Asked Questions

Related Articles