Header Bidding/Prebid.js Implementation

Header Bidding

Introduction:

Header Bidding also known as pre-bidding is a process which exposes each and every ad slot to programmatic demand before calling the Ad Server. Header bidding allow publishers to earn more revenue from the ad space which they sell using the auction-based programmatic ad systems. This will make you aware of the real value of your direct and indirect inventories in real time.

IncrementX Ad Exchange allows you to maximize demand competition for your publisher inventories by giving a way for demand partners to bid on the impression at the same time. Following displays the header bidding example:

headerbidding-example

Image Courtesy: clearcode.com

Advantages for Publishers:

Following are the advantages of header bidding for publishers:

 « Higher CPM or Revenue:  Header bidding has reported magnificent increase in the publisher CPMs and revenue. In many cases the publishers announce that the header bidding has double their revenues they had generated earlier through SSPs by using traditional methods.

« Advertiser Competition: Open competition might help publishers get a clear idea of the variations in demand for their inventory and discloses the higher value in inventory that was underrated earlier.

« Transparency: One of header bidding’s key value for publishers is the assurance to eliminate middlemen and ease  close relationships with demand sources. It also provides the increased transparency about the demand which  publishers are getting from each of their partners and also facilitates clear head-to-head comparisons between vendors.

« Quick Load Time: Header bidding promise a better user experience and a faster load time for the ads themselves on the  page. In the waterfall approach, the passbacks between demand partners and the ad server could be time-consuming, if  the primary or even secondary demand source was not able to fill the ad slot.
In header bidding, the header tag secures the impression and retrieves the ad content as the page loads, so that it is  prepared to load the ad into the slot as the user scrolls and the ad slot comes in the view.

Following figure describes the step-by-step working of header bidding:

Working of Header Bidding

workgheaderbiddg

Image Courtesy: monetizemore.com

Prebid.js Implementation
Following are the steps to build and deploy the project requirements:

  1. Following tools are used to build and deploy the project:
    • gulp

    • npm

    • nodejs

      Note: To check nodejs version use the command node -v

  2. You can clone the repository or download zip prebid application from the following link:

    https://github.com/prebid/Prebid.js

    prebiddownload

  3. Click Clone or Download.

  4. Refer the steps given in the README.md file for building the application.  
  5. Note, in gulp it is necessary to have nodejs -v greater than 4.x.

    • To build use the following command:

        gulp build –adapters list-of-adapters.json

      Note: The adapters.json file is configurable. The configuration of partners can be added or removed depending on the publisher need.
    • To ensure the incrementx adapter is plugged in with the build project. We need to check the following path:

      Prebid.js folder src/adapters:incrementx.js

    • The build prebid.js file is to be hosted in the publisher domain.

    • Following is the sample prebid configuration code:

        var pbjs = pbjs || {}; //Initialization

        pbjs.que = pbjs.que || [];

        pbjs.que.push(function() {

        var adUnits = [{

        code: ‘test_prebid’, //inventory id

        sizes: [[300, 250]], //sizes accepted for that inventory

        bids: [{

        bidder: ‘Other Bidders’,

      //bidder

        params: { placementId: ‘XXXXX’ }

        },

        { bidder: ‘incrementx’,

        params: { placementId: ‘VZ123’ }

        }]

        }];

        pbjs.addAdUnits(adUnits);

        pbjs.requestBids({

        bidsBackHandler: function(bidResponses) { //win response

        var targetingParams = pbjs.getAdserverTargeting();

        var container = document.getElementById(‘test_prebid’);

        container.innerHTML = JSON.stringify(targetingParams);

        }

        });

        });

Header Bidding Integration with DFP

  1. Prebid has internal configuration for handling DFP request, but configuration and changes in DFP are necessary. For sample DFP configuration, please visit: http://prebid.github.io/adops/step-by-step.html
Note:

  • Prebid.js code does not work with safe frame setting in DFP.
  •  Size 1×1 should be provided to enable DFP to serve on Dynamic sizes.

DFP Integration Code:

function sendAdserverRequest() {

  if (pbjs.adserverRequestSent) return;

  pbjs.adserverRequestSent = true;

  googletag.cmd.push(function() {

  pbjs.que.push(function() {

  pbjs.setTargetingForGPTAsync();

  googletag.pubads().refresh();

  });

  });

  }

Enable AdSense and AdExchange to participate in Prebid:

For Adx or AdSense to participate in Prebid auction we require the following setting in DFP:

dfp

  1. Enable the third party services.
  2. Enter the credentials of Adx or AdSense.
  3. Select Dynamic allocation when adding Line Items.

Related Articles

IncrementX – Google Ad Manager Integration Guide

Step 1 - Ad Unit Creation (Go to Inventory -> Ad Units -> New Ad unit) In the Settings section Parent Ad unit should be “Top Level” Name will be the Ad Unit name which can be easily identified (Eg: websitename.com_IncrementX_300x250) Code is used to identify the...

Ads.txt – Implementation Guide

This document outlines the significance,purpose and acts as guide to implement Ads.txt for your IncrementX account. 1) What is Ads.txt? Ads.txt is a simple, flexible, and secure method for publishers and distributors to declare who is authorized to sell their...

Site and App Report

Sites & Apps Reports displays a detailed report on the sites and apps transactions done by the publishers. The Sites & Apps Reports display the Action, Date, Impressions, eCPM($), and Estimated Revenue($). The above is an example of  a Site and App Report, The...

Add New Ad Unit

After successfully adding Site & Apps, the Publisher can now start Adding New Ad Units by performing these simple steps: Click on Ad Unit Management, from the Sites & Apps menu as highlighted in the figure below. Click on +Add New Ad Unit. Once you have...

Sign Up for Publishers

In order to Monetize with IncrementX, as a Publisher, you can create a New Acount by Signing Up, which can be done in 2 ways : Either by clicking on the Getting Started or by Clicking on the Sign Up option on the top right corner of the page, both of the options are...

Add New Site & App

As a Publisher, you can Add New Site & App  by performing the following steps. From the Site & Apps menu, click on Add New Site and App and the following figure will be displayed: IncrementX lets the Publisher choose the Product Type,  which can be...

Mobile App Creation API

App: Add Mobile App: Add Mobile App helps you to add new Mobile app as well as adunits with different sizes.  Method: POST URL: https://api.incremntx.com/ip/addwebsitenapp In request there are two objects wrapped one is Website and the other is ad unit. Request Fields...

Vast Site Creation API

VAST: Add Vast Site: Add Vast App helps you to add new Vast site's with different VAST versions. Method: POST URL: https://api.incremntx.com/ip/addwebsitenapp For request there are two objects wrapped one is Website and the other is ad unit. Request Fields Parameters...