Erste Schritte mit dem IMA SDK für die dynamische Anzeigenbereitstellung

Plattform auswählen: HTML5 Android iOS tvOS Cast Roku

Mit IMA SDKs lassen sich Multimedia-Anzeigen ganz einfach in Ihre Websites und Apps einbinden. Mit IMA SDKs können Anzeigen von jedem VAST-konformen 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 Live-Content. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie in Ihrer App nicht zwischen Anzeigen- und Inhaltsvideo wechseln müssen.

Wählen Sie die gewünschte DAI-Lösung aus:

VOD-Streams abspielen, die mit der Google Cloud Video Stitcher API registriert wurden

In diesem Leitfaden wird gezeigt, wie Sie mit dem IMA DAI SDK für HTML5 eine Google Cloud-VOD-Streamsitzung anfordern und abspielen.

In diesem Leitfaden wird das einfache Beispiel aus dem Startleitfaden für IMA DAI erweitert.

Informationen zur Integration mit anderen Plattformen oder zur Verwendung der clientseitigen IMA SDKs finden Sie unter Interactive Media Ads SDKs.

Wenn Sie sich eine vollständige Beispielintegration ansehen oder nachvollziehen 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

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

Standort
Die Google Cloud-Region, in der Ihre VOD-Konfiguration erstellt wurde: LOCATION
Projektnummer
Die Google Cloud-Projektnummer, die die Video Stitcher API verwendet: PROJECT_NUMBER
OAuth-Token

Ein kurzlebiges OAuth-Token eines Dienstkontos mit der Nutzerrolle „Video Stitcher“: 

OAUTH_TOKEN

Weitere Informationen zum Erstellen kurzlebiger OAuth-Tokens Das OAuth-Token kann für mehrere Anfragen wiederverwendet werden, solange es nicht abgelaufen ist.

Netzwerkcode

Der Ad Manager-Netzwerkcode für die Anzeigenanfrage: NETWORK_CODE

VOD-Konfigurations-ID

Die VOD-Konfigurations-ID für den VOD-Stream: VOD_CONFIG_ID

Weitere Informationen zum Erstellen der VOD-Konfigurations-ID finden Sie im Leitfaden zum Erstellen einer VOD-Konfiguration für Cloud Stitching.

Entwicklungsumgebung konfigurieren

In den IMA-Beispiel-Apps werden nur HLS-Streamanfragen demonstriert. Sie können beim Erstellen der VideoStitcherVodStreamRequest-Klasse weiterhin DASH-Streams verwenden. 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() weitergeben kann. Diese Funktion akzeptiert drei Parameter:

  1. type: Ein String, der für HLS-Streams auf 'ID3' und für DASH-Streams auf 'urn:google:dai:2018' festgelegt werden muss.

  2. data: Bei DASH-Ereignisnachrichten ist dies der String mit den Nachrichtendaten.

  3. timestamp: Eine Zahl, die die Startzeit der Ereignisnachricht für DASH-Streams angibt.

Senden Sie die Metadaten so schnell und so oft, wie es Ihre Player-Ereignisse zulassen. Wenn Metadaten fehlen oder nicht korrekt sind, werden vom IMA DAI SDK möglicherweise keine Anzeigenereignisse ausgelöst, was zu fehlerhaften Berichten über Anzeigenereignisse führt.

Laden Sie die IMA DAI-Beispiele für HTML5 herunter und extrahieren Sie die ZIP-Beispieldatei hls_js/simple in einen neuen Ordner. Dieses Beispiel ist eine Webanwendung, die Sie zu Testzwecken lokal hosten können.

Wenn Sie das Beispiel lokal hosten möchten, rufen Sie den neuen Ordner auf 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 einen beliebigen 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 ordnungsgemäß funktioniert, wird durch Klicken auf die Schaltfläche Wiedergabe im Videoplayer der Kurzfilm „Tears of Steel“ gestartet, wobei alle 30 Sekunden Werbeunterbrechungen eingeblendet werden.

VOD-Stream anfordern

Wenn Sie den Beispielstream durch Ihren VOD-Stream mit Anzeigen-Stitching ersetzen möchten, verwenden Sie die Klasse VideoStitcherVodStreamRequest, um automatisch eine Anzeigensitzung mit Google Ad Manager zu erstellen. In der Google Ad Manager-Benutzeroberfläche können Sie die generierten DAI-Sitzungen für das Monitoring und die Fehlerbehebung 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 VideoStitcherVodStreamRequest-Objekt zurückgibt.

Beispiel:

// StreamManager which will be used to request DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Aktualisieren Sie die Seite. Anschließend können Sie den benutzerdefinierten VOD-Stream anfordern und abspielen.

Optional: Optionen für die Streamingsitzung hinzufügen

Sie können Ihre Streamanfrage anpassen, indem Sie Sitzungsoptionen hinzufügen, um die Standardkonfiguration der Cloud Video Stitcher API mit VideoStitcherVodStreamRequest.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.

Sie können beispielsweise die Manifestoptionen mit dem folgenden Code-Snippet überschreiben, das zwei Stream-Manifeste mit Wiedergaben anfordert, die von der niedrigsten bis zur höchsten Bitrate sortiert sind.

...

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

streamManager.requestStream(streamRequest);

Bereinigen

Nachdem Sie einen VOD-Stream mit der Google Cloud Video Stitcher API gehostet und mit dem IMA DAI SDK für HTML5 angefordert haben, sollten Sie alle Bereitstellungsressourcen bereinigen.

Folgen Sie der Anleitung zum Bereinigen von VOD, um nicht benötigte 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.