Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Overview

PrebidJS Prebid.js for Web is an open-source Javascript library and community which allows publishers to implement Header Bidding.

In summary, Prebid.js and Sharethrough work like this:

  1. The publisher creates ad slots on their page.

  2. The publisher configures ad units configurations. Each one is associated with an ad slot and defines the kind of ads it can render and bidder specific parameters.

  3. Prebid.js starts an auction with all the bidder adapters included in the Prebid.js bundle.

  4. Each bidder adapter exchanges bid requests and bid responses with their respective bidder.

...

  1. Prebid.js calls the website’s bidsBackHandler function.

  2. The website decides on the winning bids.

  3. The winning ad creatives are rendered on the page.

...

The Prebid.js library and configuration is included in the webpage and will work with an existing ad server such as Google Ad Manager, AppNexus, and others.

This specific page contains brief information on how to get started with Prebid using our demand.

For additional information, see:

Quick Start Guide

  1. Download PrebidJSPrebid.js

  2. Select the latest version of Prebid to maximize revenue (8.16.0 or higher)get all the latest features

  3. Check the box for ‘Sharethrough’

  4. Select the “Get Prebid.js!” button to download the library on browser.

  5. This Add the Prebid.js library may then be added to your web page making Prebid functions and methods available for use, we using <script> tags like this. We recommend using a test page to configure Prebid before going live in production.

Code Block
<html>
  <head>
    <script async src="prebid.js"></script>
    <script>
      var pbjs = pbjs || {};
      pbjs.que = pbjs.que || [];
    </script>
  </head>
</html>
  1. Push Price Priority Line Items to your publisher adserver (for instance GAM for those using Google’s adserver) using the defined price granularity and setup specific for that adserver.

    1. This Python project does a good job for users semi-familiar with the Ad Manager API and Python

    2. Use the key-values 'sharethrough' per the bidder parameters documentation from Prebid.

  2. Configure the ad units for which you want the sharethrough bidder to return bid responses. Sharethrough supports banner

...

  1. and video impression requests

...

  1. [**native remains unsupported in PrebidJS, but available through PBS (Go and Java]).. See the Prebid documentation for adunit configuration

...

  1. . It provides definitions for all the supported fields and examples for various types of ads.
    The important fields are:

    1. code: Associates the ad unit configuration with an ad slot on the page.

    2. mediaTypes: The type of ads to serve. E.g. banner, video, native, etc.

    3. bids: Bidder specific parameters.

      1. You must define the sharethrough bidder and associate this ad unit with a PubMaestro placement key using pkey

    4. ortb2Imp: Optional parameters supported by OpenRTB. For example, you could configure a floor price, block advertiser domains or block IAB categories.

    5. Example:

      Code Block
      languagejs

...

    1. <script>
        

...

    1. var adUnits = [
          {
      

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  code: 'my-html-div-tag-id',
           

...

9. A complete setup for a banner ad unit may look like the following:

...

languagejs

...

    1.  mediaTypes: {
        

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1. banner: {
                sizes: [[300,

...

    1. 250

...

    1. ]]
      

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  }
            },
        

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1. bids: 

...

    1. [
      

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1.  

...

    1. {
            

...

    1.    

...

    1.  

...

    1. bidder: 

...

    1. "sharethrough",
          

...

    1.       

...

    1. params: 

...

    1. {
        

...

    1.  

...

    1.          pkey: '

...

    1. pkey1',
            

...

    1.     

...

    1. }

...

    1. 
          

...

    1.     }
        

...

    1.  

...

    1.    ]
         

...

    1.  

...

    1. },
        ]
      
        pbjs.que.push(function() {
      

...

    1.  

...

    1.    pbjs.addAdUnits(adUnits);
        

...

    1. }

...

10. A complete setup for a video ad unit may look like the following:

...

languagejs

...

    1. );
      </script>
  1. Request bids and render the winning ads

    1. Call pbjs.requestBids to request bids for all ad units. This is typically called when the page loads or when an ad slot comes into view.

    2. The bidsBackHandler parameter is a callback function to call once the bid responses are received to render the winning ads.

      Code Block
      <script>
        pbjs.que.push(function() {
          

...

    1. pbjs.requestBids({
            

...

    1. bidsBackHandler: 

...

    1. renderAllAdUnits, // 

...

    1. Your 

...

    1. rendering 

...

    1. logic here
          });
        

...

    1. });
      </script>
    2. Examples:

      1. Without an ad server: https://docs.prebid.org/dev-docs/examples/no-adserver.html

      2. With an ad server: https://docs.prebid.org/dev-docs/examples/basic-example.html

  1. Update your ads.txt file to include Sharethrough.

  2. Sharethrough should immediately start competing in your header bidding auctions.

Best Practices

Before implementing any Prebid demand on your pages we recommend some best practices to ensure the maximum benefit is provided to your bottom line while not impacting users.

  • Define and Request only what will be immediately rendered.

    • In some scenarios it might be useful to define and prepare all ad slots which will ever be displayed on page.

    • However, if some ad slots are never rendered these ad requests may reduce the fill % on the page, as well as possible SPO/optimization by buyers which exclude your inventory.

  • Keep the number of ad slots to less than 4

    • To improve view-ability and user experience we recommend limiting the number of active ad slots to 4, ensuring to keep them as view-able as possible.

  • Timeouts

    • A timeout of at least 1000ms is recommended per bidder unless most of your inventory is on slow mobile connections, in which case increasing the timeout to 3000ms is recommended.

  • Define, request, and render ad slots as they near view

    • If you are lazy loading ads on long article pages we recommend defining the new ad slots, making requests, and rendering the ad as the user scrolls through content and nears the ad slot.

    • This benefits the page by minimizing the ad load and reduces resources until such a time they are required.

  • Avoid creating new ad slots when you want to refresh ads

    • We recommend using Prebid’s documented refresh functionality.

  • Keep it simple

    • Avoid wrapping Prebid functionality in classes, functions, namespaces, etc

    • If you obfuscate Prebid you may introduce additional complexity when needing to troubleshoot

  • Add User ID Modules

  • Provide the position of the ad unit if possible, following , using the banner.pos field (Open RTB Spec:

    • 1: Above the Fold

    • 3: Below the Fold

    • 4: Header

    • 5: Footer

    • 6: Sidebar

    • 7: Full Screen

    For Prebid.js version 6.7.0 and above, Sharethrough supports first party data, as documented in this Prebid Guide.Placement Positions)

  • Check out the Sharethrough bidder page for other features that might interest you, such as first path data

Adapter Details

Sharethrough

...

Additional information on defining GPID can be found here: https://dev.prebid.org/features/pbadslot.