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

Premiers pas avec le SDK IMA DAI

Sélectionnez la solution de publicité display in-app qui vous intéresse.

Insertion dynamique d'annonces complète

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

Avant d'utiliser ce guide, assurez-vous de vous familiariser avec le protocole Web Receiver du Chromecast Application Framework. Ce guide suppose que vous connaissez les concepts de base 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 émetteur CAF.

Pour utiliser la fonctionnalité IMA DAI, 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 savoir comment vous inscrire à 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 côté client IMA, consultez la page SDK Interactive Media Ads.

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

L'implémentation de l'insertion dynamique d'annonces à l'aide du SDK IMA CAF DAI implique deux composants principaux, comme indiqué dans ce guide:

StreamRequest : objet qui définit une requête de flux vers les serveurs publicitaires de Google. Les requêtes de flux se présentent sous deux formes principales:
- 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 et 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 DAI, par exemple en déclenchant des pings de suivi et en transmettant des événements de flux à l'éditeur.

Prérequis

Un compte Cast Developer Console avec un appareil de test enregistré.
Une application de récepteur Web hébergée enregistrée dans votre console développeur Cast et pouvant être modifiée pour héberger le code fourni dans ce guide.
Une application d'envoi configurée pour utiliser votre application de récepteur 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 d'envoi pour inclure les champs suivants:

`contentId`		Identifiant unique de cet élément multimédia
`contentUrl`		URL de flux de remplacement à charger si la requête de flux DAI échoue pour une raison quelconque
`streamType`		Pour les flux en direct, cette valeur doit être définie sur "LIVE". Pour les flux VOD, elle doit être définie sur "BUFFERED".
`customData`	`assetKey`	Diffusions en direct uniquement. Identifie la diffusion en direct à charger
	`contentSourceId`	Flux de vidéo à la demande uniquement. Identifie le flux multimédia contenant le flux demandé.
	`videoId`	Flux de vidéo à la demande uniquement. Identifie le flux demandé dans le flux multimédia spécifié.
	`ApiKey`	Clé API facultative qui peut être requise pour récupérer l'URL du flux à partir du SDK d'insertion dynamique d'annonce IMA
	`senderCanSkip`	Valeur booléenne permettant au destinataire de savoir si l'appareil d'envoi peut afficher un bouton de désactivation, ce qui permet de prendre en charge les annonces désactivables

Pour configurer ces valeurs dans l'outil de commande et de contrôle de la diffusion, cliquez sur l'onglet Charger des contenus multimédias, 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 destinataire pour tester les étapes suivantes.

Créer un récepteur CAF de base

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

Le code du destinataire doit 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 Player Manager

Ajoutez une balise de script pour importer le SDK IMA DAI pour CAF dans votre récepteur Web, juste après le chargement du script CAF. Le SDK DAI CAF est toujours à jour. Il n'est donc pas nécessaire de définir une version spécifique. Ensuite, dans la balise de script qui suit, stockez le contexte du récepteur et le gestionnaire de lecteurs 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 DAI 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 message de charge

Le SDK DAI CAF utilise l'intercepteur de messages de charge CAF pour effectuer des requêtes de flux et remplacer l'URL du contenu par le flux DAI final. L'intercepteur de messages appelle streamManager.requestStream(), qui gère le paramétrage des coupures publicitaires, la demande du flux et le remplacement de l'contentURL existant.

Il ne peut y avoir qu'un seul intercepteur de message 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 requête de flux

Pour finaliser l'intégration de la publicité display en ligne 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 DAI avec le SDK DAI 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 de récepteur.