Overview
This article explains the prebid.js setup with Equativ as a bidder on the client-side (publisher's website).
For the setup in
Equativ’s UI, read
Header Bidding with Prebid.js - UI setup.
Integration types
The table below indicates if this article is relevant for your type of integration with Equativ.
Equativ’s Prebid.js support
Equativ supports prebid.js version 9.18 and later.
The following table shows which prebid.js components Equativ supports:
Prebid.js component | Notes |
---|
Prebid.js for Web |
- banners using the mediaType banner
- outstream video with two implementations:
- using the mediaType video, (context outstream); available since prebid.js version 4.12.0; in this implementation, Equativ only returns the VAST ad; publishers must implement their own video renderer
- using the mediaType banner; in this implementation you can benefit from Equativ’s outstream video script templates (e. g. Smart Video-Read, Video Parallax etc.)
- instream video using the mediaType video (context instream), since prebid.js version 3.4.0
|
Prebid Mobile | Prebid mobile (used with mobile ad server SDKs); communicates with Prebid Server to send/receive bid requests/responses |
Prebid Server | Prebid Server is the server side equivalent of prebid.js; it allows publishers to implement only a single adapter – the Prebid Server adapter. This adapter forwards the bid request to bidders (Equativ and others) and determines the winner. To learn more, see Prebid Server setup. |
Prebid.js download
To download prebid.js:
- go to the Prebid.js download page
- select the Bidder Adapter "Smart AdServer" and other needed adapters*
- select the Supply Chain Object module and the Currency module (more details in chapter "Currency management" below)
- click on Get Prebid.js to download the .js file
* Smart is now Equativ.
Note: Adding the Supply Chain Object module is recommended since it is supported by the Equativ adapter and can increase your average CPM.
Setup using prebid.js documentation
The website prebid.org provides comprehensive documentation about the client-side setup of prebid.js. A good way to start is the Developer section start page, which provides an overview of all relevant documentation including:
Other valuable resources include:
User sync configuration
With the configuration of the user syncing process, you can control how bidders sync user IDs with their DSPs. This can be useful to optimize page performance and to ensure user privacy and security. Prebid.js provides comprehensive documentation on the topic
here.
By default, prebid.js waits 3 seconds after the auction ends, and then allows every bidder adapter to drop up to 5 image-based user syncs.
However, Equativ's bidder is using
iframe-based user-syncing instead of image-based user-syncing. Therefore, please declare a valid
filterSettings.iframe object and allow the Equativ bidder to do iframe type user-syncing;
this snippet illustrates the configuration:
pbjs.setConfig({
userSync: {
"iframe": {
"bidders": ["smartadserver"],
"filter":"include"
}
});
Net price, gross price and bid price adjustment
For new customers, Equativ returns the bid price as a net price (i. e. without Equativ's revenue share). Returning the net price is the default setting when a new Equativ network (for a new customer) is opened. If needed, you can ask your contact at Equativ to change this setting so that Equativ returns the gross bid price (i. e. including Equativ's revenue share).
In any case, Equativ sends the information if the bid price is gross or net, so you can still perform client-side bid price adjustments. For an example, see chapter "2.2. bidCpmAdjustment"
here.
You can also apply bid price adjustment for deals if Equativ's revenue share for deals is different from the one for open auctions (read about enabling deals
here).
Currency management
With the optional
Prebid.js Currency Module, publishers can specify an ad server currency and convert all bids to this currency before the auction. The Currency Module is added to a page by calling the
setConfig API as shown in the snippet below.
pbjs.setConfig({
"currency": {
"adServerCurrency": "EUR",
"defaultRates": { "USD": { "EUR": 0.8 }}
}
});
In the snippet above, the
adServerCurrency is set to
EUR. Note that the
defaultRates attribute is optional, but recommended in case there is an issue loading the currency file.
The full documentation of the currency module is available
here.
If the currency module is
not installed, the currencies are processed as follows:
- Equativ will consider the incoming bid floor (if it exists) as a USD bid floor
- Equativ will bid in USD
- Prebid.js will process all bids as USD bids
If the Currency Module
is installed on the published page, and if an
adServerCurrency is defined:
- Equativ will consider the incoming bid floor (if it exists) as a bid floor in the defined adServerCurrency
- Equativ will bid in the defined adServerCurrency
- prebid.js will automatically convert all bids to the defined adServerCurrency
Price Floors module
Since version 5.8.0, Equativ's adapter supports the optional prebid.js Price Floors Module. With this module, the publisher can manage floors at a single location for all bidders. Floors can be tailored to the individual page or auction context - they can be dynamic using a third party in real time or static (defined at ad unit level); more details in the dedicated prebid documentation.
Note: The bidFloor parameter of the Equativ adapter remains available. If it is defined, it overrides the values from the Floor Module.
Prebid.js display example
The example below shows an integration of Equativ as a bidder, using Google Ad Manager as an ad server. You can copy/paste it and then register your own bid parameters (ad units), define your own timeout etc.
In this sample:
- Prebid Config Section
- used to set the timeout and to register your ad units on the page
- code: 'div-gpt-ad-1484867557615-0' is the identifier of this ad unit; in case of Google Publisher Tag, that ad unit’s slot element should be used here
- sizes (width and height) located in mediaTypes.banner.sizes; you can add multiple sizes here (e. g. [[300,250], [300,300]]); the bid parameters consist of the bidder, siteId, pageId, formatId. To get these Ids, a setup needs to be done in Equativ’s user interface (read more in Header Bidding with Prebid.js - UI setup).
- Prebid Boilerplate Section
- includes static code - no need to change
- Google Tag
- includes asynchronous loading of gpt.js and GPT configuration (full documentation here)
<html>
<head>
<!-- Prebid Config Section START -->
<!-- Make sure this is inserted before your GPT tag -->
<script>
var PREBID_TIMEOUT = 1000;
var adUnits = [{
code: 'div-gpt-ad-1484867557615-0',
mediaTypes: {
banner: {
sizes: [[300, 250]]
}
},
bids: [{
bidder: 'smartadserver',
params: {
siteId: 207435,
pageId: 896536,
formatId: 62913
}
}]
}];
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
</script>
<!-- Prebid Config Section END -->
<!-- Prebid Boilerplate Section START. No Need to Edit. -->
<script type="text/javascript" src="prebid.js" async></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function () {
googletag.pubads().disableInitialLoad();
});
pbjs.que.push(function () {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: sendAdserverRequest
});
});
function sendAdserverRequest() {
if (pbjs.adserverRequestSent) return;
pbjs.adserverRequestSent = true;
googletag.cmd.push(function () {
pbjs.que.push(function () {
pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
});
}
setTimeout(function () {
sendAdserverRequest();
}, PREBID_TIMEOUT);
</script>
<!-- Prebid Boilerplate Section END -->
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function () {
googletag.defineSlot('/45405203/hb_300x250', [300, 250], 'div-gpt-ad-1484867557615-0').addService(googletag
.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<h2>Prebid.js Test</h2>
<h5>Div-1</h5>
<!-- /45405203/hb_300x250 -->
<div id='div-gpt-ad-1484867557615-0' style='height:250px; width:300px;'>
<script>
googletag.cmd.push(function () {
googletag.display('div-gpt-ad-1484867557615-0');
});
</script>
</div>
</body>
</html>
Prebid.js outstream video example
Read the prebid.js developer documentation on outstream video ads
here.
Equativ supports two implementations of outstream video ads:
- using the mediaType video (context outstream); available since prebid.js version 4.12.0; in this implementation, Equativ only sends the VAST ad; publishers must implement their own video renderer
- using the mediaType banner; in this implementation you can benefit from Equativ’s outstream video script templates (e. g. Smart Video-Read, Video-Parallax etc.)
The snippet below shows the configuration of an outstream video ad unit using the
mediaType video with context
outstreamNote the renderer shown in this snippet: publishers must define their own renderer - Equativ only serves the VAST ad itself but does not provide any .js outstream video player.
{
code: 'adslot',
mediaTypes: {
video: {
playerSize: [640, 480],
context: 'outstream',
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
startdelay: 0
},
},
bids: [{
bidder: 'smartadserver',
params: {
siteId: 207435,
pageId: 896536,
formatId: 85089,
}
}],
renderer: {
url: 'https://acdn.adnxs.com/video/outstream/ANOutstreamVideo.js',
render: function (bid) {
adResponse = {
ad: {
video: {
content: bid.vastXml,
player_height: bid.playerHeight,
player_width: bid.playerWidth
}
}
}
// push to render queue because ANOutstreamVideo may not be loaded yet.
bid.renderer.push(() => {
ANOutstreamVideo.renderAd({
targetId: bid.adUnitCode, // target div id to render video.
adResponse: adResponse
});
});
}
}
}
Monetizing the same ad unit with multiple setups
The Equativ adapter is able to read multiple configurations of the same ad unit. The snippet below shows an ad unit set up with the two mediaTypes banner and video outstream. This configuration will generate two independent ad calls to Equativ. If Equativ responds to both, prebid.js will simply select the highest bidder as usual.
var adUnits = [{
code: 'prebid_tag_001',
mediaTypes: {
banner: {
sizes: [[300,250]]
},
video: {
context: 'outstream',
playerSize: [640, 480],
protocols: [6, 7, 8]
}
},
bids: [{
bidder: 'smartadserver',
params: {
domain: 'https://prg.smartadserver.com',
siteId: 411951,
pageId: 1383641,
formatId: 84313
}
}]
}
];
Prebid.js instream video example
Read the prebid.js developer documentation on instream video ads
here.
The snippet below shows the configuration of an instream video ad unit.
var videoAdUnit = {
code: 'test-div',
mediaTypes: {
video: {
context: 'instream',
playerSize: [640, 480]
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
startdelay: 0
}
},
bids: [{
bidder: "smartadserver",
params: {
siteId: 326147,
pageId: 1153895,
formatId: 55710
}
}]
};
You can also mix instream video ads and banner ads - see the example provided by prebid.js
here.
Testing the implementation
To test your implementation, you can use the following snippet; it logs responses in the console, such as (adId, bidder, cpm etc.)
var responses = pbjs.getBidResponses();
var output = [];
for (var adunit in responses) {
if (responses.hasOwnProperty(adunit)) {
var bids = responses[adunit].bids;
for (var i = 0; i < bids.length; i++) {
var b = bids[i];
output.push({
'adunit': adunit, 'adId': b.adId, 'bidder': b.bidder,
'time': b.timeToRespond, 'cpm': b.cpm, 'msg': b.statusMessage
});
}
}
}
if (output.length) {
if (console.table) {
console.table(output);
} else {
for (var j = 0; j < output.length; j++) {
console.log(output[j]);
}
}
} else {
console.warn('NO prebid responses');
}
This screenshot shows an example output of the snippet:
Setup in publisher ad server
For the setup to be done in the publisher ad server, the ad operations team should start with the
AdOps and Prebid start page.
A Step by step guide to Google Ad Manager setup is available
here.