Ads Manager sınıfını oluşturma

ads_manager.js dosyasında, IMA SDK StreamManager için yayın isteği gönderen, reklam kapsülü manifestini alan, IMA yayın etkinliklerini dinleyen ve emsg etkinliklerini IMA SDK'ya ileten bir sarmalayıcı sınıfı tanımlayın.

ads_manager.js dosyasında IMA HbbTV örnek uygulaması aşağıdaki yöntemleri ayarlar:

  • requestStream()
  • onStreamEvent()
  • onEmsgEvent()
  • loadAdPodManifest()

Reklam yöneticisini başlat

Reklam yöneticisi sınıfını başlatın ve IMA akış etkinlikleri için işleyicileri ayarlayın. Bu çağrıda, e-posta etkinlik işleyicisini VideoPlayer.setEmsgEventHandler() yöntemiyle ayarlayın.

/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};
ads_manager.js

Reklam kapsülü akışı için istek gönderme

Google Ad Manager ağ kodunuzu ve akışın özel öğe anahtarını kullanarak bir PodStreamRequest nesnesi oluşturmak için AdManager.requestStream() yöntemini oluşturun. Aşağıdaki akış parametreleriyle IMA örnek DASH kapsülü yayınlama akışını kullanarak HbbTV uygulamanızı test edin:

  • Ağ kodu: '21775744923'
  • Özel öğe anahtarı: 'hbbtv-dash'
/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function(networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';
  debugView.log('AdsManager: make PodStreamRequest');
  this.streamManager.requestStream(streamRequest);
};
ads_manager.js

Reklam akışı etkinliklerini dinleme

Uygulamanızın IMA akış etkinliklerine, STREAM_INITIALIZED, AD_BREAK_STARTED ve AD_BREAK_ENDED'a verdiği yanıtı işlemek için AdManager.onStreamEvent() yöntemini oluşturun.

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};
ads_manager.js

Reklam akışı meta verilerini işleme

E-posta etkinliği bilgilerini IMA'ya iletmek için StreamManager.processMetadata() yöntemini kullanarak AdManager.onEmsgEvent() yöntemini oluşturun. Video oynatıcı sınıfı, bu yöntemi VideoPlayer.setEmsgEventHandler() yöntemiyle çağırır.

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};
ads_manager.js

Reklam kapsülü manifestini yükleme

Reklam kapsülü manifestini video oynatıcıyla önceden yüklemek için AdManager.loadAdPodManifest() yöntemini oluşturun. Yöntem: DASH kapsülü manifesti bölümündeki yapıyı kullanarak manifest URL'sini oluşturun.

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest =
    function(networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('IMA SDK: No DAI pod session registered.');
    return;
  }

  var MANIFEST_BASE_URL = 'https://dai.google.com/linear/pods/v1/dash/network/';
  // Method: DASH pod manifest reference docs:
  // https://developers.google.com/ad-manager/dynamic-ad-insertion/api/pod-serving/reference/live#method_dash_pod_manifest
  var manifestUrl = MANIFEST_BASE_URL + networkCode + '/custom_asset/' +
    customAssetKey + '/stream/' + this.streamData.streamId + '/pod/' +
    this.getPodId() + '/manifest.mpd?pd=' + podDuration;
  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

HbbTV örnek uygulaması, rastgele oluşturulan benzersiz bir podId kullanır. Üretim uygulamalarında podId, bir ile başlayan ve her reklam arası için bir birim artan bir tam sayıdır. podId değerinin, reklam arasını görüntüleyen tüm kullanıcılar için aynı olduğundan emin olun. podId almak için Erken reklam arası bildirimleri (EABN) API'sini kullanmanızı öneririz. Üretim ortamında, podId ve podDuration'ü HbbTV yayın etkinliği AD_BREAK_ANNOUNCE'ye ekleyin.

Ardından, HbbTV uygulamanız için HbbTV yayınıyla etkileşime geçen ana uygulama sınıfını oluşturun.

Önceki
Oyuncu sınıfını ayarlama
Sonraki
Uygulama sınıfını oluşturma