IMA SDK für die dynamische Anzeigenbereitstellung einrichten

Wählen Sie die DAI-Lösung aus, die Sie interessiert

Komplettservice für die dynamische Anzeigenbereitstellung

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

Bevor Sie diese Anleitung verwenden, sollten Sie sich mit dem Web Receiver-Protokoll des Chromecast Application Framework vertraut machen. In dieser Anleitung wird davon ausgegangen, dass Sie mit den CAF-Receiver-Konzepten wie Nachrichten-Interceptoren und mediaInformation-Objekten sowie mit der Verwendung des Cast Command and Control-Tools zum Emulieren eines CAF-Senders vertraut sind.

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 in andere Plattformen oder zur Verwendung der clientseitigen IMA-SDKs finden Sie unter Interactive Media Ads SDKs.

CAF – Übersicht über die dynamische Anzeigenbereitstellung

Die Implementierung der dynamischen Anzeigenbereitstellung mit dem IMA CAF DAI SDK umfasst zwei Hauptkomponenten, wie in dieser Anleitung beschrieben:

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 ID der Contentquelle, 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 Anzeigen-IDs gemäß den Google Ad Manager-Einstellungen verarbeiten kann.
StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK übernimmt, z. B. das Senden von Tracking-Pings und das Weiterleiten von Streamereignissen an den Publisher.

Vorbereitung

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

MediaInfo-Objekte des Absenders 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 Fallback-Stream-URL, die geladen werden soll, wenn die DAI-StreamRequest aus einem beliebigen Grund fehlschlägt
`streamType`		Bei 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 Media-Feed an, der den angeforderten Stream enthält.
	`videoId`	Nur VOD-Streams. Gibt den angeforderten Stream im angegebenen Media-Feed an.
	`networkCode`	Optional: Ihr Google Ad Manager-Netzwerkcode.
	`ApiKey`	Ein optionaler API-Schlüssel, der erforderlich sein kann, 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 angezeigt werden kann, um überspringbare Anzeigen zu unterstützen.

Wenn Sie diese Werte im Cast-Befehls- und Steuerungstool konfigurieren möchten, klicken Sie auf den Tab Load Media (Media laden) und legen Sie den benutzerdefinierten Typ der Ladeanfrage 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 Objekt für die Ladeanfrage kann an den Empfänger gesendet werden, um die folgenden Schritte zu testen.

Einfachen CAF-Receiver erstellen

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

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 Ihrem Web-Receiver ein Script-Tag hinzu, um das IMA DAI SDK für CAF zu importieren. Das Tag muss direkt nach dem Script zum Laden von CAF eingefügt werden. Das CAF DAI SDK ist immer aktuell. Sie müssen also keine bestimmte Version festlegen. Speichern Sie dann im folgenden Script-Tag den Receiver-Kontext und den Player-Manager als Konstanten, bevor Sie den Receiver 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 StreamManager 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-Message-Interceptor erstellen

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

Es kann nur einen Load-Message-Interceptor geben. Wenn Ihre App also die Verwendung des Interceptors erfordert, 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.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 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-Receiver-Apps herunter.