Blog

The header bidding expertise began to develop in 2015, and has since helped many publishers to develop their income by as a lot as 40% (and even, in some circumstances, to ranges of 100% or extra.)

What Is Header Bidding?

Header bidding is a cutting-edge method the place publishers provide their advert stock to many advert exchanges, additionally referred to as Supply-Side Platforms (or SSPs), concurrently earlier than making calls to their advert servers.

Here are the steps a writer must move to have this expertise energy up its monetization.

• Apply to SSP companions and get approval.
• Implement Prebid.JS on web site.
• Configure advert server.
• Choose a consent administration system.
• Test and debug.

Applying To SSP Partners

There are a whole bunch of SSP companions out there within the listing to use, however I want to point out what I imagine to be the most well-liked ones:

• TripleLift.
• Index Exchange.
• Amazon UAM/TAM.
• Xandr (previously AppNexus).
• Teads.
• Pubmatic.
• Sovrn.
• Verizon.
• Magnite (previously Rubicon).
• OpenX.
• Sonobi.
• GumGum.
• Sharethrough.
• Unurly.

One wants to search out their on-line utility type and move by the corporate’s verification course of. For instance, within the case of Xandr, the contact page appears like this:

Pay consideration to the minimal stock dimension required to be eligible for making use of.

Yes, that may be a staggering excessive of 50M advert impressions a month.

You might have fairly a powerful web site to have the ability to apply to among the advert networks. We will name them additional bidders, as they bid on stock in actual time.

However, not all SSPs have such excessive thresholds for utility. For instance, Sharethrough solely requires 20M advert impressions.

Besides, they take into account additionally viewers high quality, visitors geolocation, how a lot time customers spend on the web site, and so forth.

It usually takes a couple of weeks after making use of to be authorized and onboarded with them, so it may be a reasonably time-consuming course of which will even take months to complete.

How Does Prebid.js Work?

In nutshell, right here is how Prebid.js works.

When a consumer opens a webpage, an advert request is made to all bidders (SSP companions).

Bidders reply with their CPM bids – let’s say $1 and $1.50 – and Prebid.js makes a request to the advert server, with the best CPM concentrating on. In this case, that might be $1.50.

At the advert server, in our case, Google Ad Manager, the request is obtained and it is aware of that somebody is paying $1.50 USD CPM for an advert. It runs one other public sale with Google Adsense or AdX.

If Google gives a better CPM, then the Google Ad will likely be served.

If not, our advert with $1.50 CPM will win, and be served by our SSP companion.

The trick right here is that auctions occur in real-time, which creates shopping for strain on Google AdX to pay the best CPM attainable.

If Google AdX doesn’t have any competitors, it would provide the bottom CPM attainable –because it desires to purchase stock for the most cost effective value attainable.

With header bidding, bidders are capable of compete and push CPMs (and due to this fact income) up.

There are two methods to implement header bidding:

• Client-side: When the public sale runs through JavaScript within the browser.
• Server-side: When the public sale is run on the server.

Let’s focus on client-side header bidding.

How To Implement Client-Side Header Bidding

In order to arrange header bidding, we have to implement Prebid.js on our web site and configure our Google Ad Manager (or advert server).

Implement Prebid.js On Your Website

Prebid.js is a header bidding platform that has greater than 200 demand sources built-in.

You want to pick the SSP companions you might be working with from the customize page and obtain the library constructed on your particular configuration.

Don’t overlook to pick Consent Management modules to adjust to GDPR and GPP privateness requirements.

Below is the pattern code taken from the official documentation.

