Mobile Web Tag Integration

For Web Mobile display.io provides an option of Header Bidding with Prebid.js  (learn more about Prebid.js here).

As an alternative option you can manually add prebid.js code to the header of you page, inc. display.io adapter code (marked with green) how it’s listed below:

var adUnits = [
 {
   code: 'test-banner-rect',
   mediaTypes: {
     banner: {
       sizes: [[320, 480]]
     },
     video: {
       sizes: [[360, 640]]
     },
   },
   bids: [
     {
       bidder: 'displayio',
       params: {
         siteId: 1,
         placementId: 1,
         adsSrvDomain: 'appsrv.display.io',
         cdnDomain: 'cdn.display.io',
         pageCategory: 'pageCategory1, pageCategory2', //comma separated
         keywords: 'keyword1, keyword2, keyword3', //comma separated
         custom: {
           headerText: 'Our awesome advertisement',
           headerTextColor: '#2196f3',
           headerBackgroundColor: 'black',
           adContainerBackgroundColor: 'transparent',
           fixedHeaderSelector: '.site-header',
         },
       }
     }
   ]
 }
];
var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;
var adUnits = [${units.split('}{')}];
var pbjs = {};//pbjs || {};
pbjs.que = [];//pbjs.que || [];
var CMP_TIMEOUT = 8000;
var consentManagement = {
gdpr: {
   cmpApi: 'iab',
   timeout: CMP_TIMEOUT,
   defaultGdprScope: true
},
usp: {
   cmpApi: 'iab',
   timeout: CMP_TIMEOUT
 }
}
if (typeof __tcfapi !== 'function') {
   delete consentManagement.gdpr;
}
pbjs.que.push(function() {
   pbjs.setConfig({consentManagement})
});
pbjs.que.push(function() {
   pbjs.addAdUnits(adUnits);
   pbjs.requestBids({
       bidsBackHandler: initAdserver,
       timeout: PREBID_TIMEOUT
   });
});
function initAdserver(bidResponses) {
   if (pbjs.initAdserverSet) return;
   pbjs.initAdserverSet = true;
   // if publisher uses GAM
   googletag.cmd.push(function() {
            pbjs.que.push(function() {
              pbjs.setTargetingForGPTAsync();
              googletag.pubads().refresh();
            });
          });
   const displayioBids = getDisplayioBid(bidResponses)
   displayioBids.forEach(b => {
       webis.init(b[1].bids[0].adData, b[0])
   })
}
function getDisplayioBid(bidResponses) {
   const codes = adUnits.map(u => u.code);
   const bids = Object.entries(bidResponses);
   bids.filter(([key, value]) => codes.includes(key) && value.bids[0].bidderCode === 'displayio');
   return bids;
}
   const displayioBids = getDisplayioBid(bidResponses)
   displayioBids.forEach(b => {
       webis.init(b[1].bids[0].adData, b[0])
   })
}
function getDisplayioBid(bidResponses) {
   const codes = adUnits.map(u => u.code);
   const bids = Object.entries(bidResponses);
   bids.filter(([key, value]) => codes.includes(key) && value.bids[0].bidderCode === 'displayio');
   return bids;
}

All UX & Data customizations, described for display.io Ad Tag direct integration, are relevent for integration via prebid.js as well: link.

Still have Questions?

Contact Us