Einführung in das IMA DAI SDK

Wählen Sie die gewünschte Lösung für die dynamische Anzeigenbereitstellung aus.

Dynamische Anzeigenbereitstellung mit Komplettservice

In diesem Leitfaden wird erläutert, wie Sie einen Stream für die dynamische Anzeigenbereitstellung mit dem IMA CAF DAI SDK wiedergeben. Wenn Sie sich eine fertige Beispielintegration ansehen oder mit ihr arbeiten möchten, laden Sie das Beispiel herunter.

Machen Sie sich vor der Verwendung dieser Anleitung mit dem Web Receiver-Protokoll von Chromecast Application Framework vertraut. In dieser Anleitung wird davon ausgegangen, dass Sie mit Konzepten von CAF-Empfängern (z. B. Nachrichtenabfangen und mediaInformation-Objekten) vertraut sind und mit dem Cast-Befehls- und Kontrolltool einen CAF-Absender emulieren.

Wenn Sie die dynamische Anzeigenbereitstellung 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, 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 DAI – Übersicht

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 Arten von 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, einen optionalen API-Schlüssel sowie weitere 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 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 der in dieser Anleitung bereitgestellte Code gehostet wird.
  • Eine Sende-App, die für die Verwendung Ihrer Webempfänger-App konfiguriert ist. In diesem Beispiel wird das Cast-Befehls- und Steuertool als Absender verwendet.

MediaInfo-Objekte des Absenders konfigurieren

Konfigurieren Sie zuerst das MediaInfo-Objekt Ihrer Senderanwendung so, dass es die folgenden Felder enthält:

contentId Eine eindeutige Kennung für dieses Medienelement
contentUrl Die Fallback-Stream-URL, die geladen wird, wenn die StreamRequest für die dynamische Anzeigenbereitstellung aus irgendeinem Grund fehlschlägt
streamType Bei Livestreams sollte dieser Wert auf „LIVE“ festgelegt werden, bei VOD-Streams auf „BUFFERED“.
customData assetKey Nur Livestreams. Kennzeichnet den zu ladenden Livestream
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 erforderlich sein kann, um die Stream-URL aus dem IMA DAI SDK abzurufen
senderCanSkip Ein boolescher Wert, mit dem der Empfänger darüber informiert wird, 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 Steuerungstool auf den Tab Load Media (Medien laden) und legen Sie den benutzerdefinierten Ladeanfragetyp 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": "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, sobald das Skript CAF geladen hat. Das CAF DAI SDK ist immer aktuell, es muss also keine bestimmte Version festgelegt werden. Speichern Sie dann im folgenden Skript-Tag den Empfängerkontext und den Spielermanager 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>

Abfangen von Nachrichten zum Laden erstellen

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

Es kann nur einen Abfang von Ladenachrichten geben. Wenn Ihre Anwendung also die Verwendung dieses Abfangens 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

Zum Abschließen der Einbindung der CAF-Anzeigenbereitstellung müssen Sie Ihre Streamanfrage mit den Daten erstellen, die vom Absender im Objekt mediaInfo 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. Wenn Sie mehr über erweiterte SDK-Funktionen erfahren möchten, sehen Sie sich die anderen Leitfäden an oder laden Sie unsere Beispiel-Empfängeranwendungen herunter.