<html>

    <head>        
        <script async src="
        <script async src="
        <script>
            var div_1_sizes = [
                [300, 250],
                [300, 600]
            ];
            var div_2_sizes = [
                [728, 90],
                [970, 250]
            ];
            var PREBID_TIMEOUT = 1000;
            var FAILSAFE_TIMEOUT = 3000;

            var adUnits = [
                {
                    code: '/19968336/header-bid-tag-0',
                    mediaTypes: {
                        banner: {
                            sizes: div_1_sizes
                        }
                    },
                    bids: [{
                        bidder: 'appnexus',
                        params: {
                            placementId: 13144370
                        }
                    },
                     { 
                      bidder: "conversant",
                       params: {site_id:"122869",secure:1}
                     }
                   ]
                },
                {
                    code: '/19968336/header-bid-tag-1',
                    mediaTypes: {
                        banner: {
                            sizes: div_2_sizes
                        }
                    },
                    bids: [{
                        bidder: 'appnexus',
                        params: {
                            placementId: 13144370
                        }
                    },
                    { 
                     bidder: "conversant",
                     params: {site_id:"122869",secure:1}
                    }
                     ]
                }
            ];
            
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            googletag.cmd.push(perform() {
                googletag.pubads().disableInitialLoad();
            });

            var pbjs = pbjs || {};
            pbjs.que = pbjs.que || [];

            pbjs.que.push(perform() {
                pbjs.addAdModels(adUnits);
                pbjs.requestBids({
                    bidsBackHandler: initAdserver,
                    timeout: PREBID_TIMEOUT
                });
            });

            perform initAdserver() {
                if (pbjs.initAdserverSet) return;
                pbjs.initAdserverSet = true;
                googletag.cmd.push(perform() {
                    pbjs.que.push(perform() {
                        pbjs.setTargetingForGPTAsync();
                        googletag.pubads().refresh();
                    });
                });
            }
            // in case PBJS would not load
            setTimeout(perform() {
                initAdserver();
            }, FAILSAFE_TIMEOUT);

            googletag.cmd.push(perform() {
                googletag.defineSlot('/19968336/header-bid-tag-0', div_1_sizes, 'div-1').addService(googletag.pubads());
                googletag.pubads().enableSingleRequest();
                googletag.allowServices();
            });
            googletag.cmd.push(perform() {
                googletag.defineSlot('/19968336/header-bid-tag-1', div_2_sizes, 'div-2').addService(googletag.pubads());
                googletag.pubads().enableSingleRequest();
                googletag.allowServices();
            });

        </script>

    </head>

    <physique>
        <h2>Basic Prebid.js Example</h2>
        <h5>Div-1</h5>
        <div id='div-1'>
            <script sort="text/javascript">
                googletag.cmd.push(perform() {
                    googletag.show('div-1');
                });

            </script>
        </div>

        <br>

        <h5>Div-2</h5>
        <div id='div-2'>
            <script sort="text/javascript">
                googletag.cmd.push(perform() {
                    googletag.show('div-2');
                });

            </script>
        </div>

    </physique>

</html>

Let’s break down the code above.

• The first strains load all required JS recordsdata and our personalized Prebid.JS file.
• Ad slots are outlined within the adUnits array variable.
• In the adslot definitions, you possibly can see the SSP companions’ names and IDs you may be given when onboarding when them.
• googletag.pubads().disableInitialLoad(); is named to disable advert request to be despatched to Google Ad Manager till Prebid.js finishes the public sale.
• pbjs.requestBids perform calls SSP companions and determines the winner.
• initAdserver() perform is named to ship an advert request to the Google Ad Manager with hb_pb key, which incorporates the successful CPM worth, e.g. hb_pb=”1.5″. (This step is related with establishing Google Ad Manager within the subsequent step.)
• When Google Ad Manager will get the request with the successful bid, it runs its personal public sale in Google AdX, and sends again both the AdX advert with a better CPM, or the advert of the successful SSP.

For your particular case, you might must code otherwise and alter the setup, however the precept stays the identical.

Other than that, I want to shortly go over methods to implement lazy loading, as a result of it’s a little completely different.

How To Implement Lazy Loading

The Google tag for publishers has a lazy loading framework which won’t work within the case of header bidding.

This is as a result of you want to run an public sale, and decide and set key values earlier than sending a request to the advert server.

Because of that, I might advise utilizing the Intersection Observer API to find out when to load the advert within the HTML <div> tag when it’s about to enter into the viewport.

choices = {
root: null, // relative to doc viewport
rootMargin: '1500px', // margin round root. Values are just like css property. Unitless values not allowed
threshold: 0 // seen quantity of merchandise proven in relation to root
};

your_observer = new IntersectionObserver( observer_handler, choices );
your_observer.observe( goog_adslots[i] );

In the observer_handler name again perform, you possibly can run the prebid public sale and name the advert server.

