Content-Driven Header Bidding with Prebid.js

Publishers love Header Bidding. Content-Driven Advertising displays ads relevant to published content. Content-Driven Header Bidding combines both to display header bidding ads relevant to page content. Here, we describe how to do Content-Driven Header Bidding using Prebid.js.

Publisher

Here is a publisher page that uses Content-Driven Header Bidding.

<html>
 <head>
  <meta name="description" content="Big Ten reporters pick Michigan to win league title in 2019. Big Ten reporters pick Michigan to win league title in 2019. The annual preseason poll was conducted by Cleveland.com and includes the results from 34 respondents">
  <link rel="icon" type="image/png" href="/favicon.png">
  <script async src="//www.adrelevantis.com/js/dev/prebid.js"></script>
  <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
  <script src="//www.adrelevantis.com/js/contentidentifierwithgoogletag.js"></script>
  <script>
   var div_1_sizes = [
    [300, 250],
    [300, 600]
   ];
   var div_2_sizes = [
    [970, 250]
   ];
   var div_3_sizes = [
    [300, 600],
    [728, 90],
    [970, 250]
   ];
   var PREBID_TIMEOUT = 1000;
   var FAILSAFE_TIMEOUT = 3000;

   var adUnits = [
    {
     code: '/21901351985/header-bid-tag-0',
     mediaTypes: {
      banner: {
       sizes: div_1_sizes
      }
     },
     bids: [{
      bidder: 'adrelevantis',
      params: {
       placementId: 13144370,
       cpm: 0.50
      }
     }]
    },
    {
     code: '/21901351985/header-bid-tag-1',
     mediaTypes: {
      banner: {
       sizes: div_2_sizes
      }
     },
     bids: [{
      bidder: 'adrelevantis',
      params: {
       placementId: 13144370,
       cpm: 0.50
      }
     }]
    },
    {
     code: '/21901351985/header-bid-tag-2',
     mediaTypes: {
      banner: {
       sizes: div_3_sizes
      }
     },
     bids: [{
      bidder: 'adrelevantis',
      params: {
       placementId: 13144370,
       cpm: 0.50
      }
     },
     {
      bidder: 'appnexus',
      params: {
       placementId: 13144370
      }
     }]
    }
   ];
   var pbjs = pbjs || {};
   pbjs.que = pbjs.que || [];
   
   var googletag = googletag || {};
   googletag.cmd = googletag.cmd || [];
   googletag.cmd.push(function() {
    googletag.pubads().disableInitialLoad();
   });
  </script>
  <script>
   var adDivIds = ['div-1','div-2','div-3'];
   document.addEventListener("DOMContentLoaded", function(event){ adrgoogletags("D435C107A8844E15BAA5D4A9B7D94FC5", adUnits, adDivIds); });
  </script>
 </head>
 <body>
  <h2>Content-Driven Prebid.js Example</h2>
  <h5>Div-1</h5>
  <div id='div-1'>
   <script type='text/javascript'>
    googletag.cmd.push(function() {
     googletag.display('div-1');
    });

   </script>
  </div>
  <br>
  <h5>Div-2</h5>
  <div id='div-2'>
   <script type='text/javascript'>
    googletag.cmd.push(function() {
     googletag.display('div-2');
    });
   </script>
  </div>
  <h5>Div-3</h5>
  <div id='div-3'>
   <script type='text/javascript'>
    googletag.cmd.push(function() {
     googletag.display('div-3');
    });
   </script>
  </div>
 </body>
</html>

The code basically is the same as the example http://prebid.org/dev-docs/examples/basic-example.html with the following difference.

The code in //www.adrelevantis.com/js/dev/prebid.js is built with adrelevantisBidAdapter.

The adrgoogletags from contentidentifierwithgoogletag.js is called when DOMContentLoaded occurs. This code extracts meta description or body content and returns IAB Categories and ranked keywords of the content. The IAB Categories and ranked keywords are configured as First Party Data of the bidder and are sent in bid request.

More examples can be found at https://github.com/ghguo/adrhb-examples.

Supply-Side Platform (SSP)

The bid request is sent to SSPs. The SSPs relay the IAB Categories and keywords along with other request data to DSP Adservers. The DSPs can bid based on the IAB Categories and keywords. The SSPs receive the bids and send them back to the page.

Here is a Content-Driven Supply-Side Platform: https://github.com/ghguo/adrssp.

Demand-Side Platform (DSP)

A DSP adserver needs to enable advertisers to target ads to IAB Categories and keywords. When bid request with IAB Categories and keywords of the published content comes, it matches ads based on the IAB Categories and keywords.

Here is an adserver that provides content target capability: https://github.com/ghguo/revive411.

Target Ads to Content by Category

The current targeting ads by site category has shortcomings: too coarse to be useful.

