Ürünlerimiz hakkında görüşlerinizi paylaşmak ve geri bildirimde bulunmak için Google Advertising and Measurement Community sunucusundaki resmi Ad Manager Discord kanalına katılın.

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

ads_manager.js bölümünde, akış istekleri gönderen, reklam kapsülü manifestini alan, IMA akış etkinliklerini dinleyen ve emsg etkinliklerini IMA SDK'sına ileten IMA SDK StreamManager için bir sarmalayıcı sınıf tanımlayın.

ads_manager.js içinde, IMA HbbTV örnek uygulaması aşağıdaki yöntemleri ayarlar:

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

Reklam yöneticisini başlatma

Reklam yöneticisi sınıfını başlatın ve IMA akış etkinlikleri için işleyiciler ayarlayın. Bu çağrıda, VideoPlayer.setEmsgEventHandler() yöntemiyle emsg etkinlik işleyicisini 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ışı isteğinde bulunma

Google Ad Manager ağ kodunuzu ve akışın özel öğe anahtarını kullanarak PodStreamRequest nesne 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();
  var secretKey = getStreamSecretKeys();

  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';

  if (secretKey.STREAM_CREATE_SECRET) {
    var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;
    var params = {
      custom_asset_key: customAssetKey,
      exp: expirationTime,
      network_code: networkCode
    };
    streamRequest.authToken =
        this.generateAuthToken(params, secretKey.STREAM_CREATE_SECRET);
    debugView.log('AdsManager: make Auth-PodStreamRequest');
  } else {
    debugView.log('AdsManager: make PodStreamRequest without auth');
  }

  this.streamManager.requestStream(streamRequest);
};ads_manager.js

Reklam yayını etkinliklerini dinleme

Uygulamanızın IMA akış etkinliklerine (STREAM_INITIALIZED, AD_BREAK_STARTED ve AD_BREAK_ENDED) 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

emsg etkinlik bilgilerini IMA'ya iletmek için AdManager.onEmsgEvent() yöntemini StreamManager.processMetadata() yöntemini kullanarak oluşturun. Video oynatıcı sınıfı, VideoPlayer.setEmsgEventHandler() yöntemiyle bu yöntemi ç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ükleyin

Reklam kapsülü manifestini video oynatıcıyla önceden yüklemek için AdManager.loadAdPodManifest() yöntemini oluşturun. Yöntem: DASH pod manifesti bölümündeki yapıyı kullanarak kimliği doğrulanmış bir manifest URL'si 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('AdsManager: No stream data available.');
    return;
  }

  var adBreakId = this.getAdBreakId();
  var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;

  var params = {
    ad_break_id: adBreakId,
    custom_asset_key: customAssetKey,
    exp: expirationTime,
    network_code: networkCode,
    pd: podDuration
  };

  var secretKey = getStreamSecretKeys();
  var token = this.generateAuthToken(params, secretKey.MANIFEST_SECRET);
  var encodedToken = encodeURIComponent(token);

  var manifestUrl = 'https://dai.google.com/linear/pods/v1/dash/network/' +
    networkCode + '/custom_asset/' + customAssetKey + '/stream/' +
    this.streamData.streamId + '/ad_break_id/' + adBreakId +
    '/manifest.mpd?pd=' + podDuration + '&auth-token=' + encodedToken;

  this.videoPlayer.preload(manifestUrl);
};ads_manager.js

HbbTV örnek uygulaması, rastgele oluşturulmuş benzersiz bir adBreakId değeri kullanır. Üretim uygulamalarında adBreakId değeri, her reklam arası için bir artan alfanümerik dizedir (ör. ab-001). adBreakId değerinin, reklam arasını izleyen tüm kullanıcılar için aynı değer olduğunu doğrulayın. adBreakId değeri almak için DAI Ad Break API'yi kullanmanızı öneririz. Üretim ortamında, HbbTV akışı etkinliğine adBreakId değeri ve podDuration değerini ekleyin AD_BREAK_ANNOUNCE.

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

Oyuncu sınıfını ayarlama

Uygulama sınıfını oluşturma