perform observer_handler( entries, observer ) {

dynamicAdUnit =[{
code: 'your_html_div_id',
mediaTypes: {
banner: {
sizes: [728,90]
}
},
bids: [{ bidder: 'appnexus', params: { placementId: 13144370 } }, { bidder: "conversant", params: {site_id:"122869",secure:1} } ]
}];

pbjs.addAdModels(dynamicAdUnit);

slot = window.googletag.defineSlot('/1055389/header-bid-tag-0', [728,90], 'your_html_div_id' ).addService(googletag.pubads());

lazySlotPrebid(slot, 'your_html_div_id')

}

perform lazySlotPrebid(slot, div_id) {

pbjs.que.push(perform() {
pbjs.request bids({
timeout: PREBID_TIMEOUT,
adUnitCodes: [div_id],
bidsBackHandler: perform() {
pbjs.setTargetingForGPTAsync([div_id]);
googletag.pubads().refresh(slot);

});
});

} 
}// endd of initDynamicSlotPrebid

Now, let’s leap on establishing the advert server utilizing Google Ad Manager.

How To Set Up GAM For Header Bidding

Ad servers must have dozens of value precedence line objects with key hb_pb concentrating on all attainable CPM values, resembling hb_pb=0.04, hb_pb=0.03, and so forth.

This is the important thing level that makes the header bidding engine work.

• The public sale runs within the browser on web page load.
• The successful SSP companion is shipped to GAM with a key worth concentrating on hb_pb = 2.62.
• Since the order has the identical CPM worth, GAM understands that there’s a bid at $2.62.
• GAM runs an AdX public sale and has to pay greater than $2.62 to be able to win the bid and show a Google Ad.

As I discussed above, you would wish to construct line objects in GAM with sure granularity, say 0.01 – and for the CPM vary $0-$20, you would wish to create 2,000 line objects, that are unattainable to do manually.

For that, you would wish to make use of GAM API.

Unfortunately, there are not any stable options that you may merely obtain and run in a single click on.

It is a considerably advanced process, however due to contributors who constructed API instruments (despite the fact that they don’t seem to be actively supporting them), we are able to nonetheless modify it a bit of and make it work.

Let’s dive into methods to arrange Google Ad Manager and perceive the next:

Step 1: Enable API Access

In the Google Ad supervisor Global > General settings part, ensure API entry is enabled.

Click on the Add service account button and create a consumer with the pattern identify “GAM API USER” and e mail “[email protected]” with admin rights.

Step 2: Create A New Project

Navigate to Google API Console Credentials web page.

From the mission drop-down, select Create a brand new mission, enter a reputation for the mission, and, optionally, edit the supplied Project ID.

Click Create.

On the Credentials web page, choose Create credentials, then choose Service account key.

Select New service account, and choose JSON.

Click Create to obtain a file containing a personal key.

 

Assign the position “owner” and create the service account OAuth2 credentials.

Then, click on on the created consumer and create JSON sort key, and obtain it.

Step 3: Download Project

Download the mission zip file and unzip it, listing (alternatively, you should utilize the git command instrument to clone the repo).

Install composer on your working system to be able to construct the mission.

Step 4: Change your PHP.INI

Change your php.ini (situated at /xampp/php/php.ini ) file and allow “extension=soap” by eradicating “;” in entrance of and set “soap.wsdl_cache_ttl=0” and restart Apache from the management panel of XAMPP.

Step 5: Create Subfolders And Build The Project

Once you will have every thing arrange and unzipped, open composer.json file and alter “googleads/googleads-php-lib”: “^44.0.0” to make use of the newest model “googleads/googleads-php-lib”: “^59.0.0”.

Check for essentially the most recent version in the mean time you carry out this.

Search and substitute in /app/ folder of the mission “v201911” with “v202202”, as a result of that git mission wasn’t up to date since 2019, to make use of the newest model path of libraries.

Open the command line of your PC and swap to the listing the place you’ve unzipped the recordsdata (utilizing cd command or right-click contained in the folder “Git bash here” in case you have git put in), and run composer replace within the PC terminal or git terminal.

It will create subfolders and construct the mission.

Step 6: Set Up Your Google Ad Manager Credentials

Move the downloaded JSON key “gam-api-54545-0c04qd8fcb.json”  file into the foundation folder of the mission you’ve constructed.

Next, obtain adsapi_php.ini file and arrange your Google Ad Manager credentials in it.

