Unlike instream video ads, which require you to have your own video inventory, Outstream video ads can be shown on any web page, even pages that only have text content.
This page has information you’ll need to set up Prebid.js to show outstream video.
Other than using a slightly different ad unit in your Prebid code on the page, you shouldn’t have to make any major engineering changes from a standard Prebid setup.
There should be no changes required on the ad ops side, since the outstream units use the standard Prebid creative, line item targeting setup, etc.
"video" media typeUse the adUnit.mediaTypes object to set up your ad units with the video media type and assign the appropriate context
For full details on video ad unit parameters, see Ad Unit Reference for Video
var videoAdUnits = [{
code: 'video1',
mediaTypes: {
video: {
context: 'outstream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1,
playback_method: ['auto_play_sound_off']
}
},
bids: [{
bidder: 'appnexus',
params: {
placementId: 13232385,
}
}]
}];
To display an outstream video, two things are needed:
renderer.Prebid.js will select the renderer used to display the outstream video in the following way:
renderer is associated with the Prebid adUnit’s video mediaType, it will be used to display any outstream demand associated with that adUnit with a mediaType of “video”. (This is the preferred method.)renderer is associated with the Prebid adUnit, it will be used to display any outstream demand associated with that adUnit. Below, we will provide an example of an adUnit with an associated renderer. This is legacy, and number 1 is the preferred way.renderer is specified on the Prebid adUnit, Prebid will invoke the renderer associated with the winning (or selected) demand partner video bid.At this time, since not all demand partners return a renderer with their video bid responses, we recommend that publishers associate a renderer with their Prebid video adUnits, if possible. By doing so, any Prebid adapter that supports video will be able to provide demand for a given outstream slot.
Renderers can be attached to adUnits in three ways; Prebid will pick the first that is defined as:
adUnit.mediaTypes[type].renderer (for example, adUnit.mediaTypes.video.renderer);adUnit.bids[].renderer;adUnit.renderer.A renderer is an object containing these properties:
url – Points to a file containing the renderer script.render – A function that tells Prebid.js how to invoke the renderer script.backupOnly – Optional field, if set to true, buyer or adapter renderer will be preferredIn a multiFormat adUnit, you might want the renderer to only apply to only one of the mediaTypes. You can do this by defining the renderer on the media type itself.
pbjs.addAdUnit({
code: 'video1',
// This renderer would apply to all prebid creatives...
renderer: {
url: 'example.com/publishersCustomRenderer.js',
render: function(bid) { renderAdUnit(...) }
},
mediaTypes: {
video: {
context: 'outstream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
// but a renderer passed in here would apply only to this mediaType.
// This renderer would override the above renderer if it exists.
renderer: {
url: 'example.com/videoRenderer.js',
render: function (bid) { renderVideo(...) }
}
},
display: {
// With the renderer property excluded here, the display bids would
// use the renderer defined on the adUnit level.
...,
},
},
...
});
Some demand partners that return a renderer with their video bid responses may support renderer configuration with the adUnit.renderer.options object. These configurations are bidder specific and may include options for skippability, player size, and ad text, for example. An example renderer configuration follows:
pbjs.addAdUnit({
code: 'video1',
mediaTypes: {
video: {
context: 'outstream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
}
},
renderer: {
options: {
adText: 'This text was configured in the ad unit',
}
},
...
});
For more technical information about renderers, see the pull request originally adding the ‘Renderer’ type and the pull request allowing the ‘renderer’ type in the mediaType.
Invoke your ad server for the outstream adUnit from the body of the page in the same way that you would for a display adUnit
For a live example, see Outstream with Google Ad Manager.
<div id='video1'>
<p>Prebid Outstream Video Ad</p>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('video1');
});
</script>
</div>
Prebid can serve outstream demand directly without going through a primary ad server.
For a live example, see Outstream without an Ad Server.
In the Prebid.js event queue, you’ll need to add a function that:
pbjs.que.push(function () {
pbjs.addAdUnits(videoAdUnits);
pbjs.requestBids({
timeout: 3000,
bidsBackHandler: function (bids) {
var highestCpmBids = pbjs.getHighestCpmBids('video1');
pbjs.renderAd(document, highestCpmBids[0].adId);
}
});
});
For more information, see the API documentation for:
Below, find links to end-to-end “working examples” demonstrating Prebid Outstream: