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 à service complet

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

Avant d'utiliser ce guide, familiarisez-vous avec le Chromecast Protocole Web Receiver du framework d'application. Ce dans ce guide suppose que vous maîtrisez les concepts de base des récepteurs CAF, tels que message les intercepteurs et mediaInformation objets, et savoir utiliser les commandes et commandes Cast pour émuler un expéditeur CAF.

Pour utiliser le SDK IMA DAI, vous devez disposer d'un fichier Ad Manager 360. Si vous disposez d'une annonce compte administrateur, contactez votre responsable de compte pour en savoir plus. Pour plus d'informations sur l'inscription à Ad Manager, consultez le Centre d'aide Ad Manager d'accessibilité.

Pour en savoir plus sur l'intégration à d'autres plates-formes ou sur l'utilisation du SDK IMA pour les SDK côté client, 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 implique deux composants principaux, présentées dans ce guide:

StreamRequest: Objet qui définit une demande de flux envoyée aux serveurs publicitaires de Google. Il existe deux types de demandes de 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 la source de contenu, un ID vidéo et une API facultative clé, ainsi que d'autres paramètres facultatifs.
StreamManager: Un objet qui gère la communication entre le flux vidéo et l'IMA DAI SDK, comme le déclenchement de pings de suivi et le transfert d'événements de flux à un éditeur.

Prérequis

Un compte Console développeur Cast associé à un appareil de test enregistré.
Un récepteur Web hébergé application qui est enregistré dans votre console de développement Cast et qui peut être modifié pour héberger à l'aide du code fourni dans ce guide.
Une application d'envoi configurée pour utiliser votre application réceptrice Web. Cet exemple utilise l'outil de commande et de contrôle Cast en tant que l'expéditeur.

Configurer les objets MediaInfo de l'expéditeur

Commencez par configurer les paramètres MediaInfo de votre application émettrice objet pour 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 motif
`streamType`		Pour les diffusions en direct, cette valeur doit être définie sur "LIVE". Pour les flux de vidéo à la demande, 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 les flux demandé.
	`videoId`	Flux à la demande uniquement. Identifie le flux demandé dans le champ dans le flux média spécifié.
	`ApiKey`	Une clé API facultative qui peut être requise pour récupérer l'URL de flux à partir de le SDK IMA DAI
	`senderCanSkip`	Valeur booléenne indiquant au destinataire si l'appareil émetteur a La possibilité d'afficher un bouton "Ignorer" afin d'assurer la compatibilité avec les annonces désactivables

Pour configurer ces valeurs dans l'outil de commande et de contrôle Cast, cliquez sur le bouton Charger Multimédia, puis définissez le type de requête de chargement personnalisé sur LOAD. Remplacez ensuite la Données JSON dans la zone de texte avec 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 du récepteur de base du SDK CAF, créez un récepteur Web de base.

Le code du 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 télécharger le Gestionnaire de lecteurs

Ajoutez un tag de script pour importer le SDK IMA DAI pour CAF vers votre récepteur Web. Il vous suffit pour cela après le chargement du script CAF. Le SDK CAF pour l'insertion dynamique d'annonce est permanent : il n'est donc pas nécessaire pour définir une version spécifique. Ensuite, dans le tag de script qui suit, stockez le le contexte du récepteur et le gestionnaire de joueurs comme constantes avant de le démarrer.

<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 flux du SDK CAF pour l'insertion dynamique d'annonce. administrateur.

<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 CAF pour l'insertion dynamique d'annonces utilise le message de chargement CAF intercepteur pour envoyer des demandes de flux et remplacer l'URL de contenu par le flux final d'insertion dynamique d'annonce. L'intercepteur de messages appelle streamManager.requestStream(), qui gère en définissant des coupures publicitaires, en demandant la diffusion et en remplaçant contentURL

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 .

<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'annonces CAF, vous devez créer votre flux demande à 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 pour l'insertion dynamique d'annonce avec le SDK CAF de Google. Pour en savoir plus sur les fonctionnalités avancées du SDK, consultez les autres guides ou téléchargez notre exemple de récepteur applications.