Pour discuter de nos produits et nous faire part de vos commentaires, rejoignez le canal Discord officiel Ad Manager sur le serveur de la communauté Google Advertising and Measurement.

Cette page a été traduite par l'API Cloud Translation.

Configurer le SDK IMA pour l'insertion dynamique d'annonces

Sélectionnez une plate-forme : HTML5 Android iOS tvOS Cast Roku

Les SDK IMA permettent d'intégrer facilement des annonces multimédias à vos sites Web et applications. Les SDK IMA peuvent demander des annonces à n'importe quel ad server conforme à la norme VAST et gérer la lecture des annonces dans vos applications. Avec les SDK IMA DAI, les applications envoient une demande de flux pour les annonces et le contenu vidéo (VOD ou contenu en direct). Le SDK renvoie ensuite un flux vidéo combiné, ce qui vous évite d'avoir à gérer le basculement entre les vidéos d'annonces et de contenu dans votre application.

Sélectionnez la solution DAI qui vous intéresse.

Lire des diffusions en direct enregistrées avec l'API Google Cloud Video Stitcher

Ce guide explique comment utiliser le SDK IMA DAI pour HTML5 afin de demander et de lire un flux en direct pour un événement enregistré avec l'API Google Cloud Video Stitcher, et comment insérer un break publicitaire pendant la lecture.

Ce guide développe l'exemple de base du guide de démarrage pour IMA DAI.

Pour savoir comment intégrer d'autres plates-formes ou utiliser les SDK IMA côté client, consultez SDK Interactive Media Ads.

Pour afficher ou suivre un exemple d'intégration terminé, téléchargez l'exemple de Cloud Video Stitcher pour HLS ou DASH.

Configurer un projet Google Cloud

Configurez un projet Google Cloud et des comptes de service pour y accéder.

Créez une configuration pour un événement diffusé en direct en utilisant votre propre diffusion en direct de contenu ou une diffusion en direct de test. Ce guide suppose que vous disposez d'un flux HLS.

Saisissez les variables suivantes à utiliser dans le SDK IMA :

Emplacement

La région Google Cloud dans laquelle votre configuration active a été créée : LOCATION

Numéro du projet

Numéro du projet Google Cloud utilisant l'API Video Stitcher : PROJECT_NUMBER

Jeton OAuth

Jeton OAuth de courte durée d'un compte de service avec le rôle utilisateur Video Stitcher :

OAUTH_TOKEN

Pour en savoir plus, consultez Créer des identifiants éphémères pour des comptes de service. Le jeton OAuth peut être réutilisé pour plusieurs requêtes tant qu'il n'a pas expiré.

Code de réseau

Code de réseau Ad Manager pour demander des annonces : NETWORK_CODE

ID de configuration de l'événement en direct: ID de configuration en direct que vous avez spécifié lors de la création de votre événement de diffusion en direct : LIVE_CONFIG_ID
Clé d'élément personnalisée: Clé de ressource personnalisée Ad Manager générée lors de la création d'une configuration pour un événement en direct avec l'API Video Stitcher : CUSTOM_ASSET_KEY

Configurer un environnement de développement

Les exemples d'applications IMA ne présentent que les requêtes de flux HLS. Vous pouvez toujours utiliser les flux DASH lors de la construction de la classe VideoStitcherLiveStreamRequest. Lorsque vous configurez votre lecteur compatible DASH, vous devez configurer un écouteur pour les événements de progression de votre lecteur vidéo, qui peut fournir les métadonnées de la vidéo à StreamManager.processMetadata(). Cette fonction prend en compte trois paramètres :

type : chaîne qui doit être définie sur 'ID3' pour les flux HLS et sur 'urn:google:dai:2018' pour les flux DASH.
data : pour les messages d'événement DASH, il s'agit de la chaîne de données du message.
timestamp : nombre correspondant à l'heure de début du message d'événement pour les flux DASH.

Envoyez les métadonnées dès que possible et aussi souvent que vos événements de lecteur peuvent les fournir. Si les métadonnées sont manquantes ou incorrectes, il est possible que le SDK IMA DAI ne déclenche pas d'événements publicitaires, ce qui peut entraîner des rapports incorrects.

