What Is Prebid.js and How to Debug It Using BrowserStack

Digital advertising relies on efficient, transparent, competitive bidding processes to maximize publisher revenue and deliver relevant ads to users. Prebid.js has emerged as a leading open-source solution for header bidding, enabling publishers to run real-time auctions among multiple demand partners directly in the browser.

However, the complexity of Prebid.js integrations and the diversity of browser environments can introduce technical challenges that impact ad delivery and revenue.

This guide explores Prebid.js and its role in header bidding. It also provides a comprehensive approach to debugging Prebid.js implementations, including advanced cross-browser testing using BrowserStack.

What Is Prebid.js?

Prebid.js is a widely adopted open-source JavaScript library that facilitates header bidding on web pages. It acts as a unified auction platform, allowing publishers to connect with multiple demand sources, such as ad exchanges and networks, before making an ad server call.

By integrating Prebid.js, publishers can run simultaneous auctions in the browser, collect bids from various partners, and select the highest bid to maximize ad revenue. The library supports a broad range of adapters for different bidders and analytics providers, making it highly flexible for diverse monetization strategies.

Why Is Prebid.js Important In Header Bidding?

Header bidding, powered by Prebid.js, enables publishers to offer their ad inventory to multiple demand partners at the same time, rather than sequentially. This parallel auction process increases competition for each impression, often resulting in higher yields for publishers.

Prebid.js standardizes the integration of multiple bidders, streamlines bid collection, and ensures transparency in the auction process. Its open-source nature encourages industry-wide collaboration, rapid innovation, and broad compatibility with leading ad servers and analytics tools.

How Prebid.js Works?

Prebid.js orchestrates a real-time auction in the browser, allowing multiple demand partners to bid on ad inventory before the ad server makes its final decision. The process involves several key components and steps:

• Initialization: The Prebid.js library is loaded on the web page, initializing the auction framework and registering available bidder adapters.
• Bid Request Generation: When a user visits the page, Prebid.js simultaneously sends bid requests to all configured demand partners.
• Bid Response Collection: Each demand partner responds with a bid, including the price and creative details, within a specified timeout window.
• Auction and Winner Selection: Prebid.js evaluates all received bids and determines the highest eligible bid for each ad slot.
• Ad Server Integration: The winning bid information is passed to the ad server (such as Google Ad Manager) using key-value targeting, allowing the ad server to select and render the appropriate creative.
• Ad Rendering: The selected ad is displayed to the user, and analytics adapters may log auction and performance data for reporting.

This workflow ensures publishers maximize competition for each impression, improving yield and transparency.

How to Set Up Prebid.js

Setting up Prebid.js involves a series of configuration steps to ensure seamless integration with both demand partners and the ad server. Here is a step-by-step overview:

1. Include Prebid.js Library: Add the Prebid.js script to the website, either by downloading a custom build or using a content delivery network link.
2. Configure Ad Units: Define the ad units on the page, specifying sizes, codes, and the bidders that will participate in each auction.
3. Set Up Bidder Adapters: For each demand partner, configure the corresponding adapter with the required parameters, such as placement identifiers and account details.
4. Initialize Prebid.js: Call the initialization function to register ad units and bidder configurations.
5. Request Bids: Trigger the bid request process, typically on page load or when an ad slot comes into view.
6. Send Targeting Data to Ad Server: Use Prebid.js functions to set key-value pairs for the ad server, ensuring that the winning bid is recognized and rendered.
7. Render Ads and Track Performance: Monitor ad rendering and use analytics adapters to collect auction data for optimization.

Proper setup is essential for accurate bid collection, seamless ad server integration, and optimal revenue performance.

Common Issues In Prebid.js Implementations

Prebid.js implementations can encounter a range of technical issues that affect auction performance and ad delivery. Some of the most frequent challenges include:

• Bid Timeouts: Bidders may not respond within the configured timeout window, leading to missed revenue opportunities.
• Adapter Errors: Incorrect configuration or outdated adapters can prevent certain demand partners from participating in auctions.
• Incorrect Bid Parameters: Mismatched or missing parameters can result in invalid or rejected bids.
• Ad Server Misalignment: Discrepancies between Prebid.js and the ad server setup can cause winning bids to be ignored or improperly rendered.
• JavaScript Errors: Syntax or runtime errors in the Prebid.js integration can halt the auction process or disrupt page functionality.
• Latency Issues: Excessive script execution time can degrade user experience and reduce the number of successful bids.

These issues can directly impact fill rates, revenue, and user experience, making robust debugging and testing essential.

Debugging Prebid.js: Tools And Techniques

Debugging Prebid.js requires a structured approach that leverages browser-based utilities and built-in library features. The following methods are commonly used to identify and resolve issues:

Before diving into the tools, it is important to understand that each method targets a specific aspect of the Prebid.js auction process, from network communication to code execution and ad rendering.

1. Browser Developer Tools

These tools are essential for monitoring the technical flow of Prebid.js in real time:

• Inspect network requests to confirm that bid calls are sent and responses are received as expected.
• Use the console to check for JavaScript errors, warnings, and custom log messages generated by Prebid.js or its adapters.
• Analyze the Document Object Model to verify that ad slots are present and correctly populated after the auction.

