Mobile Web Prebid.js/GAM Integration

Display.io Mobile Web Tag can run within Prebid.js/GAM Integration.

All ad units supported by Display.io Mobile Web Tag for direct integration are avaialble for Prebid.js/GAM integration as well:

  • Interscroller Ad Unit  
    • Ad Formats: Display Interstitial size (320×480), Vertical Outstream Video (360X640)
    • Modes: Reveal / Non-Reveal
  • Headline Ad unit
    • Ad Formats: Display Mrect size (300×250), Horizontal Outstream Video (360X640)
    • Modes: Snap / In-feed only (without headline mode)
  • Infeed Ad unit
    • Ad Formats: Display Mrect size (320×50), Horizontal Outstream Video (360X640)
    • Modes: In-feed only
  • Banner Ad unit
    • Ad Formats: Display Mrect size (320×50)
    • Modes: In-feed / Always shown

All the detailed information about the tag UX customization is available here.

Prebid.js

To set up Header Bidding integration via Prebid.js you need to:

  1. Add Displayio Bidder Adapter to your Prebid.js library
    Select Displayio Bidder Adapter (link) to the list of selected adapters to download a ready to use Prebid.js script for your mobile web Header Bidding (detailed instructions are available on prebid.org).
  2. Configure Displayio Bidder Adapter
    Displayio 
    Bidder Adapter tech documenattion is vailable by the link.
    A typical Prebid.js ad unit configuration looks like the following (sizes and customizations (custom param) relevant for Interscroller ad unit):
var adUnits = [
 {
   code: 'test-example',
   mediaTypes: {
     banner: {
       sizes: [[320, 480]]
     },
     video: {
       sizes: [[360, 640]]
     },
   },
   bids: [
     {
       bidder: 'displayio',
       params: {
         siteId: {site_id},
         placementId: {placement_id},
         adsSrvDomain: 'appsrv.display.io',
         cdnDomain: 'cdn.display.io',
         renderURL: 'https://cdn.display.io/webis/webis-prebid.min.js',
         pageCategory: 'pageCategory1, pageCategory2', //comma separated
         keywords: 'keyword1, keyword2, keyword3', //comma separated
         custom: {
           headerText: 'ADVERTISEMENT',
           headerTextColor: '#2196f3',
           headerBackgroundColor: 'black',
           adContainerBackgroundColor: 'transparent',
           fixedHeaderSelector: '.site-header',
         },
       }
     }
   ]
 }
];

where:

  1. {placement_id} and {placement_id} should be replaced with your Inventory ID (site and placement IDs) on display.io Platform
  2. mediaTypes and sizes should be set up according to the selected ad units:
    Interscroller: banner: 320×480, video: 360×640;
    Infeed: banner: 300×250, video: 640×360;
    Headline: banner: 300×250, video: 640×360;
    Banner: banner: 320×50.
  3. UX (custom, etc.) & Data (keywords, pageCategory, etc.) customization should be applied according to the specification, provided for display.io Ad Tag direct integration.

As an alternative option you can manually add prebid.js code to the header of you page, inc. Displayio adapter code, how it’s listed in the example above.

Prebid.js/GAM

Displayio Prebid Adapter can be configured along with Google Ad manager as an ad server. A typical configuration should be similar to what is described in the official Prebid.js documentation.

Still have Questions?

Contact Us