Einführung in das IMA DAI SDK

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

<ph type="x-smartling-placeholder"></ph>

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 fertige Beispielintegration ansehen oder an der Beispiel herunterladen

Machen Sie sich mit Chromecast vertraut, Web Receiver-Protokoll des Application Frameworks. Dieses wird vorausgesetzt, dass Sie mit CAF-Empfängerkonzepten vertraut sind, z. B. Nachricht Interceptoren und mediaInformation sowie der Verwendung des Cast-Befehls und der Steuerung -Tool, um einen CAF-Sender zu emulieren.

Damit Sie die dynamische Anzeigenbereitstellung von IMA verwenden können, benötigen Sie ein Ad Manager-Konto 360-Konto zu verknüpfen. Wenn Sie eine Anzeige Verwaltungskonto, wenden Sie sich an Ihren Account Manager, um weitere Informationen zu erhalten. Weitere Informationen zur Anmeldung bei Ad Manager erhalten Sie in der Ad Manager-Hilfe .

Informationen zur Integration mit anderen Plattformen oder zur Verwendung des IMA clientseitige SDKs siehe 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 andere optionale Parameter.
    • VODStreamRequest: Gibt eine ID der Contentquelle, eine Video-ID und eine optionale API an key sowie weitere optionale Parameter enthalten.
  • StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und der dynamischen Anzeigenbereitstellung mit IMA SDK steuert SDK, um beispielsweise Tracking-Pings auszulösen und Streamereignisse an den Publisher.

Vorbereitung

  • Ein Konto für die Cast Developer Console mit einer registriertes Testgerät.
  • Gehosteter Webempfänger App, die die in Ihrer Cast Developer Console registriert sind und geändert werden können, Code aus diesem Leitfaden.
  • Eine sendende App, die für die Verwendung Ihrer Webempfänger-App konfiguriert ist. Dieses Beispiel verwendet das Cast-Befehl und -Steuerung als Absender.

MediaInfo-Objekte des Absenders konfigurieren

Konfigurieren Sie zunächst die MediaInfo Objekt enthalten ist folgenden Feldern hinzu:

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 für einen der Grund
streamType Bei Livestreams sollte dieser Wert auf „LIVE“ gesetzt werden. Bei VOD-Streams: Dieser Wert sollte auf „BUFFERED“ festgelegt werden
customData assetKey Nur Livestreams Identifiziert den zu ladenden Livestream
contentSourceId Nur VOD-Streams Bestimmt den Medien-Feed, der die Angeforderter Stream.
videoId Nur VOD-Streams Identifiziert den angeforderten Stream im Medien-Feed angegeben ist.
ApiKey Ein optionaler API-Schlüssel, der zum Abrufen der Stream-URL erforderlich sein kann IMA DAI SDK verwenden,
senderCanSkip Boolescher Wert, der dem Empfänger mitteilt, ob das sendende Gerät die Möglichkeit, eine Schaltfläche zum Überspringen anzuzeigen, sodass überspringbare Anzeigen unterstützt werden.

Klicken Sie zum Konfigurieren dieser Werte im Cast-Befehls- und Steuerungstool auf die Schaltfläche Laden Medien und legen Sie als benutzerdefinierten Anfragetyp LOAD fest. Ersetzen Sie dann JSON-Daten im Textbereich mit einem 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 Schritten.

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 CAF-Skript vom Script geladen wurde. Das CAF DAI SDK ist zeitlos. um eine bestimmte Version festzulegen. Speichern Sie dann im folgenden Skript-Tag Empfängerkontext und Spielermanager als Konstanten festlegen, bevor der Empfänger gestartet wird.

<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 des CAF DAI SDK Administrator.

<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 die CAF-Meldung Interceptor um Streamanfragen zu stellen und die Content-URL durch den finalen Stream für die dynamische Anzeigenbereitstellung zu ersetzen. Das Abfangende von Nachrichten ruft streamManager.requestStream() auf, mit dem Daten verarbeitet werden. das Festlegen von Werbeunterbrechungen, Anfordern des Streams und Ersetzen der contentURL

Es kann nur ein Abfangende von Ladenachrichten geben. Wenn Ihre App die Verwendung des Abfangendes müssen alle benutzerdefinierten Funktionen in das Callback des Nutzers an.

<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 dynamischen Anzeigenbereitstellung von CAF abzuschließen, müssen Sie einen Stream erstellen. Anfrage Dabei werden die Daten aus dem mediaInfo-Objekt des Absenders verwendet.

<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 oder Beispielempfänger herunterladen Apps.