Créer la classe Ads Manager

Remarque : Avant de poursuivre ce guide, vous devez suivre les étapes décrites dans Configurer la classe du lecteur.

Dans ads_manager.js, définissez une classe wrapper pour le StreamManager du SDK IMA qui effectue des demandes de flux, obtient le fichier manifeste du bloc d'annonces, écoute les événements de flux IMA et transmet les événements emsg au SDK IMA.

Dans ads_manager.js, l'application exemple IMA HbbTV configure les méthodes suivantes :

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

Initialiser le gestionnaire d'annonces

Initialisez la classe du gestionnaire d'annonces et définissez des écouteurs pour les événements de flux IMA. Dans cet appel, définissez le gestionnaire d'événements emsg avec la méthode VideoPlayer.setEmsgEventHandler().

Important : Le SDK IMA n'est pas compatible avec l'interface utilisateur des annonces sur HbbTV. Ne transmettez pas le paramètre adUiElement dans le constructeur StreamManager. La transmission de adUiElement peut entraîner la diffusion d'annonces incompatibles dans Ad Manager.

/**
 * 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

Demander un flux de série d'annonces

Créez la méthode AdManager.requestStream() pour créer un objet PodStreamRequest à l'aide de votre code réseau Google Ad Manager et de la clé de contenu personnalisé du flux. Testez votre application HbbTV à l'aide du flux de diffusion de pod DASH IMA exemple avec les paramètres de flux suivants :

• Code réseau : '21775744923'
• Clé d'élément personnalisée : '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

Écouter les événements du flux d'annonces

Créez la méthode AdManager.onStreamEvent() pour gérer la réponse de votre application aux événements de flux IMA, STREAM_INITIALIZED, AD_BREAK_STARTED et AD_BREAK_ENDED.

/**
 * 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

Gérer les métadonnées du flux d'annonces

Pour transmettre les informations de l'événement emsg à IMA, créez la méthode AdManager.onEmsgEvent() à l'aide de la méthode StreamManager.processMetadata(). La classe du lecteur vidéo appelle cette méthode avec la méthode VideoPlayer.setEmsgEventHandler().

/**
 * 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

Charger le fichier manifeste du groupe d'annonces

Créez la méthode AdManager.loadAdPodManifest() pour précharger le fichier manifeste de la série d'annonces avec le lecteur vidéo. Créez une URL de fichier manifeste authentifiée à l'aide de la structure de la section Méthode : fichier manifeste du pod DASH.

/**
 * 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

L'application exemple HbbTV utilise une valeur adBreakId unique générée de façon aléatoire. Dans les applications de production, la valeur adBreakId est une chaîne alphanumérique (par exemple, ab-001) qui augmente d'une unité pour chaque coupure publicitaire. Vérifiez que la valeur adBreakId est la même pour tous les spectateurs de l'insertion publicitaire. Pour obtenir une valeur adBreakId, nous vous recommandons d'utiliser l'API Ad Break pour l'insertion dynamique d'annonce. Dans un environnement de production, incluez les valeurs adBreakId et podDuration dans l'événement de flux HbbTV AD_BREAK_ANNOUNCE.

Important : Vous devez authentifier votre demande de fichier manifeste de groupe d'annonces. Sans authentification, Google Ad Manager ne peut pas diffuser d'annonces dans le fichier manifeste du bloc d'annonces. Pour authentifier la requête, planifiez votre coupure publicitaire avec l'API DAI Ad Break ou incluez le auth-token paramètre de requête dans l'URL de la requête du fichier manifeste du bloc d'annonces.

Créez ensuite la classe d'application principale pour votre application HbbTV qui interagit avec la diffusion HbbTV.