Video
Header bidding allows you to integrate LoopMe ad spot via Prebid.js technology if you already use it. For more details about Prebid.js please visit http://prebid.org/overview/intro.html (opens in a new tab). This adapter allows you to run both in-stream and out-stream VAST/VPAID video
Step 1. Prebid.js file
- Download the prebid.js file from here: https://docs.prebid.org/download.html (opens in a new tab)
- Make sure you've selected LoopMe adaptor to be included
- Download the configured package:
- Store the file on your server/site. You will need this path in the next step.
Step 2. Insert LoopMe tag
Insert LoopMe ad spot tag into your page. The example below uses the MPU size (300x250) ad spot for out-stream placement. For in-stream please use context: 'instream' according to prebid.js instructions for instance: http://prebid.org/examples/video/instream/videojs/pb-ve-videojs.html (opens in a new tab).
...
<script>
var adUnits = [{
code: 'video1',
mediaTypes: {
video: {
playerSize: [300, 250],
context: 'outstream'
}
},
bids: [{
bidder: 'loopme',
params: {
ak: '223051e07f' //test ak, please replace with yours after the test
},
renderer: {
url: 'player.js', // Path to your favorite vast player
render: function (bid) {
// Your favorite Vast Player integration code which can use 'bid.vastUrl' as
// URL to vast.xml from prebid
}
},
}]
}];
<script>
...There are 2 ways of integration you may use.
- Default (recommended). Plays video ads with embedded LoopMe player.
- Optional. When you prefer to use your own player defined in the renderer section.
Below you can find both implementations as a reference Example 1. Uses default LoopMe player:
...
<script>
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
var adUnits = [{
code: 'video1',
mediaTypes: {
video: {
playerSize: [300, 250],
context: 'outstream'
}
},
bids: [{
bidder: 'loopme',
params: {
ak: '223051e07f'
},
}]
}];
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
timeout: 1000,
bidsBackHandler: function(bids) {
var highestCpmBids = pbjs.getHighestCpmBids('video1');
pbjs.renderAd(document, highestCpmBids[0].adId);
}
});
});
</script>
...Example 2. Uses Google IMA VAST player as a 3rd party renderer for video ads.
...
bids: [{
bidder: 'loopme',
params: {
ak: '223051e07f'
},
renderer: {
url: '//imasdk.googleapis.com/js/sdkloader/ima3.js',
render: function (bid) {
// Copyright 2015 Google Inc. All Rights Reserved.
// You may study, modify, and use this example for any purpose.
// Note that this example is provided "as is", WITHOUT WARRANTY
// of any kind either expressed or implied.
var adsManager;
var adsLoader;
var adDisplayContainer;
var intervalTimer;
var playButton;
var videoContent;
function init() {
console.log("init")
videoContent = document.getElementById('contentElement');
playButton = document.getElementById('playButton');
playButton.addEventListener('click', requestAds);
//setTimeout(function () {requestAds();}, 500);
mainContainer.addEventListener('click', function () {
alert('I was clicked!');
});
}
function createAdDisplayContainer() {
adDisplayContainer = new google.ima.AdDisplayContainer(
document.getElementById('adContainer'), videoContent);
}
function requestAds() {
console.log("requestAds")
google.ima.settings.setPlayerType('google/codepen-demo-tracking-mouse-clicks');
google.ima.settings.setPlayerVersion('1.0.0');
createAdDisplayContainer();
adDisplayContainer.initialize();
videoContent.load();
adsLoader = new google.ima.AdsLoader(adDisplayContainer);
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
onAdsManagerLoaded,
false);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError,
false);
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = bid.vastUrl;
adsRequest.linearAdSlotWidth = 300;
adsRequest.linearAdSlotHeight = 250;
adsRequest.nonLinearAdSlotWidth = 300;
adsRequest.nonLinearAdSlotHeight = 250;
adsLoader.requestAds(adsRequest);
}
function onAdsManagerLoaded(adsManagerLoadedEvent) {
console.log("onAdsManagerLoaded")
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
videoContent, adsRenderingSettings);
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
onContentPauseRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
onContentResumeRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
onAdEvent);
adsManager.addEventListener(
google.ima.AdEvent.Type.LOADED,
onAdEvent);
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
adsManager.addEventListener(
google.ima.AdEvent.Type.COMPLETE,
onAdEvent);
try {
adsManager.init(300, 250, google.ima.ViewMode.NORMAL);
adsManager.start();
} catch (adError) {
videoContent.play();
}
}
function onAdEvent(adEvent) {
console.log("onAdEvent")
var ad = adEvent.getAd();
switch (adEvent.type) {
case google.ima.AdEvent.Type.LOADED:
if (!ad.isLinear()) {
videoContent.play();
}
break;
case google.ima.AdEvent.Type.STARTED:
if (ad.isLinear()) {
intervalTimer = setInterval(
function () {
var remainingTime = adsManager.getRemainingTime();
},
300); // every 300ms
}
break;
case google.ima.AdEvent.Type.COMPLETE:
if (ad.isLinear()) {
clearInterval(intervalTimer);
}
break;
}
}
function onAdError(adErrorEvent) {
console.log(adErrorEvent.getError());
adsManager.destroy();
}
function onContentPauseRequested() {
videoContent.pause();
}
function onContentResumeRequested() {
console.log("onContentResumeRequested")
videoContent.play();
}
init();
}
},
...Example 3. Instream implementation using Google IMA player https://demopages.loopme.me/demo/prebid/ima3.html (opens in a new tab) The source video plays for 10 second (a driver sitting inside a car) then LoopMe ad video plays. After the ad finished the source video continues to play.
More examples of integration Prebid.js video adaptors can be found here: http://prebid.org/examples/video/ (opens in a new tab)
If your video player doesn't support VPAID and plays VAST only, please use this test ak: 3df93a0f34. Please be informed that VPAID compliant ad spots get better Fill rate resulting higher revenue. Use VPAID player whenever is possible.
For more details on LoopMe adaptor parameters please see: http://prebid.org/dev-docs/bidders.html#loopme (opens in a new tab)
Step 3. Confirm you see the test ad
If you see the test video:
then you can replace the test value '223051e07f' in the LoopMe tag with your real app key received from LoopMe account manager and consider the tech part of the integration complete.