Client-seitige Anzeigen mit den nativen SDKs implementieren

In diesem Thema erfahren Sie, wie Sie client-seitige Anzeigen mit den Brightcove Native SDKs wiedergeben können.

Überblick

Clientseitige Anzeigen beinhalten das Senden einer Anfrage an den Anzeigenserver vom Clientgerät. Dies kann beim Abrufen des Anzeigenvideos eine gewisse Pufferzeit verursachen. Für ein fernsehähnlicheres Erlebnis können Sie serverseitige Anzeigenschaltung.

Bei clientseitigen Anzeigen wird das Content-Video abgespielt, bis entweder ein Anzeigen-Cue-Point erkannt oder ein Anzeigentiming von der VMAP-Antwort erreicht wird. Es wird eine Anfrage an den konfigurierten Ad-Server gestellt, der mit Anzeigendetails antwortet. Der Player startet dann die Wiedergabe der angeforderten Anzeige.

Die Brightcove Native SDKs bieten Plug-ins für die folgenden Technologien:

Die nativen SDKs unterstützen die VMAP, die bei der Verwendung von Google Ad Manager und DoubleClick for Publishers (DFP), dem Google AdSense-Netzwerk, generiert wird.

Arten von Anzeigen

Es gibt drei Haupttypen von Anzeigen, die Sie mit Videos verwenden können:

Lineare Anzeigen - Anzeigen, die das Haupt-Content-Video pausieren und im Vollbild des Players angezeigt werden

Nicht-lineare Anzeigen - Overlay-Anzeigen, die über dem Haupt-Content-Video angezeigt werden. Dies können Text, grafische Bilder oder sogar Video-Overlays sein.

Companion-Anzeigen - Anzeigen außerhalb des Videoplayers

Anzeigenstandards

Standard-XML-Dateien können verwendet werden, um dem Player mitzuteilen, wann er Ihre Anzeigen abspielen soll und welche Anzeigen er abspielen soll. Die Interaktives Werbebüro (IAB) hat die folgenden gemeinsamen Schnittstellen zwischen Videoplayern und Anzeigenblöcken entwickelt:

Vorlage für die Bereitstellung von Videoanzeigen (VAST) - Ein universelles XML-Schema zum Liefern von Anzeigen an digitale Videoplayer. Diese Datei gibt an, welche Anzeigen angezeigt werden sollen.

Video-Playlist mit mehreren Anzeigen (VMAP) - Diese Datei beschreibt eine Playlist mit VAST-Anzeigen, einschließlich Pre-Roll-, Mid-Roll-, Post-Roll- und nicht-linearen Anzeigen. Hier können Sie festlegen, wann Werbeunterbrechungen auftreten und welche Anzeigen während jeder Unterbrechung abgespielt werden.

Definition der Videoplayer-Ad-Serving-Schnittstelle (VPAID) - Richtet eine gemeinsame Schnittstelle für die Bereitstellung interaktiver Anzeigenerlebnisse ein.

Wenn Sie noch nicht mit den Werbebedingungen vertraut sind, lesen Sie zunächst die Lernleitfaden für Videowerbung.

Spielen Sie Anzeigen über Ihre App ab

Gehen Sie wie folgt vor, um clientseitige Anzeigen abzuspielen:

  1. Anzeigen-Tags definieren
  2. Anzeigen-Tags überprüfen
  3. Cue-Punkte erstellen

  4. Erstellen Sie Ihre App

Anzeigen-Tags definieren

Das Anzeigen-Tag definiert die Anzeige, die abgerufen und wiedergegeben wird. Sie können eines der folgenden Formate verwenden:

Anzeigen-Tags überprüfen

Es empfiehlt sich, zu überprüfen, ob Ihre Anzeigen-Tags gültig sind und wie erwartet funktionieren. Dies hilft beim Debuggen anderer Probleme während des Implementierungsprozesses.

Google bietet a Video Suite-Inspektor damit Sie Ihre Anzeigen-Tags überprüfen können.

FreeWheel bietet eine Anzeigenvorschau um die Ad-Server-Antwort zu überprüfen.

Cue-Punkte erstellen

Wenn Sie ein VMAP-Anzeigen-Tag verwenden, können Sie diesen Schritt überspringen. Die VMAP definiert eine Playlist für Ihre Anzeigen und gibt an, wann sie abgespielt werden. Beachten Sie, dass IMA-Anzeigenregeln von Google verwendet VMAP.

