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

Premiers pas avec le SDK IMA DAI

Sélectionnez la solution d'insertion dynamique d'annonce qui vous intéresse.

Insertion dynamique d'annonces avec service complet

Ce guide explique comment lire un flux d'insertion dynamique d'annonce à l'aide du SDK IMA CAF. Si vous souhaitez afficher ou suivre un exemple d'intégration terminé, téléchargez-le.

Avant d'utiliser ce guide, veillez à vous familiariser avec le protocole du récepteur Web du framework d'application Chromecast. Ce guide part du principe que vous disposez de connaissances de base sur les concepts des récepteurs CAF, tels que les intercepteurs de messages et les objets mediaInformation, et que vous savez utiliser l'outil de commande et de contrôle Cast pour émuler un expéditeur CAF.

Pour utiliser l'insertion dynamique d'annonce IMA, vous devez disposer d'un compte Ad Manager 360. Si vous possédez un compte Ad Manager, contactez votre responsable de compte pour en savoir plus. Pour en savoir plus sur l'inscription à Ad Manager, consultez le Centre d'aide Ad Manager.

Pour en savoir plus sur l'intégration à d'autres plates-formes ou sur l'utilisation des SDK IMA côté client, consultez SDK Interactive Media Ads.

Présentation de l'insertion dynamique d'annonces CAF

Comme l'illustre ce guide, l'implémentation de l'insertion dynamique d'annonce à l'aide du SDK IMA CAF comporte deux composants principaux:

StreamRequest : objet qui définit une requête de flux vers les serveurs publicitaires de Google. Il existe deux façons principales de demander un flux:
- LiveStreamRequest : spécifie une clé d'élément et une clé API facultative, ainsi que d'autres paramètres facultatifs.
- VODStreamRequest : spécifie un ID de source de contenu, un ID vidéo, une clé API facultative, ainsi que d'autres paramètres facultatifs.
StreamManager : objet qui gère la communication entre le flux vidéo et le SDK IMA pour l'insertion dynamique d'annonce, comme le déclenchement des pings de suivi et le transfert des événements de flux à l'éditeur.

Prérequis

Un compte Console de développeur Cast avec un appareil de test enregistré
Une application de récepteur Web hébergée, enregistrée auprès de votre console de développement Cast et qui peut être modifiée pour héberger le code fourni par ce guide.
Une application d'envoi configurée pour utiliser votre application de réception Web. Cet exemple utilise l'outil de commande et de contrôle Cast comme expéditeur.

Configurer les objets MediaInfo de l'expéditeur

Commencez par configurer l'objet MediaInfo de votre application émettrice afin d'inclure les champs suivants:

`contentId`		Identifiant unique de cet élément multimédia
`contentUrl`		URL du flux de remplacement à charger si la requête StreamRequest pour l'insertion dynamique d'annonce échoue pour une raison quelconque
`streamType`		Pour les diffusions en direct, cette valeur doit être définie sur "LIVE". Pour les diffusions de VOD, cette valeur doit être définie sur "BUFFERED".
`customData`	`assetKey`	Diffusions en direct uniquement. Identifie la diffusion en direct à charger
	`contentSourceId`	Flux à la demande uniquement. Identifie le flux multimédia contenant le flux demandé.
	`videoId`	Flux à la demande uniquement. Identifie le flux demandé dans le flux multimédia spécifié.
	`ApiKey`	Une clé API facultative pouvant être requise pour récupérer l'URL de flux à partir du SDK IMA pour l'insertion dynamique d'annonce
	`senderCanSkip`	Valeur booléenne permettant au destinataire de savoir si l'appareil émetteur peut afficher un bouton "Ignorer" afin d'activer la compatibilité avec les annonces désactivables.

Pour configurer ces valeurs dans l'outil de commande et de contrôle de cast, cliquez sur l'onglet Load Media (Charger le média), puis définissez le type de requête de chargement personnalisé sur LOAD. Remplacez ensuite les données JSON dans la zone de texte par l'un des objets JSON suivants:

EN DIRECT

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

VOD

{
  "media": {
    "contentId": "tos",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
    "streamType": "BUFFERED",
    "customData": {
      "contentSourceId": "2548831",
      "videoId": "tears-of-steel",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Cet objet de requête de chargement personnalisé peut être envoyé au récepteur pour tester les étapes suivantes.

Créer un récepteur CAF de base

En suivant le guide de base du SDK CAF, créez un récepteur Web de base.

Le code de votre récepteur devrait se présenter comme suit:

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

Importer le SDK IMA DAI et obtenir le gestionnaire de lecteurs

Ajoutez un tag de script pour importer le SDK IMA DAI pour CAF dans votre récepteur Web, juste après le chargement de CAF par le script. Le SDK CAF pour l'insertion dynamique d'annonce étant toujours actualisé, il n'est pas nécessaire de définir une version spécifique. Ensuite, dans le tag de script qui suit, stockez le contexte du destinataire et le gestionnaire de joueurs en tant que constantes avant de démarrer le récepteur.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();

    castContext.start();
  </script>
</body>
</html>

Initialiser le gestionnaire de flux IMA

Initialisez le gestionnaire de flux du SDK d'insertion dynamique d'annonce CAF.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    castContext.start();
  </script>
</body>
</html>

Créer l'intercepteur de messages de chargement

Le SDK d'insertion dynamique d'annonce CAF utilise l'intercepteur de messages de chargement CAF pour effectuer des requêtes de flux et remplacer l'URL de contenu par le flux d'insertion dynamique d'annonce final. L'intercepteur de messages appelle streamManager.requestStream(), qui gère la définition des coupures publicitaires, la demande de flux et le remplacement des contentURL existants.

Il ne peut y avoir qu'un seul intercepteur de messages de chargement. Par conséquent, si votre application nécessite l'utilisation de l'intercepteur, vous devez intégrer toutes les fonctions personnalisées dans le même rappel.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => null;

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                this.broadcast('Stream request successful.');
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

Créer la demande de flux

Pour terminer l'intégration de l'insertion dynamique d'annonce CAF, vous devez créer votre requête de flux à l'aide des données incluses dans l'objet mediaInfo de l'expéditeur.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => {
      const imaRequestData = request.media.customData;
      let streamRequest = null;
      if (imaRequestData.assetKey) {
        // Live stream
        streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
        streamRequest.assetKey = imaRequestData.assetKey;
      } else if (imaRequestData.contentSourceId) {
        // VOD stream
        streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
        streamRequest.contentSourceId = imaRequestData.contentSourceId;
        streamRequest.videoId = imaRequestData.videoId;
      }
      if (streamRequest && imaRequestData.ApiKey) {
        streamRequest.ApiKey = imaRequestData.ApiKey;
      }
      if (streamRequest && imaRequestData.senderCanSkip) {
        streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
      }
      return streamRequest;
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

Vous pouvez désormais demander et lire des flux d'insertion dynamique d'annonce à l'aide du SDK CAF de Google. Pour en savoir plus sur les fonctionnalités avancées du SDK, consultez les autres guides ou téléchargez nos exemples d'applications récepteurs.