Téléchargez les exemples IMA DAI pour HTML5 et extrayez l'exemple simple HLS.js dans un nouveau dossier. Cet exemple est une application Web que vous pouvez héberger localement à des fins de test.

Pour héberger l'exemple en local, accédez au nouveau dossier et exécutez la commande Python suivante pour démarrer un serveur Web :

python3 -m http.server 8000

http.server n'est disponible que dans Python 3.x. Vous pouvez utiliser n'importe quel autre serveur Web, comme le serveur HTTP Apache ou Node JS.

Ouvrez un navigateur Web et accédez à localhost:8000 pour afficher un lecteur vidéo. Votre navigateur doit être compatible avec la bibliothèque HLS.js.

Si tout fonctionne correctement, cliquez sur le bouton Lecture du lecteur vidéo pour lancer le court-métrage "Tears of Steel" après une courte annonce. Ce contenu est diffusé à l'aide d'un flux de vidéo à la demande (VOD).

Demander une diffusion en direct

Pour remplacer l'exemple de flux VOD par votre flux en direct, utilisez la classe VideoStitcherLiveStreamRequest qui crée automatiquement une session publicitaire avec Google Ad Manager. Vous pouvez utiliser l'interface utilisateur Google Ad Manager pour localiser les sessions DAI générées à des fins de surveillance et de débogage.

Dans l'exemple existant, des fonctions permettent de demander un flux VOD ou une diffusion en direct. Pour que cela fonctionne avec l'API Google Cloud Video Stitcher, vous devez ajouter une fonction pour renvoyer un objet VideoStitcherLiveStreamRequest.

Exemple :

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Pour les tests locaux, si les fichiers de diffusion en direct se trouvent dans un bucket Cloud Storage, vous devez activer CORS pour l'origine http://localhost:8000.

Actualisez la page. Vous pouvez ensuite demander et lire des diffusions en direct personnalisées.

(Facultatif) Ajouter des options de session de streaming

Personnalisez votre demande de flux en ajoutant des options de session pour remplacer la configuration par défaut de l'API Cloud Video Stitcher à l'aide de VideoStitcherLiveStreamRequest.videoStitcherSessionOptions. Si vous fournissez une option non reconnue, l'API Cloud Video Stitcher répondra par une erreur HTTP 400. Pour obtenir de l'aide, consultez le guide de dépannage.

Par exemple, vous pouvez remplacer les options du fichier manifeste avec l'extrait de code suivant, qui demande deux fichiers manifestes de flux avec des rendus classés du débit le plus faible au plus élevé.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Insérer une coupure publicitaire

L'API Google Cloud Video Stitcher insère les annonces récupérées à partir du tag d'annonce pour chaque emplacement publicitaire. Les coupures publicitaires sont indiquées dans le fichier manifeste à l'aide de repères publicitaires. Les marqueurs d'annonces sont insérés par l'encodeur de diffusion en direct.

Si vous utilisez votre propre diffusion en direct, vous devez insérer le repère publicitaire. Pour en savoir plus sur les marqueurs d'annonces HLS et DASH compatibles, consultez la documentation sur les marqueurs d'annonces.
Si vous avez créé une diffusion en direct à l'aide de l'API Google Cloud Livestream, insérez un événement de chaîne d'insertion de coupure publicitaire.

L'annonce est diffusée immédiatement après l'insertion de l'emplacement publicitaire.

Effectuer un nettoyage

Maintenant que vous avez hébergé une diffusion en direct à l'aide de l'API Google Cloud Video Stitcher et que vous l'avez demandée à l'aide du SDK IMA DAI pour HTML5, il est important de nettoyer toutes les ressources de diffusion.

Suivez le guide de nettoyage des diffusions en direct pour supprimer les ressources et les composants inutiles.

Enfin, dans la fenêtre de terminal où vous avez démarré le serveur Web Python 3, utilisez la commande ctrl+C pour arrêter le serveur local.