For example, the SimilarWeb’s category for espn.com is Sports/Sports. It fails to distinguish a US Open tennis page from a Big Ten football page.

This is a serious issue because it is unable to target Hungry Howie’s ads to pages about Big Ten football, or target tennis racquet ads to pages about US Open tennis. Or even worse, it may display tennis racquet ads while people read the Big Ten football page, or display Hungry Howie’s ads while people read the US Open tennis page. Not a good investment of your advertising money!

Here is the solution. Instead of site category, you target ads based on page content category. For the above two pages, one page has a category as Sports/Football, the other page has a category as Sports/Tennis.

Here is how it works. As an advertiser, you target the Hungry Howie’s ad to Sports/Football and the tennis racquet ad to Sport/Tennis.

As a publisher (say, espn.com), you drop our ad tag to your pages. If there is a page about US Open tennis, our tag reads the page content, categorizes it as Sports/Tennis, matches ads with the category. It finds the tennis racquet ad and displays it. If there is another page about Big Ten football, our tag reads the page content, categorizes it as Sports/Football, matches ads with the category. It finds Hungry Howie’s ad and displays it.

Please see our demo page for the examples:
https://www.adrelevantis.com/demo-sports.html

You can find more examples at https://www.adrelevantis.com/demo.html

Add Relevant Ads to a Page

To put an 250×250 ad in a web page. Just drop the following code to the place you want the ad to be shown.

<div class="adr-ad250_250"><ins data-revive-zoneid="8" data-revive-promotion="1" data-revive-publisher="compariola" data-revive-promoter="PRODUCT" data-revive-id="8d00ec3e74b449269c484e2fbed6f23a"></ins>
<script type="text/javascript">
cdpbyadr = window.cdpbyadr || {};
if (cdpbyadr.loadOnce == undefined) {
	cdpbyadr.loadOnce = true;
	var head  = document.getElementsByTagName('head')[0];
	var script  = document.createElement('script');
	script.src = '//www.adrelevantis.com/js/adr_adx_x.js';
	head.appendChild(script);
}
</script>
</div>

That’s it. The relevant ads start to show.

Advertising vs User Experience

Advertising is a tradeoff of user experience. You can just have one over the other, not both.

Really? What if the ads are highly relevant to your content? What if the ads appear as a coherent part of your content? Here are a few examples that demonstrate what relevant ads can achieve.

For a popular knit and crochet blog:
Original blog with traditional ads: https://www.sewrella.com/difference-between-knitting-and-crochet/
With relevant ads: https://www.adrelevantis.com/demo/difference-between-knitting-and-crochet.html

For a food blog:
Original recipe with traditional ads: https://thelemonbowl.com/smoky-grilled-pork-chops/
With relevant ads: https://www.adrelevantis.com/demo/smoky-grilled-pork-chops.html

With relevant ads, your pages are destinations that deliver content that people are looking for and show advertising that they – not only won’t object to – but actually, appreciate.

Content-Driven Ads vs Traditional Ads

Content-Driven ads are smart. They understand your content and service promotions relevant to the content. Traditional ads are content oblivious.

Here is a side-by-side comparison: the first link is a typical blog page with traditional ads while the second link demonstrates the same content with smart (Content-Driven) ads.

https://www.dogster.com/dog-health-care/anaplasmosis-in-dogs
https://www.adrelevantis.com/demo/anaplasmosis-in-dogs.html

Here is one more comparison.

http://diydiva.net/2018/06/spring-on-the-farm-2018/
http//www.adrelevantis.com/demo/spring-on-the-farm-2018.html

Why Content-Driven Matters

Imagine you created a page talking about dog food bowl manners and wanted to monetize it. You dropped a commodity ad tag and it displays an ad that has nothing to do with dog food bowl manners. You hope someone will click the ad, and then collect some pennies from the ad provider. Good luck! Irrelevant ads at best are ignored, or at worst, annoying and driving your readers away from your page.

Here comes Content-Driven Advertising! Using our tag, relevant products are displayed. People who like your content are likely to buy products relevant to your content. You earn affiliate commissions instead of pay-per-click.

Content-Driven Promotion

Content-Driven Promotion (CDP) takes contextual advertising a step further. Content-Driven Promotion recommends promotions relevant to page content dynamically in realtime.

There are millions of products that virtually match any content. The matched promotions seamlessly blend into your content and look like additional materials to your post.

Here are a couple of examples to show how it looks like:

Importance of maintaining your furnace in Seattle.
Desmodium canadense (Showy Tick Trefoil) Bean family (Fabaceae).

The easiest way to get started is use our WordPress plugin (search “ADR Promotion Recommendations” in WordPress Plugin Directory). For non WordPress sites, just drop us a line at info@adrelevantis.com.