Wenn Sie sich mit anderen Nutzern über unsere Produkte austauschen und Feedback geben möchten, treten Sie dem offiziellen Ad Manager-Discord-Kanal auf dem Server der Google Advertising and Measurement Community bei.

Diese Seite wurde von der Cloud Translation API übersetzt.

IMA SDK für die dynamische Anzeigenbereitstellung einrichten

Mit den IMA SDKs lassen sich Multimedia-Anzeigen ganz einfach in Ihre Websites und Apps einbinden. Mit IMA SDKs können Anzeigen von jedem VAST-kompatiblen Ad-Server angefordert und die Anzeigenwiedergabe in Ihren Apps verwaltet werden. Mit IMA DAI SDKs senden Apps eine Streamanfrage für Anzeigen- und Contentvideos – entweder VOD- oder Liveinhalte. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie das Umschalten zwischen Anzeigen- und Inhaltsvideo in Ihrer App nicht verwalten müssen.

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

Mit der Google Cloud Video Stitcher API registrierte Livestreams abspielen

In diesem Leitfaden wird gezeigt, wie Sie das IMA DAI SDK für HTML5 verwenden, um einen Livestream für ein Ereignis anzufordern und abzuspielen, das mit der Google Cloud Video Stitcher API registriert wurde, und wie Sie während der Wiedergabe eine Werbeunterbrechung einfügen.

In diesem Leitfaden wird das grundlegende Beispiel aus dem Leitfaden „Erste Schritte“ für IMA DAI erweitert.

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

Wenn Sie sich eine abgeschlossene Beispielintegration ansehen oder ihr folgen möchten, laden Sie das Cloud Video Stitcher-Beispiel für HLS oder DASH herunter.

Google Cloud-Projekt einrichten

Google Cloud-Projekt einrichten und Dienstkonten für den Zugriff auf das Projekt konfigurieren

Konfiguration für einen Livestreamtermin erstellen – entweder mit einem eigenen Content-Livestream oder einem Test-Livestream. In dieser Anleitung wird von einem HLS-Stream ausgegangen.

Geben Sie die folgenden Variablen für die Verwendung im IMA SDK ein:

Standort

Die Google Cloud-Region, in der Ihre Live-Konfiguration erstellt wurde: LOCATION

Projektnummer

Die Google Cloud-Projektnummer für die Video Stitcher API: PROJECT_NUMBER

OAuth-Token

Das kurzlebige OAuth-Token eines Dienstkontos mit der Nutzerrolle „Video Stitcher“:

OAUTH_TOKEN

Weitere Informationen zum Erstellen von kurzlebigen Anmeldedaten für Dienstkonten Das OAuth-Token kann für mehrere Anfragen wiederverwendet werden, solange es nicht abgelaufen ist.

Netzwerkcode

Der Ad Manager-Netzwerkcode zum Anfordern von Anzeigen: NETWORK_CODE

Live-Konfigurations-ID: Die Live-Konfigurations-ID, die Sie beim Erstellen Ihres Livestream-Ereignisses angegeben haben: LIVE_CONFIG_ID
Benutzerdefinierter Asset-Schlüssel: Der benutzerdefinierte Ad Manager-Assetschlüssel, der beim Erstellen einer Konfiguration für ein Livestream-Event mit der Video Stitcher API generiert wird: CUSTOM_ASSET_KEY

Entwicklungsumgebung konfigurieren

In den IMA-Beispiel-Apps werden nur HLS-Streamanfragen veranschaulicht. Sie können weiterhin DASH-Streams verwenden, wenn Sie die VideoStitcherLiveStreamRequest-Klasse erstellen. Wenn Sie Ihren DASH-kompatiblen Player einrichten, müssen Sie einen Listener für die Fortschrittsereignisse Ihres Videoplayers einrichten, der die Metadaten des Videos an StreamManager.processMetadata() übergeben kann. Diese Funktion verwendet drei Parameter:

type: Ein String, der für HLS-Streams auf 'ID3' und für DASH-Streams auf 'urn:google:dai:2018' festgelegt werden muss.
data: Bei DASH-Ereignisnachrichten ist dies der Nachrichtendatenstring.
timestamp: Eine Zahl, die die Startzeit der Ereignismeldung für DASH-Streams angibt.

Senden Sie die Metadaten so schnell und so oft wie möglich, sobald sie durch Ihre Player-Ereignisse bereitgestellt werden können. Wenn Metadaten fehlen oder nicht korrekt sind, werden mit dem IMA DAI SDK möglicherweise keine Anzeigenereignisse ausgelöst, was zu falsch gemeldeten Anzeigenereignissen führt.

