Native Content-Driven Advertising Example 2

In the previous blog, I mentioned there are two approaches to do Native Content-Driven Advertising and showed you how to manually target keywords and IAB Categories. In this blog, I describe how to do it automatically using AdRelevantis Content-Analysis service.

In your page head, add the following code.

<script async src="//www.adrelevantis.com/js/dev/prebid.js"></script>
<script src="//www.adrelevantis.com/js/contentdriventag.js"></script>
<script>
  var adUnits = [
    {
      code: 'div1',
      sizes: [
        [300, 300]
      ],
      mediaTypes: {
        native: {
          title: {
            required: true
          },
          image: {
            required: true
          },
          sponsoredBy: {
            required: true
          }
        }
      },
      bids: [{
        bidder: 'adrelevantis',
        params: {
          placementId: 13232354,
          allowSmallerSizes: true
        }
      }]
    },
    {
      code: 'div2',
      sizes: [
        [300, 300]
      ],
      mediaTypes: {
        native: {
          title: {
            required: true
          },
          image: {
            required: true
          },
          sponsoredBy: {
            required: true
          }
        }
      },
      bids: [{
        bidder: 'adrelevantis',
        params: {
          placementId: 13232354,
          allowSmallerSizes: true
        }
      }]
    },
    {
      code: 'div3',
      sizes: [
        [300, 300]
      ],
      mediaTypes: {
        native: {
          title: {
            required: true
          },
          image: {
            required: true
          },
          sponsoredBy: {
            required: true
          }
        }
      },
      bids: [{
        bidder: 'adrelevantis',
        params: {
          placementId: 13232354,
          allowSmallerSizes: true
        }
      }]
    }
  ];
  
  var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];
  
  var adDivIds = ['div-1','div-2','div-3'];
  document.addEventListener("DOMContentLoaded", function(event){ adrtags("D435C107A8844E15BAA5D4A9B7D94FC5", adUnits, adDivIds); });
</script>

The code creates three ad units, each corresponds one <div> tag in the page.

<div id='div-1'>
</div>
<div id='div-2'>
</div>
<div id='div-3'>
</div>

You can put these tags anywhere you want in the page.

When the page opens, the DOMContentLoaded event handler analyzes the page content to get its IAB Categories and top keywords; the Categories and keywords are sent as request parameters; the SSP and DSP bids based on the request parameters; the matched native ads are displayed.

You can find a working example at https://github.com/ghguo/adrhb-examples/blob/master/ContentExamples/essential-french-onion-soup-native.html. Need more info? Drop us a line at <info@adrelevantis.com>.

Native Content-Driven Advertising Example

There are two approaches to do Native Content-Driven Advertising using AdRelevantis Bidder Adapter: Manually target keywords and IAB Categories, or use AdRelevantis Content-Analysis service. In this blog, we focus on manually targeting keywords and IAB Categories.

We assume that you know basic programming in Prebid.js. Please go here if you are new to Prebid.js.

Assuming that in a page you want to display ads that are related to golf US Open, you can provide the keywords and IAB Categories as First Party Data (fpd) as follows.

pbjs.setBidderConfig({
  bidders: ['adrelevantis'],
  config: {
    fpd: {
      context: {
        keywords: ['US Open'],
        data: {
          category: '/sports/golf'
        }
      }
    }
  }
});

You can find the complete code of this example at https://github.com/ghguo/adrhb-examples/blob/master/native-example.html.

Content-Driven Native Header Bidding

Native ads blend seamlessly into pages. Content-Driven Native advertising takes a step further by matching ads with page content. As a result, your pages display relevant ads blending into content.

AdRelevantis SSP provides Content-Driven Native ads for publishers. With AdRelevantis Bidder Adapter, you get native ads that match with content of your pages.

To use AdRelevantis Bidder Adapter, add in your page head the following code.

<script async src="//www.adrelevantis.com/js/dev/prebid.js"></script>
<script src="//www.adrelevantis.com/js/contentdriventag.js"></script>
<script>
  var PREBID_TIMEOUT = 5000;
  var FAILSAFE_TIMEOUT = 6000;

  var adUnits = [{
    code: 'div_1',
    sizes: [
      [360, 360]
    ],
    mediaTypes: {
      native: {
        title: {
          required: true
        },
        image: {
          required: true
        },
        sponsoredBy: {
          required: true
        }
      }
    },
    bids: [{
      bidder: 'adrelevantis',
      params: {
        placementId: 13232354,
        allowSmallerSizes: true
      }
    }]
  },
  {
    code: 'div_2',
    sizes: [
      [250, 250]
    ],
    mediaTypes: {
      native: {
        title: {
          required: true
        },
        image: {
          required: true
        },
        sponsoredBy: {
          required: true
        }
      }
    },
    bids: [{
      bidder: 'adrelevantis',
      params: {
        placementId: 13232354,
        allowSmallerSizes: true,
        cpm: 0.50
      }
    }]
  },
  {
    code: 'div_3',
    sizes: [
      [1, 1]
    ],
    mediaTypes: {
      native: {
        title: {
          required: true
        },
        body: {
          required: true
        },
        image: {
          required: true
        },
        sponsoredBy: {
        required: true
        },
        icon: {
          required: false
        },
      }
    },
    bids: [{
      bidder: 'adrelevantis',
      params: {
        placementId: 13232354,
        allowSmallerSizes: true
      }
    }]
  }];
  var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];

</script>

<script>
  var adDivIds = ['div1','div2','div3'];
  document.addEventListener("DOMContentLoaded", function(event){ adrtags("D435C107A8844E15BAA5D4A9B7D94FC5", adUnits, adDivIds); });
</script>

Add the following <div> tags in your page body.

<div id='div1'>
</div><br>
<div id='div2'>
</div><br>
<div id='div3'>
</div>

The above code and tags display 3 Native ads in the page. You can add more or less <div> tags to your page to have more or less Native ads in the page.

When the page is open, the code will analyze the content and bid based on the content. In the end, you will see Native ads that match the page content.

Here are a few examples that show Native ads that match page content:

Just One Grand Slam Win Away From Federer, US Open Champ Nadal Knows His Time Is Limited
Essential French Onion Soup
Ex-Disney Star Laura Marano Is Determined To Prove Herself In The Music Industry
The Impracticality of Hardwood Flooring | Centsational Style

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/contentdriventag.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){ adrtags("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.