IMA SDK für die dynamische Anzeigenbereitstellung einrichten

Plattform auswählen:HTML5 Android iOS tvOS Cast Roku

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

Komplettservice für die dynamische Anzeigenbereitstellung

In dieser Anleitung wird gezeigt, wie Sie einen DAI-Stream mit dem IMA CAF DAI SDK abspielen. Wenn Sie sich eine vollständige Beispielintegration ansehen oder sie nachvollziehen 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 werden grundlegende Kenntnisse der CAF-Receiver-Konzepte wie Nachrichten-Interceptoren und mediaInformation-Objekte sowie die Verwendung des Cast Command and Control-Tools zum Emulieren 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. 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 diesem Leitfaden 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, damit es die folgenden Felder enthält:

contentId Eine eindeutige Kennung für dieses Media-Element
contentUrl Die Fallback-Stream-URL, die geladen werden soll, wenn die DAI-StreamRequest aus irgendeinem Grund fehlschlägt
streamType Bei Livestreams sollte dieser Wert auf „LIVE“ festgelegt werden. Bei VOD-Streams sollte dieser Wert auf „BUFFERED“ festgelegt werden.
customData assetKey Nur Livestreams Gibt den zu ladenden Livestream an
contentSourceId Nur VOD-Streams. Gibt den Mediafeed 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 zum Abrufen der Stream-URL aus dem IMA DAI SDK erforderlich sein kann
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 ein Script-Tag ein, um das IMA DAI SDK für CAF in Ihren Web-Receiver zu importieren. Das Script-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-Nachrichten-Interceptor, um Streamanfragen zu stellen und die Content-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 Ihren Stream-Request mit den Daten erstellen, die im mediaInfo-Objekt des Absenders enthalten sind.

<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 Beispielanwendungen für Receiver herunter.