2. Prebid.js Debug Mode

Prebid.js includes a built-in debug mode that provides detailed logging. You can enable it in two ways:

• Append ?pbjs_debug=true to the page URL.
• Set pbjs.setConfig({ debug: true }) directly in your code.

Once enabled, check the browser console for comprehensive logs of auction events, bid responses, adapter activity, and any error messages.

3. Network Analysis

Understanding the flow of bid requests and responses is crucial:

• Filter network traffic for requests to bidder endpoints.
• Examine payloads and response times to identify failed, delayed, or malformed bid responses.

4. Console Logging

Use custom console logs in your integration code to trace variable values and execution flow during the auction process. This helps identify where issues occur and offers deeper insights into your Prebid.js setup.

5. Prebid.js Analytics Adapters

Analytics adapters are useful for post-auction analysis. Integrate them to collect and review detailed data on auction performance, bid rates, and errors, which can help fine-tune your header bidding strategy.

Step-By-Step Guide To Debug Prebid.js

A systematic workflow is essential for efficiently identifying and resolving Prebid.js issues. Here is a structured approach:

1. Reproduce the Issue: Begin by creating a controlled environment where the problem can be consistently triggered. Document the exact steps, browser version, and device used.
2. Enable Debug Mode: Activate Prebid.js debug mode to access verbose logging. Review console output for errors, warnings, and auction details.
3. Inspect Network Requests: Use browser developer tools to analyze network activity. Filter for requests to bidder endpoints and verify payloads and responses. Check for failed requests, timeouts, or malformed data.
4. Validate Bid Parameters: Compare bid request parameters with documentation for each adapter. Ensure all required fields are present and correctly formatted.
5. Check Ad Server Integration: Confirm that winning bids are passed to the ad server with accurate targeting keys. Review ad server logs for rejected or unfilled impressions.
6. Test Across Browsers and Devices: Replicate the issue in different browsers and on various devices to rule out environment-specific problems.
7. Apply and Validate Fixes: Implement code or configuration changes. Retest using the same steps to confirm the resolution.

Best Practices For Prebid.js Debugging

Applying best practices can streamline Prebid.js debugging and prevent recurring issues. Consider the following recommendations:

• Maintain Up-To-Date Adapters: Regularly update Prebid.js and bidder adapters to benefit from bug fixes and new features.
• Use Version Control: Track changes to Prebid.js configuration and integration code for easier rollback and troubleshooting.
• Document Configuration: Keep detailed records of bidder parameters, timeouts, and custom logic.
• Automate Testing: Implement automation tests for core auction flows and ad rendering.
• Monitor Performance: Use analytics to track bid response times, win rates, and error rates.
• Collaborate with Demand Partners: Share logs and findings with bidder partners to resolve adapter-specific issues.

Importance Of Cross-Browser Testing For Prebid.js

Prebid.js operates within the browser environment, making it susceptible to differences in browser engines, versions, and device capabilities. Cross-browser testing ensures that auctions, bid responses, and ad rendering function consistently for all users.

Without comprehensive testing, issues such as JavaScript incompatibilities, network request failures, or layout problems may go undetected, leading to lost revenue and degraded user experience. Testing across a wide range of browsers and devices is essential for publishers with diverse audiences.

How To Debug Prebid.js With Requestly

When debugging Prebid.js using Requestly, you can insert or replace scripts to better understand how your Prebid setup behaves. Below are two common use cases, along with clear steps for each.

Use Case 1: Inserting Debugging Scripts

To start, ensure you have the Requestly extension installed in your browser, whether it’s Chrome, Firefox, or another supported browser. Open the Requestly web app and create a new rule.

1. Install Requestly: Install the Requestly extension from the browser’s extension store.
2. Create a New Rule in Requestly: Open the Requestly web app. Click on Create Rule and choose Insert Script.
3. Insert Debugging Scripts: In the rule, specify the URL pattern for the page you’re targeting with Prebid.js. Add your debugging script in the script content section.
4. Apply and Test: Save the rule and make sure it’s active. Reload the page that uses Prebid.js and check the console logs or network activity to verify your script’s behavior.

Use Case 2: Replacing or Redirecting Scripts

If you need to replace an existing production script with a different one for testing or debugging, follow these steps:

1. Specify the Production Script: Identify the URL pattern that matches the script you want to replace.
2. Redirect/Replace URL: Provide the new URL for the script that you want to use instead.
3. Apply and Test: Save your rule and make sure it’s active. Reload the page to confirm that the new script has been loaded in place of the original.

Talk to an Expert

Conclusion

Prebid.js is a vital tool for publishers looking to boost ad revenue through header bidding. Its flexibility and open-source design support integration with multiple demand partners, which can also create challenges in setup, debugging, and ensuring cross-browser compatibility. Using browser developer tools, Prebid.js debug features, and a clear troubleshooting process helps resolve these issues efficiently.

Cross-browser testing is crucial for consistent auction performance and ad delivery. Requestly enables teams to debug Prebid.js across real browsers, devices, and enterprise environments, including those with VPN or single sign-on needs. With the right tools and best practices, publishers can maintain reliable header bidding setups and deliver strong results.

Try Requestly for Free