Wenn Sie VAST-Anzeigen-Tags verwenden, müssen Sie Cue-Points erstellen, um dem Player mitzuteilen, wann er Anzeigen einfügen soll. Diese müssen Sie in Ihrer App erstellen. Hier sind einige Beispiele, wie das geht:

Android

iOS

Android-Implementierung

Das Native SDK für Android unterstützt VMAP, VAST, serverseitige Anzeigenregeln und Companion-Anzeigen mit den folgenden Technologien:

Google IMA

Führen Sie diese Schritte aus, um die Google IMA-Anzeigenregeln zu verwenden:

  1. Suchen und überprüfen Sie die Anzeigenregeln IMA Beispiel-App.
  2. Öffne das MainActivity.java Datei.

  3. Passen Sie das Projekt mit Ihren Werten an. Die folgenden Werte sind erforderlich, um Inhalte aus Ihrer Video Cloud-Bibliothek abzurufen:

    • Richtlinienschlüssel für die Wiedergabe-API
    • Konto-ID
    • Video-ID

  4. Geben Sie Werte ein, um auf Ihre IMA-Anzeigen zuzugreifen:

    • Anzeigenregel-URL
  5. Die setupGoogleIMA() -Methode stellt eine Verbindung mit dem Brightcove IMA-Plug-in her.
  6. Hören Sie auf die GoogleIMAEventType.ADS_REQUEST_FOR_VIDEO Veranstaltung. Hier erstellen Sie ein Anzeigenanforderungsobjekt und verweisen auf Ihre Anzeigen-Tag-URL. In diesem Fall handelt es sich um eine VMAP-Datei für Anzeigenregeln.
  7. Die setupAdMarkers() Methode ist optional. Diese Methode ruft den IMA-AdManager auf und erstellt Anzeigenmarkierungen in der Suchleiste, damit Nutzer visuell sehen können, wann Anzeigen abgespielt werden.

Suche ohne Werbung

Wenn Sie die Anzeigenwiedergabe deaktivieren möchten, während der Nutzer das Video durchsucht, lesen Sie die Suche ohne Werbung Code-Auszug.

Codebeispiele

Hier sind vollständige Codebeispiele:

  • Grundlegender IMA Vast-Player: Um VAST-Tags zu verwenden, sollte Ihre App eine Reihe von Cue-Points aus den Video Objektmetadaten, die vom Playback API-Aufruf zurückgegeben werden. Die Metadaten enthalten die Anzeigen-Cue-Points, die Sie in Video Cloud Studio erstellt haben.

  • IMA-Anzeigenregeln IMA-Player: Alternativ kann Ihre App eine Reihe von Cue-Point-Objekten im Player erstellen Activity Klasse.

  • Anzeigenregeln IMA Widevine Modular: Kombinieren Sie clientseitige Anzeigen mit Inhaltsschutz.

FreeWheel

Für diese Anzeigen müssen Sie die FreeWheel AdManager-Bibliothek erwerben.

Befolgen Sie diese Schritte, um FreeWheel-Anzeigen zu verwenden:

  1. Kontakt FreeWheel um ihr AdManager.aar-Bibliotheksarchiv zu erwerben und es in Ihrem libs/-Verzeichnis zu installieren, das sich normalerweise im Stammverzeichnis Ihres /home/-Verzeichnisses befindet. Das native SDK für Android und die FreeWheel-Beispiel-Apps erfordern die FreeWheel AdManager-Bibliothek, Version 6.28.0.
  2. Suchen und überprüfen Sie die FreeWheel Beispiel-App.
  3. Öffne das MainActivity.java Datei.
  4. Passen Sie das Projekt mit Ihren Werten an. In diesem Beispiel wird ein Remote-Video-Asset verwendet.

  5. Geben Sie Werte ein, um auf Ihre FreeWheel-Anzeigen zuzugreifen:

    • Anzeigen-URL
    • Werbenetzwerk-ID
    • Anzeigenprofil
  6. Die setupFreeWheel() -Methode stellt eine Verbindung mit dem Brightcove FreeWheel-Plug-in her.
  7. Konfigurieren Sie den FreeWheel-Controller so, dass er auf Ihre Anzeigen-URL verweist. freeWheelController.setAdURL("http://demo.v.fwmrm.net/");
  8. Dies wird später verwendet, um das FreeWheel zu instanziieren AdRequestConfiguration Klasse.
  9. Hören Sie auf die FreeWheelEventType.WILL_SUBMIT_AD_REQUEST Veranstaltung. Hier erhalten Sie den FreeWheel-Controller und richten die Pre-Roll-, Mid-Roll-, Post-Roll- und Overlay-Anzeigenflächen ein.

