Header Bidding video

From LoopMe Wiki
Jump to: navigation, search

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.
This solution allows you to run In-stream and Out-stream VAST/VPAID video

Step 1. Prebid.js file

1. Download the prebid.js file from here: http://prebid.org/download.html
2. Make sure you've selected LoopMe adaptor to be included
LoopMe checkbox.png


3. Download the configured package:
DownLoad button.png


4. 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.

...
var adUnits = [{
                code: 'video1',
                mediaTypes: {
                    video: {
                        playerSize: [300, 250],
                        context: 'outstream'
                    }
                },
                
                bids: [{
                    bidder: 'loopme',
                    params: {
                        ak: '3df93a0f34' //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
                        }
                    },
                }]
            }];
...


For more details on LoopMe adaptor parameters please see: http://prebid.org/dev-docs/bidders.html#loopme
Prebid.js recommends to assign renderer explicitly. You can use any player you get used to. Below you can find the example of LoopMe ad unit with a renderer using Google IMA VAST player.

...
bids: [{
                    bidder: 'loopme',
                    params: {
                        ak: '3df93a0f34'
                    },
                    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();
                        
                      }
                    },
...


More examples of integration Prebid.js video adaptors can be found here: http://prebid.org/examples/video/

Step 3. Confirm you see the test ad

If you see the test video:
Test Video.png

then you can replace the test value '3df93a0f34' in the LoopMe tag with your real app key received from LoopMe account manager and consider the tech part of the integration complete.