适用于 JavaScript 的 Google IMA SDK 叠加层和全槽广告参考

Posted 2023-04-13

【中文标题】适用于 JavaScript 的 Google IMA SDK 叠加层和全槽广告参考

【英文标题】：Google IMA SDK Overlay & Fullslot Ad Reference for JavaScript

【发布时间】：2017-03-21 22:10:05

【问题描述】：

我已经在使用Google IMA html5 SDK API 在我们自制的播放器中显示全幅广告。

现在，我尝试在同一个 API 中添加重叠式广告，但我找不到相关文档。在FAQ 中是指向technical quick start guide 的链接，但事实证明它是为 Flash ActionScript 制作的 - 但我需要相同的 HTML5/javascript 指南。

如何使用 HTML5/JavaScript 实现 Google 重叠式广告和全幅广告？

---

更新

这是我当前用于两个不同广告请求的 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;
());

【问题讨论】：

重叠式广告类型也称为非线性广告类型（在视频播放期间显示）

重叠式广告和全幅广告当然不会同时显示。

【参考方案1】：

全幅广告以全屏形式呈现，并带有一个跳过按钮。确定要同时渲染覆盖横幅吗？

您需要两个 adsManager 实例：一个用于全槽，一个用于叠加。在所需时间，发送两个广告请求，但在其自己的 adsManager 实例中呈现每个广告请求。从理论上讲，您应该首先呈现全幅广告，以便叠加层可以呈现在全幅广告之上。但是，请稍加注意，因为它可能会因多个对象和多个生命周期而变得混乱。另外，请务必向政策团队明确这一点，因为我不确定叠加广告是否符合政策。

【讨论】：

你当然是对的，它们不是同时显示的。

我复制了现在以google.img.AdsLoader 开头的所有内容。但是，即使 VAST 网址 (pubads.g.doubleclick.net/gampad/…) 已经过测试并且应该投放广告，我总是会收到广告为空的消息。我更新了我的问题，向您展示了我目前使用哪种 JavaScript 来创建两个广告请求。

如果服务器返回空的 VAST，那是因为它认为广告请求是重复的。在发出新的广告请求之前，请确保销毁您各自的 adsManager 实例并在您的 adsLoader 上调用 contentComplete。这样做会重置 SDK，并使您的广告请求在服务器看来是合法的。

谢谢。然而，调用contentComplete 并没有改变任何东西。无论如何，叠加层是第一个调用的广告，全尺寸是后贴片（仍然可以正常工作），然后被调用。但是，出于测试目的，我什至禁用了后贴全尺寸广告，也没有改变任何东西。顺便说一句，我认为contentComplete 仅用于后贴片广告“这将允许 SDK 播放后贴片广告。” - 我现在插入了我用来管理两者的完整 JavaScript 代码广告进入我的问题，你能快速看一下吗？

如果你仍然有兴趣在这里帮助我，今天是你获得赏金的最后机会