Configurer avec l'insertion dynamique d'annonces à service complet

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

Ce guide explique comment lire un flux d'insertion dynamique d'annonce à l'aide du SDK IMA CAF DAI. Si vous souhaitez afficher ou suivre un exemple d'intégration complet, 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 du récepteur CAF, tels que les intercepteurs de messages et les objets mediaInformation, ainsi que l'utilisation de l'outil de commande et de contrôle Cast pour émuler un émetteur CAF.

Pour utiliser l'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 en savoir plus sur l'inscription à Ad Manager, consultez le Centre d'aide Ad Manager.

Pour en savoir plus sur l'intégration avec 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

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

  • StreamRequest : objet qui définit une demande de flux adressée aux serveurs publicitaires de Google. Il existe deux principaux types de requêtes de flux :

    • LiveStreamRequest : spécifie une clé d'élément, ainsi que d'autres paramètres facultatifs.
    • VODStreamRequest : spécifie un ID de source de contenu, un ID vidéo, ainsi que d'autres paramètres facultatifs.
    • Les deux types de requêtes peuvent éventuellement inclure une clé API nécessaire pour accéder aux flux spécifiés, ainsi qu'un code réseau Google Ad Manager pour que le SDK IMA gère les identifiants d'annonces comme spécifié dans les paramètres Google Ad Manager.

  • 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 transférant les événements de flux à l'éditeur.

Prérequis

Configurer les objets MediaInfo de l'expéditeur

Commencez par configurer l'objet MediaInfo de votre application émettrice 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 DAI StreamRequest échoue pour une raison quelconque
streamType Pour les diffusions en direct, cette valeur doit être définie sur "LIVE". Pour les flux de VOD, cette valeur 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é.
networkCode (Facultatif) Votre code de réseau Google Ad Manager.
ApiKey Clé API facultative qui peut être requise pour récupérer l'URL du flux à partir du SDK IMA DAI
senderCanSkip Valeur booléenne permettant d'indiquer au récepteur si l'appareil émetteur peut afficher un bouton "Ignorer", ce qui permet de prendre en charge les annonces désactivables.

Pour configurer ces valeurs dans l'outil de commande et de contrôle Cast, cliquez sur l'onglet Load Media (Charger un contenu multimé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": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "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",
      "networkCode": "21775744923",
      "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 de votre récepteur 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 script chargeant CAF. Le SDK CAF DAI est mis à jour automatiquement. 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 lecteur 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 CAF DAI.

<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 chargement

Le SDK CAF pour l'insertion dynamique d'annonce utilise l'intercepteur de messages de chargement CAF pour envoyer 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 du flux et le remplacement du 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 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.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      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 avec le SDK CAF DAI 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éceptrices.