Справочник по наложенным и полным слотам Google IMA SDK для JavaScript

Question

Я уже использую Google IMA HTML5 SDK API для показа полноценных рекламных объявлений в нашем самодельном плеере.

Сейчас я пытаюсь добавить оверлейное объявление в том же API, но не могу найти документацию для этого. В FAQ есть ссылка на техническое руководство по быстрому запуску, но оказывается, что оно сделано для Flash ActionScript - но мне нужно такое же руководство для HTML5/JavaScript.

Как мне реализовать как оверлейное, так и полноформатное объявление Google с HTML5/JavaScript?

---

Обновить

Это мой текущий код JavaScript для двух разных рекламных запросов (сейчас он всегда возвращает пустое объявление для оверлея, поэтому он пока не работает):

var google = google || {
  ima: 'blocked'
}; //AdBlocker
/*
 #################################################################
 #                #
 #  Required: Google IMA SDK for HTML5      #
 #                #
 #################################################################
*/


wct.videoads = (function() {
  'use strict';

  //---------------------------------------------------------------
  // AdBlocker
  //---------------------------------------------------------------
  if (google.ima == 'blocked')
    return function() {};


  //---------------------------------------------------------------
  // $_
  //---------------------------------------------------------------
  var $_ = {
    // (HTML5 Full-Slot Ads)
    adTagPostroll: '[url removed]',
    adTagOverlay: '[url removed]'
  };


  //---------------------------------------------------------------
  // _
  //---------------------------------------------------------------
  var _ = {
    adsManagerOverlay: {
      destroy: function() {},
      resize: function() {}
    },
    adsManagerPostRoll: {
      destroy: function() {},
      resize: function() {}
    },
    height: 0,
    onError: function() {},
    width: 0
  };


  //---------------------------------------------------------------
  // :
  var createAds = function($container, width, height) {
    //---------------------------------------------------------------
    _.height = height;
    _.width = width;


    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // Init
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    google.ima.settings.setLocale(LANGUAGE.id);
    var adDisplayContainer = new google.ima.AdDisplayContainer($container.get(0));
    adDisplayContainer.initialize();

    var adsLoaderPostRoll = new google.ima.AdsLoader(adDisplayContainer);
    var adsLoaderOverlay = new google.ima.AdsLoader(adDisplayContainer);

    var postRollRequest = new google.ima.AdsRequest();
    var overlayRequest = new google.ima.AdsRequest();

    postRollRequest.adTagUrl = $_.adTagPostroll;
    postRollRequest.linearAdSlotWidth = width;
    postRollRequest.linearAdSlotHeight = height;
    postRollRequest.nonLinearAdSlotWidth = width;
    postRollRequest.nonLinearAdSlotHeight = height;
    postRollRequest.forceNonLinearFullSlot = true;

    overlayRequest.adTagUrl = $_.adTagOverlay;
    overlayRequest.linearAdSlotWidth = width;
    overlayRequest.linearAdSlotHeight = height;
    overlayRequest.nonLinearAdSlotWidth = width;
    overlayRequest.nonLinearAdSlotHeight = height;
    overlayRequest.forceNonLinearFullSlot = false;


    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // LOCAL Events
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    adsLoaderPostRoll.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      onAdsManagerPostRollLoaded,
      false
    );
    adsLoaderPostRoll.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdErrorPostRoll,
      false
    );
    adsLoaderOverlay.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      onAdsManagerOverlayLoaded,
      false
    );
    adsLoaderOverlay.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdErrorOverlay,
      false
    );


    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // :
    var startOverlay = function(options) {
      //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
      var options = options || {};

      adsLoaderOverlay.contentComplete();
      adsLoaderOverlay.requestAds(overlayRequest);

      _.onErrorOverlay = options.onEmpty || function() {};
    };


    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // :
    var startPostRoll = function(details) {
      //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
      return;//postroll is disabled for the moment to avoid any possible conflict with the overlay
      _.onContentPauseRequested = details.onAdStart;
      _.onContentResumeRequested = details.onAdFinish;

      adsLoaderPostRoll.requestAds(postRollRequest);

      _.onErrorPostRoll = details.onEmpty || function() {};
    };


    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // >
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    return {
      startOverlay: startOverlay,
      startPostRoll: startPostRoll,
      resize: resize
    };
  };

  //---------------------------------------------------------------
  // :
  var onAdErrorOverlay = function(adErrorEvent) {
    //---------------------------------------------------------------
    _.onErrorOverlay();
    console.warn(adErrorEvent.getError());
    //  _.adsManagerOverlay.destroy();
  };

  //---------------------------------------------------------------
  // :
  var onAdErrorPostRoll = function(adErrorEvent) {
    //---------------------------------------------------------------
    _.onErrorPostRoll();
    console.warn(adErrorEvent.getError());
    //  _.adsManagerPostRoll.destroy();
  };


  //---------------------------------------------------------------
  // :
  var onAdsManagerOverlayLoaded = function(adsManagerLoadedEvent) {
    //---------------------------------------------------------------
    console.debug('overlay ad loaded:');
    console.log(adsManagerLoadedEvent);
  };

  //---------------------------------------------------------------
  // :
  var onAdsManagerPostRollLoaded = function(adsManagerLoadedEvent) {
    //---------------------------------------------------------------
    _.adsManagerPostRoll = adsManagerLoadedEvent.getAdsManager(document.createElement('video'));
    _.adsManagerPostRoll.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
    _.adsManagerPostRoll.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, _.onContentPauseRequested);
    _.adsManagerPostRoll.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, _.onContentResumeRequested);
    _.adsManagerPostRoll.addEventListener(google.ima.AdEvent.Type.LOADED, function(event) {});


    try {
      _.adsManagerPostRoll.init(_.width, _.height, google.ima.ViewMode[$(document).fullScreen() ? 'FULLSCREEN' : 'NORMAL']);

      // Call start to show ads. Single video and overlay ads will
      // start at this time; this call will be ignored for ad rules, as ad rules
      // ads start when the adsManager is initialized.
      _.adsManagerPostRoll.start();

    } catch (adError) {
      console.error(adError);
    }
  };

  //---------------------------------------------------------------
  // :
  var resize = function(width, height) {
    //---------------------------------------------------------------
    _.adsManagerPostRoll.resize(width, height, google.ima.ViewMode[$(document).fullScreen() ? 'FULLSCREEN' : 'NORMAL']);
  };


  //---------------------------------------------------------------
  // >
  //---------------------------------------------------------------
  return createAds;
}());

Answer 1

Решение от Ву Чау: http://chauduyphanvu1.com/IMA_FullSlot_Overlay/

Большое спасибо!

Answer 2

Полноценные рекламные объявления отображаются в полноэкранном режиме с кнопкой пропуска. Вы уверены, что хотите визуализировать оверлейный баннер одновременно?

Вам понадобятся два экземпляра adsManager: один для вашего полного слота, а другой для наложения. В нужное время отправьте два запроса объявлений, но каждый из них будет отображаться в отдельном экземпляре adsManager. Теоретически вы должны сначала отобразить рекламное объявление, чтобы оверлей мог отображаться поверх рекламного места. Однако, возьмите это с щепоткой соли, потому что это может быть грязно с несколькими объектами и несколькими жизненными циклами. Кроме того, убедитесь, что вы разъяснили это с командой разработчиков политики, потому что я не уверен, что наложение объявления соответствует политике.