Diese Seite wurde von der Cloud Translation API übersetzt.

Einführung in das IMA DAI SDK

Gewünschte Lösung für die dynamische Anzeigenbereitstellung auswählen

Dynamische Anzeigenbereitstellung mit Komplettservice

In dieser Anleitung wird gezeigt, wie Sie mit dem IMA CAF DAI SDK einen Stream für die dynamische Anzeigenbereitstellung wiedergeben. Wenn Sie sich eine abgeschlossene Beispielintegration ansehen oder daran teilnehmen möchten, laden Sie das Beispiel herunter.

Machen Sie sich vor der Verwendung dieser Anleitung mit dem Web Receiver-Protokoll des Chromecast Application Framework vertraut. In dieser Anleitung wird davon ausgegangen, dass Sie mit den Konzepten für CAF-Empfänger wie Nachrichtenabfangenden und mediaInformation-Objekten vertraut sind. Außerdem wird davon ausgegangen, dass Sie mit der Verwendung des Cast-Befehls- und Steuerelementtools zur Emulierung eines CAF-Senders vertraut sind.

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

Informationen zur Integration in andere 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, die in diesem Leitfaden erläutert werden:

StreamRequest: Ein Objekt, das eine Streamanfrage an die Werbeserver von Google definiert. Es gibt zwei Hauptkategorien für Streamanfragen:
- LiveStreamRequest: gibt einen Asset-Schlüssel und einen optionalen API-Schlüssel sowie weitere optionale Parameter an.
- VODStreamRequest: gibt eine Contentquellen-ID, eine Video-ID und einen optionalen API-Schlüssel sowie weitere optionale Parameter an.
StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK steuert, z. B. das Auslösen von Tracking-Pings und das Weiterleiten von Streamereignissen an den Publisher.

Voraussetzungen

Ein Cast Developer Console-Konto mit einem registrierten Testgerät.
Eine gehostete Webempfänger-App, die in Ihrer Cast Developer Console registriert ist und so geändert werden kann, dass sie den in dieser Anleitung bereitgestellten Code hostet.
Eine sendende App, die für die Verwendung Ihrer Webempfänger-App konfiguriert ist. In diesem Beispiel wird das Cast Command and Control Tool als Absender verwendet.

MediaInfo-Objekte des Absenders konfigurieren

Konfigurieren Sie zuerst das MediaInfo-Objekt der Absender-App so, dass es die folgenden Felder enthält:

`contentId`		Eine eindeutige Kennung für dieses Medienelement
`contentUrl`		Die Fallback-Stream-URL, die geladen werden soll, wenn die Streamanfrage für die dynamische Anzeigenbereitstellung fehlschlägt
`streamType`		Für Livestreams sollte dieser Wert auf „LIVE“ gesetzt werden. Bei VOD-Streams sollte dieser Wert auf „BUFFERED“ gesetzt werden.
`customData`	`assetKey`	Nur Livestreams Identifiziert den zu ladenden Livestream
	`contentSourceId`	Nur VOD-Streams Bestimmt den Medienfeed, der den angeforderten Stream enthält.
	`videoId`	Nur VOD-Streams Identifiziert den angeforderten Stream im angegebenen Medienfeed.
	`ApiKey`	Ein optionaler API-Schlüssel, der möglicherweise erforderlich ist, um die Stream-URL aus dem IMA DAI SDK abzurufen
	`senderCanSkip`	Ein boolescher Wert, der dem Empfänger mitteilt, ob auf dem sendenden Gerät eine Schaltfläche zum Überspringen eingeblendet werden kann. Dadurch werden überspringbare Anzeigen unterstützt.

Klicken Sie zum Konfigurieren dieser Werte im Cast-Befehls- und -Steuertool auf den Tab Medien laden und setzen Sie den benutzerdefinierten Anfragetyp auf LOAD. Ersetzen Sie dann die JSON-Daten im Textbereich durch eines der folgenden JSON-Objekte:

LIVESTREAMS

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

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

Einfachen CAF-Empfänger erstellen

Erstellen Sie gemäß dem CAF SDK Basic Receiver Guide einen einfachen Web Receiver.

Der Code des Empfängers sollte wie folgt 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 Skript-Tag hinzu, um das IMA DAI SDK für CAF in Ihren Webempfänger zu importieren, nachdem das Skript CAF geladen hat. Das CAF DAI SDK ist grundsätzlich gültig, sodass Sie keine bestimmte Version festlegen müssen. Speichern Sie dann im folgenden Skript-Tag den Empfängerkontext und den Player-Manager als Konstanten, bevor Sie den Empfänger starten.

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

Abfangende von Ladenachrichten erstellen

Das CAF DAI SDK verwendet den Nachrichtenabfanger beim Laden von CAF, um Streamanfragen zu senden und die Inhalts-URL durch den endgültigen Stream für die dynamische Anzeigenbereitstellung zu ersetzen. Das Abfangende von Nachrichten ruft streamManager.requestStream() auf, das das Festlegen von Werbeunterbrechungen, das Anfordern des Streams und das Ersetzen der vorhandenen contentURL verarbeitet.

Es kann nur einen Abfangende von Ladenachrichten geben. Wenn für Ihre Anwendung also der Abfangfunktion erforderlich ist, 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

Um die Integration der CAF-DAI abzuschließen, müssen Sie die Streamanfrage mit den Daten erstellen, die im mediaInfo-Objekt des Absenders 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.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 Streams für die dynamische Anzeigenbereitstellung mit dem CAF DAI SDK von Google anfordern und wiedergeben. Weitere Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Leitfäden. Sie können auch unsere Beispielanwendungen für Empfänger herunterladen.