Suche ohne Werbung

Wenn Sie die Anzeigenwiedergabe deaktivieren möchten, während der Nutzer das Video durchsucht, lesen Sie die Suche ohne Werbung Code-Auszug.

Codebeispiele

Hier sind vollständige Codebeispiele:

iOS-Implementierung

Das native SDK für iOS unterstützt VMAP, VAST, serverseitige Anzeigenregeln und Companion-Anzeigen mit den folgenden Technologien:

Google IMA

Einzelheiten zu Installation, Schnellstart und Verwendung finden Sie im IMA-Plug-in für Brightcove Player SDK für iOS Hinweis.

Führen Sie diese Schritte aus, um Google IMA-Anzeigen zu verwenden:

  1. Suchen und überprüfen Sie die Einfacher IMA-Player Beispiel-App.
  2. Öffne das ViewController Datei.

  3. Passen Sie das Projekt mit Ihren Werten an. Die folgenden Werte sind erforderlich, um Inhalte aus Ihrer Video Cloud-Bibliothek abzurufen:

    • Richtlinienschlüssel für die Wiedergabe-API
    • Konto-ID
    • Video-ID

  4. Geben Sie Werte ein, um auf Ihre IMA-Anzeigen zuzugreifen:

    • Publisher-ID
    • Sprache
    • Anzeigen-Tag-URL
  5. Erstellen Sie die playbackController mit den entsprechenden IMA-Einstellungen, einschließlich der Richtlinien für Anzeigenanfragen (VAST, VMAP oder serverseitige Anzeigenregeln).
  6. Anzeigenereignisse werden vom BCOVIMA-Plug-in über Lebenszyklusereignisse ausgegeben. Diese Ereignisse sind definiert in BCOVIMAKomponente.h Datei.
  7. Die Beispiel-App enthält Funktionen zum Ausblenden der Player-Steuerelemente während der Wiedergabe von Anzeigen und zum Anzeigen, wenn die Anzeigen beendet sind.

Suche ohne Werbung

Wenn Sie die Anzeigenwiedergabe deaktivieren möchten, während der Nutzer das Video durchsucht, lesen Sie die Suche ohne Werbung Abschnitt der Plugin-Referenz.

Codebeispiele

Hier sind vollständige Codebeispiele:

FreeWheel

Das Freewheel AdManager SDK wird nicht mit CocoaPods installiert. Stattdessen müssen Sie es manuell zum Anwendungsziel Ihres Projekts hinzufügen.

Befolgen Sie diese Schritte, um FreeWheel-Anzeigen zu verwenden:

  1. Fügen Sie das FreeWheel AdMananger SDK manuell zu Ihrem Projekt hinzu. Detaillierte Schritte finden Sie in den Basic Freewheel Players Liesmich Datei.
  2. Suchen und überprüfen Sie die Grundlegender FreeWheel-Player Beispiel-App.
  3. Öffne das ViewController Datei.

  4. Passen Sie das Projekt mit Ihren Werten an. Die folgenden Werte sind erforderlich, um Inhalte aus Ihrer Video Cloud-Bibliothek abzurufen:

    • Richtlinienschlüssel für die Wiedergabe-API
    • Konto-ID
    • Video-ID
  5. Erstellen Sie den FreeWheel-AdManager. Dieser ist für alle Anzeigenkontexte verantwortlich.
  6. Erstellen Sie den Sitzungsanbieter und den Wiedergabecontroller mit der Anzeigenkontextrichtlinie.
  7. Passen Sie das Projekt mit Ihren eigenen FreeWheel-Konfigurationswerten an. Beziehen auf FreeWheel-Dokumentation oder wenden Sie sich an Ihren FreeWheel-Kundenbetreuer.
  8. Konfigurieren Sie Anzeigenansicht, Anzeigensteuerung und Companion-Slot.

Suche ohne Werbung

Wenn Sie die Anzeigenwiedergabe deaktivieren möchten, während der Nutzer das Video durchsucht, lesen Sie die Suche ohne Werbung Abschnitt der Plugin-Referenz.

Codebeispiel

Hier ist ein vollständiges Codebeispiel: