Diese Seite wurde von der Cloud Translation API übersetzt.

Einführung in das IMA DAI SDK

Wählen Sie die gewünschte dynamische Anzeigenbereitstellungslösung aus.

Vollständige dynamische Anzeigenbereitstellung

In dieser Anleitung wird gezeigt, wie du einen DAI-Stream mit dem IMA CAF DAI SDK abspielst. Wenn Sie sich eine fertige Beispielintegration ansehen oder anhand dieser Schritt für Schritt vorgehen möchten, laden Sie das Beispiel herunter.

Bevor du diesen Leitfaden verwendest, solltest du dich mit dem Web-Empfängerprotokoll des Chromecast Application Framework vertraut machen. In diesem Leitfaden wird davon ausgegangen, dass du mit CAF-Empfängerkonzepten wie Nachrichten-Interceptors und mediaInformation-Objekten vertraut bist und das Cast Command and Control-Tool zur Emulierung eines CAF-Senders verwenden kannst.

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

Informationen zur Einbindung in andere Plattformen oder zur Verwendung der clientseitigen IMA SDKs finden Sie unter Interactive Media Ads SDKs.

CAF-dynamische Anzeigenbereitstellung – Übersicht

Die Implementierung der dynamischen Anzeigenbereitstellung mit dem IMA CAF DAI SDK umfasst zwei Hauptkomponenten, wie in dieser Anleitung 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 und einen optionalen API-Schlüssel sowie andere optionale Parameter an.
- VODStreamRequest: Gibt eine Inhaltsquellen-ID, eine Video-ID und einen optionalen API-Schlüssel sowie andere optionale Parameter an.
StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK verwaltet, 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 der in diesem Leitfaden bereitgestellte Code gehostet wird.
Eine Sende-App, die für die Verwendung deiner Web-Empfänger-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 dieses Medienelement
`contentUrl`		Die URL des Fallback-Streams, die geladen werden soll, wenn die DAI-Streamanfrage aus irgendeinem Grund fehlschlägt
`streamType`		Für Livestreams sollte dieser Wert auf „LIVE“ gesetzt werden. Bei VOD-Streams sollte er 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 Gibt den angeforderten Stream im angegebenen Medienfeed an.
	`ApiKey`	Optionaler API-Schlüssel, der zum Abrufen der Stream-URL aus dem IMA DAI SDK erforderlich sein kann
	`senderCanSkip`	Ein boolescher Wert, der dem Empfänger mitteilt, ob das sendende Gerät eine Schaltfläche zum Überspringen anzeigen kann, wodurch überspringbare Anzeigen unterstützt werden.

Wenn du diese Werte im Steuertool für die Übertragung konfigurieren möchtest, klicke auf den Tab Medien laden und setze den Typ der benutzerdefinierten Ladeanfrage auf LOAD. Ersetzen Sie dann die JSON-Daten im Textfeld 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": "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

Erstelle gemäß der Anleitung für einen einfachen CAF SDK-Empfänger einen einfachen Webempfänger.

Der Code deines 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üge ein Script-Tag hinzu, um das IMA DAI SDK für CAF in deinen Webreceiver zu importieren, kurz nachdem das Script CAF geladen hat. Das CAF DAI SDK ist immer aktuell. Es ist daher nicht erforderlich, eine bestimmte Version festzulegen. Speichere dann im folgenden Script-Tag den Receiver-Kontext und den Player-Manager als Konstanten, bevor du den Receiver 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

Initialisiere den StreamManager des CAF DAI SDKs.

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

Ladenachrichten-Abfangmechanismus erstellen

Das CAF DAI SDK verwendet den CAF-Nachrichten-Abfangmechanismus, um Streamanfragen zu stellen und die Inhalts-URL durch den endgültigen DAI-Stream zu ersetzen. Der Nachrichten-Abfangmechanismus ruft streamManager.requestStream() auf, um Werbeunterbrechungen festzulegen, den Stream anzufordern und die vorhandene contentURL zu ersetzen.

Es kann nur einen Load-Message-Interceptor geben. Wenn Ihre App 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

Um die CAF-DAI-Integration abzuschließen, müssen Sie Ihre 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>

Du kannst jetzt DAI-Streams mit dem CAF DAI SDK von Google anfordern und wiedergeben. Weitere Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Anleitungen oder laden Sie unsere Beispiel-Empfängeranwendungen herunter.