What is Prebid.js & how to debug it using Requestly!

In digital advertising, programmatic ads have changed the game by automating how ads are bought and sold. A key part of this is header bidding, which lets publishers offer their ad space to multiple ad exchanges at the same time, boosting competition and revenue. Prebid.js is a popular tool that helps make header bidding easier, allowing publishers to get the most out of their ad inventory. In this blog, we’ll cover what Prebid.js is, how it works, and how you can troubleshoot it using the Requestly extension.

What is Prebid.js?

Overview

Prebid.js is an open-source header bidding wrapper that enables publishers to conduct auctions for their ad inventory across multiple demand sources. It integrates seamlessly with ad servers like Google Ad Manager, allowing publishers to increase competition and, consequently, ad revenue.

How Prebid.js Works

Prebid.js operates by auctioning ad inventory in the user’s browser before the ad server is called. Here’s a simplified workflow:

1. Integration: Publishers add the Prebid.js library to their website and configure it with various bidder adapters.

2. Auction: Prebid.js sends bid requests to configured demand partners when a user visits the page.

3. Bids: Demand partners return their bids, and Prebid.js selects the highest bid.

4. Ad Server Call: The highest bid is then sent to the ad server (e.g., Google Ad Manager) to compete with other ad sources.

5. Ad Display: The ad server selects the final winning bid and displays the ad to the user.

Advantages of Using Prebid.js

• Increased Revenue: By increasing competition, publishers can secure higher bids for their ad inventory.

• Improved Load Times: As the auction happens asynchronously in the browser, it can lead to faster ad loading times.

• Transparency: Publishers have full visibility and control over the auction process.

Components of Prebid.js

• Core Library: The main Prebid.js library.

• Adapters: Integrations with various demand partners (bidders).

• Modules: Additional functionalities like analytics and GDPR compliance.

• Prebid Server: An optional server-side component for running auctions.

Debugging Prebid.js with Requestly

When debugging Prebid.js with Requestly, you can insert debugging scripts to get a better understanding of what’s happening with your Prebid setup. Here’s how you can approach this:

Use Case 1: Inserting Debugging Scripts

1. Install Requestly

Ensure you have the Requestly extension installed in your browser (Chrome, Firefox, etc.).

2. Create a New Rule in Requestly

• Open Requestly App: Open Requestly web app .

• Create a New Rule: Click on Create Rule and select Insert Script, depending on what you need.

3. Insert Debugging Scripts

To insert debugging scripts, follow these steps:

• URL Pattern: Specify the URL pattern where you want to inject the script.

• Script Content: Write or paste your debugging script.

4. Apply and Test

• Save and Apply: Save your rule and ensure it’s active.

• Reload Page: Refresh the page where Prebid.js is loaded and check the console logs or modified requests.

Interactive Guide:

Use Case 2: Replacing or Redirecting Scripts

1. Specify the Production Script

URL Pattern: Set the URL pattern to match the production script you want to redirect or replace.

2. Redirect/Replace URL

Provide New URL: Enter the new URL for the script you want to use instead of the production script.

3. Apply and Test

• Save and Apply: Save your rule and make sure it’s active.

• Reload Page: Refresh the page to see the updated script in action.

Interactive Guide:

Conclusion

Prebid.js is a powerful tool for maximizing ad revenue through header bidding. However, like any technology, it can encounter issues that need debugging. Requestly provides a versatile and user-friendly solution for intercepting and modifying HTTP requests, making it an invaluable tool for debugging Prebid.js. By following the steps outlined in this blog, you can ensure your Prebid.js setup runs smoothly and efficiently.