For Web Mobile display.io provides an option of Header Bidding with Prebid.js (learn more about Prebid.js here).
To integrate you can download Displayio Bidder Adapter (link) and to follow the instructions on prebid.org.
Displayio Bidder Adapter tech documenattion is vailable by the link.
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.