Laden Sie die IMA DAI-Beispiele für HTML5 herunter und extrahieren Sie das HLS.js-Beispiel in einen neuen Ordner. Dieses Beispiel ist eine Web-App, die Sie zu Testzwecken lokal hosten können.

Wenn Sie das Beispiel lokal hosten möchten, wechseln Sie zum neuen Ordner und führen Sie den folgenden Python-Befehl aus, um einen Webserver zu starten:

python3 -m http.server 8000

http.server ist nur in Python 3.x verfügbar. Sie können auch einen anderen Webserver verwenden, z. B. den Apache HTTP Server oder Node JS.

Öffnen Sie einen Webbrowser und rufen Sie localhost:8000 auf, um einen Videoplayer zu sehen. Ihr Browser muss die HLS.js-Bibliothek unterstützen.

Wenn alles richtig funktioniert, wird nach einem kurzen Werbespot der Kurzfilm „Tears of Steel“ abgespielt, wenn Sie im Videoplayer auf die Schaltfläche Wiedergabe klicken. Dieser Content wird über einen Video-on-Demand-Stream (VOD) bereitgestellt.

Livestream anfordern

Wenn Sie den Beispiel-VOD-Stream durch Ihren Livestream ersetzen möchten, verwenden Sie die Klasse VideoStitcherLiveStreamRequest, mit der automatisch eine Anzeigensitzung mit Google Ad Manager erstellt wird. Sie können die Google Ad Manager-Benutzeroberfläche verwenden, um die generierten DAI-Sitzungen für Monitoring und Fehlerbehebung zu finden.

Im vorhandenen Beispiel gibt es Funktionen zum Anfordern eines VOD-Streams oder eines Livestreams. Damit die Funktion mit der Google Cloud Video Stitcher API funktioniert, müssen Sie eine neue Funktion hinzufügen, die ein VideoStitcherLiveStreamRequest-Objekt zurückgibt.

Beispiel:

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Wenn sich die Livestream-Dateien für lokale Tests in einem Cloud Storage-Bucket befinden, müssen Sie CORS für den Ursprung http://localhost:8000 aktivieren.

Aktualisieren Sie die Seite. Anschließend kannst du benutzerdefinierte Livestreams anfordern und abspielen.

(Optional) Optionen für die Streaming-Sitzung hinzufügen

Sie können Ihre Streamanfrage anpassen, indem Sie Sitzungsoptionen hinzufügen, um die Standardkonfiguration der Cloud Video Stitcher API mit VideoStitcherLiveStreamRequest.videoStitcherSessionOptions zu überschreiben. Wenn Sie eine nicht erkannte Option angeben, antwortet die Cloud Video Stitcher API mit einem HTTP-400-Fehler. Weitere Informationen finden Sie im Leitfaden zur Fehlerbehebung.

Mit dem folgenden Code-Snippet können Sie beispielsweise die Manifestoptionen überschreiben. Damit werden zwei Streammanifeste mit Darstellungen angefordert, die nach Bitrate sortiert sind (von der niedrigsten zur höchsten).

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Werbeunterbrechung einfügen

Mit der Google Cloud Video Stitcher API werden Anzeigen, die aus dem Anzeigentag abgerufen werden, in jede Werbeunterbrechung eingefügt. Werbeunterbrechungen werden im Manifest mit Werbemarkierungen gekennzeichnet. Anzeigenmarkierungen werden vom Livestream-Encoder eingefügt.

Wenn Sie Ihren eigenen Livestream verwenden, müssen Sie die Anzeigenmarkierung einfügen. Weitere Informationen zu den unterstützten HLS- und DASH-Anzeigenmarkierungen finden Sie in der Dokumentation zu Anzeigenmarkierungen.
Wenn du einen Livestream mit der Google Cloud Livestream API erstellt hast, füge ein Channel-Event für eine Werbeunterbrechung ein.

Die Anzeige wird direkt nach dem Einfügen der Werbeunterbrechung abgespielt.

Bereinigen

Nachdem Sie einen Livestream mit der Google Cloud Video Stitcher API gehostet und ihn mit dem IMA DAI SDK für HTML5 angefordert haben, ist es wichtig, alle Bereitstellungsressourcen zu bereinigen.

Folge der Anleitung zum Bereinigen von Livestreams, um unnötige Ressourcen und Assets zu entfernen.

Verwenden Sie schließlich im Terminalfenster, in dem Sie den Python 3-Webserver gestartet haben, den Befehl ctrl+C, um den lokalen Server zu beenden.