networkCode = "899899"
applicationName = "My GAM APP"
jsonKeyFilePath = "D:xampphtdocsdfp-prebid-lineitemsgam-api-54545-0c04qd8fcb.json"
scopes = "
impersonatedEmail = "[email protected]"

jsonKeyFilePath is absolutely the listing path to the JSON key file within the folder root.

Step 7: Set The Content Of The File

Finally, navigate to the file /script/checks/ConnexionTest.php and set the content material of the file like beneath:

putenv('HOME='.dirname(__DIR__)."/../");
require __DIR__.'/../../vendor/autoload.php';

$traffickerId = (new AppAdManagerUserManager())->getUserId();

if (is_numeric($traffickerId)) {
echo "n====Connexion OK====nn";
} else {
echo "n===Connexion KO====nn";
}

In your terminal (or git bash console) check the connection by operating the command (in case you are within the /script/checks/ folder).

php ConnexionTest.php

You ought to see a message “====Connection OK====”

Step 8: Configure The Parameters

Navigate to the file /script/checks/ConnexionTest.php in your mission and open it.

Copy and paste the beneath code into that file, and configure the parameters within the $entry and $buckets arrays per your wants.

putenv('HOME='.dirname(__DIR__)."/../");
require __DIR__.'/../../vendor/autoload.php';

use AppScriptsHeaderBiddingScript;

$bucket_range = array();
$Your_Advertiser_Name="Sample_Advertiser";
$buckets =
["buckets" =>[
['precision' => 2, 'min' => 0, 'max' => 4.00, 'increment' => 0.01],
['precision' => 2, 'min' => 4.01, 'max' => 8.00, 'increment' => 0.05],
]
];

foreach ( $buckets["buckets"] as $okay => $bucket ){

$request_bucket = array( 'buckets' => array( $bucket ) );

$order_name="Your_Order_name ".$bucket['min'].'-'.$bucket['max'];
// echo $order_name.'<br/><br/>';


$entry = [
'priceGranularity' => $request_bucket, // can be 'low', 'med', 'high', 'auto','dense', 'test'
'currency' => 'USD',
//'sizes' => [ [1,1] ,[160, 600], [250, 250], [300, 250], [300, 600], [320, 50], [320, 100], [300, 100], [336, 280], [728, 90], [970, 90], [970, 250]],
'sizes' => [ [250, 250] ],
'orderPrefix' => $Your_Advertiser_Name, //prebid advertiserName
'orderName' => $order_name
];
$script = new HeaderBiddingScript();
$script->createGlobalAdModels($entry);

}

Optionally you may also specify ‘geoTargetingList’ => “dz, pk, ke, pt” or customized key worth concentrating on customTargeting’ => [‘amp_pages’ => yes’] if you would like your header bidding to work solely when the customized key worth is about.

Run the command beneath and it’ll begin creating line objects per the bucket settings you’ve specified.

php ConnexionTest.php

There is a instrument using Python that’s used equally; you might need to give it a attempt as effectively.

Debugging

For debugging, there are a couple of browser add-ons you should utilize to see if the public sale runs with out errors.

Alternatively, open your webpage URL utilizing “/?pbjs_debug=true” parameter on the finish of the URL, and watch console logs messages.

You must be sure that hb_pb key values are handed to Google Ad Manager. Use “/?google_console=1” on the finish of the URL to open the GAM console, and click on on “Delivery Diagnostics” of every advert unit.

You ought to see that hb_pb values are set and handed to the advert server.

Choose A Consent Management System

Users’ privateness is without doubt one of the most essential elements, and also you need to just remember to adjust to each GDPR and GPP.

The detailed directions on methods to arrange a consent administration system in your wrapper are here.

There are many suppliers which adjust to IAB’s newest requirements, and listed below are a couple of of the most well-liked ones:

Conclusion

You could discover it shocking that establishing header bidding entails so many steps, however it’s actually value it to implement. It can simply enhance your income by +30% or extra by creating promoting strain on Google Ads.

This information is for technically savvy customers – however in case you have questions and points, there’s an Adops slack channel you might subscribe to and ask inquiries to the neighborhood.

I hope that after studying this text, you can find it simpler to arrange header bidding and improve the monetization of your web site.

More sources:

---

Featured Image: Search Engine Journal