Mit Full-Service-DAI einrichten

Plattform auswählen: HTML5 Android iOS tvOS Cast Roku

In diesem Leitfaden wird gezeigt, wie Sie einen DAI-Stream mit dem IMA CAF DAI SDK abspielen. Wenn Sie sich eine fertige Beispielintegration ansehen oder sie nachvollziehen möchten, laden Sie das Beispiel herunter.

Bevor du diesen Leitfaden verwendest, solltest du dich mit dem Web Receiver-Protokoll des Chromecast Application Framework vertraut machen. In diesem Leitfaden werden grundlegende Kenntnisse der CAF-Empfängerkonzepte wie Nachrichten-Interceptors und mediaInformation-Objekte sowie Kenntnisse der Verwendung des Cast Command and Control-Tools zur Emulation eines CAF-Senders vorausgesetzt.

Wenn Sie IMA DAI verwenden möchten, benötigen Sie ein Ad Manager 360-Konto. Wenn Sie ein Ad Manager-Konto haben, wenden Sie sich an Ihren Account Manager, um weitere Informationen zu erhalten. Informationen zur Registrierung für Ad Manager finden Sie in der Ad Manager-Hilfe.

Informationen zur Integration mit anderen Plattformen oder zur Verwendung der clientseitigen IMA SDKs finden Sie unter Interactive Media Ads SDKs.

CAF-DAI – Übersicht

Die Implementierung der dynamischen Anzeigenbereitstellung mit dem IMA CAF DAI SDK umfasst zwei Hauptkomponenten, wie in diesem Leitfaden gezeigt:

  • StreamRequest: Ein Objekt, das eine Streamanfrage an die Werbeserver von Google definiert. Es gibt zwei Haupttypen von Streamanfragen:

    • LiveStreamRequest: Gibt einen Asset-Schlüssel sowie andere optionale Parameter an.
    • VODStreamRequest: Gibt eine Contentquellen-ID, eine Video-ID sowie andere optionale Parameter an.
    • Beide Anfragetypen können optional einen API-Schlüssel enthalten, der für den Zugriff auf bestimmte Streams erforderlich ist, sowie einen Google Ad Manager-Netzwerkcode, damit das IMA SDK Anzeigenkennungen gemäß den Google Ad Manager-Einstellungen verarbeiten kann.

  • StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK verarbeitet, z. B. das Auslösen von Tracking-Pings und das Weiterleiten von Stream-Ereignissen an den Publisher.

Vorbereitung

  • Ein Cast Developer Console-Konto mit einem registrierten Testgerät.
  • Eine gehostete Web-Empfänger-App, die in deiner Cast Developer Console registriert ist und so geändert werden kann, dass sie den in diesem Leitfaden bereitgestellten Code hostet.
  • Eine Sender-App, die für die Verwendung deiner Web-Receiver-App konfiguriert ist. In diesem Beispiel wird das Cast Command and Control-Tool als Sender verwendet.

MediaInfo-Objekte des Senders konfigurieren

Konfiguriere zuerst das MediaInfo-Objekt deiner Sender-App so, dass es die folgenden Felder enthält:

contentId Eine eindeutige Kennung für diese Mediendatei
contentUrl Die Fallback-Stream-URL, die geladen werden soll, wenn der DAI-StreamRequest aus irgendeinem Grund fehlschlägt
streamType Bei Livestreams sollte dieser Wert auf „LIVE“ gesetzt werden. Bei VOD-Streams sollte dieser Wert auf „BUFFERED“ gesetzt werden.
customData assetKey Nur Livestreams Gibt den zu ladenden Livestream an
contentSourceId Nur VOD-Streams. Gibt den Medienfeed an, der den angeforderten Stream enthält.
videoId Nur VOD-Streams. Identifiziert den angeforderten Stream im angegebenen Medienfeed.
networkCode (Optional) Ihren Google Ad Manager-Netzwerkcode.
ApiKey Ein optionaler API-Schlüssel, der erforderlich sein kann, um die Stream-URL vom IMA DAI SDK abzurufen
senderCanSkip Ein boolescher Wert, der dem Empfänger mitteilt, ob das sendende Gerät eine Schaltfläche zum Überspringen anzeigen kann, um überspringbare Anzeigen zu unterstützen.

Wenn du diese Werte im Cast Command and Control Tool konfigurieren möchtest, klicke auf den Tab Load Media und lege den benutzerdefinierten Ladetyp auf LOAD fest. Ersetzen Sie dann die JSON-Daten im Textbereich durch eines der folgenden JSON-Objekte:

LIVE

{
  "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"
}

Dieses benutzerdefinierte Ladeanfrageobjekt kann an den Empfänger gesendet werden, um die folgenden Schritte zu testen.

Einfachen CAF-Empfänger erstellen

Erstelle einen einfachen Web-Receiver gemäß der Anleitung für CAF SDK Basic Receiver.

Der Code des Empfängers sollte so aussehen:

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

IMA DAI SDK importieren und Player Manager abrufen

Fügen Sie ein Script-Tag hinzu, um das IMA DAI SDK für CAF in Ihren Web-Empfänger zu importieren, und zwar direkt nach dem Script, das CAF lädt. Das CAF DAI SDK ist immer auf dem neuesten Stand, sodass keine bestimmte Version festgelegt werden muss. Speichere dann im folgenden Skript-Tag den Empfängerkontext und den Player-Manager als Konstanten, bevor du den Empfänger startest.

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

IMA Stream Manager initialisieren

Initialisieren Sie den Stream Manager des CAF DAI SDK.

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

Load-Nachrichten-Interceptor erstellen

Das CAF DAI SDK verwendet den Nachrichten-Interceptor für das Laden von CAF, um Streamanfragen zu stellen und die Content-URL durch den endgültigen DAI-Stream zu ersetzen. Der Nachrichten-Interceptor ruft streamManager.requestStream() auf. Dadurch werden Werbeunterbrechungen festgelegt, der Stream angefordert und das vorhandene contentURL ersetzt.

Es kann nur einen Interceptor für Ladenachrichten geben. Wenn Ihre App also den Interceptor benötigt, müssen Sie alle benutzerdefinierten Funktionen in denselben Callback einbinden.

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

Streamanfrage erstellen

Wenn Sie die CAF-DAI-Integration abschließen möchten, müssen Sie Ihre Streamanfrage mit den Daten erstellen, die im mediaInfo-Objekt des Senders enthalten waren.

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

Sie können jetzt mit dem CAF DAI SDK von Google DAI-Streams anfordern und wiedergeben. Weitere Informationen zu erweiterten SDK-Funktionen findest du in den anderen Leitfäden oder in unseren Beispiel-Empfänger-Apps.