Lineare Displayanzeigen aktivieren

Das IMA SDK für HTML5 unterstützt neben linearen Videoanzeigen auch lineare Displayanzeigen. Weitere Informationen zu linearen Videoanzeigen finden Sie unter Werbung mit Lösungen für Videoanzeigen.

Wenn Sie lineare Displayanzeigen aktivieren, kann das die Anzeigennachfrage nach Ihrer Werbefläche erhöhen, da lineare Displayanzeigen mit linearen Videoanzeigen um Ihre Werbefläche konkurrieren. Das IMA übernimmt das Rendern linearer Displayanzeigen, erfordert jedoch, dass Sie die Erkennung von Videoinhalten einrichten. Die Implementierung der IMA-Erkennung von Inhalten hängt davon ab, ob Sie Ihren Contentplayer im selben Ursprungsframe wie Ihren Anzeigenplayer erstellen oder ob Sie Ihren Anzeigenplayer in einem ursprungsübergreifenden Frame erstellen.

In diesem Leitfaden wird beschrieben, wie Sie die Erkennung von Inhalten einrichten, um lineare Displayanzeigen zu aktivieren, den Videoplayer für Inhalte zu ändern und die Erfassung von Inhaltssignalen zu beenden.

Erkennung von Inhalten einrichten

So aktivieren Sie lineare Displayanzeigen für Anzeigenanfragen:

Gleicher Ursprung

Wenn das IMA SDK denselben Ursprung wie Ihr Contentplayer hat, haben Sie folgende Möglichkeiten:

  • Bevorzugt: Übergeben Sie den Videoplayer an den AdsManagerLoadedEvent.getAdsManager()-Aufruf. Obwohl du mit getAdsManager() ein Objekt mit einer currentTime-Property übergeben kannst, musst du eine HTMLVideoElement-Instanz an getAdsManager() übergeben, um die Erkennung von Inhalten zu unterstützen.

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

  • Wenn Sie den Content-Player während des AdsManagerLoadedEvent.getAdsManager()-Aufrufs nicht bereitstellen können, rufen Sie die Methode AdsManager.configureAdsManager() mit dem Videoplayer auf. Damit die Erkennung von Inhalten funktioniert, muss es sich um ein HTMLVideoElement handeln.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

Wenn Sie die Erkennung von Inhalten nicht einrichten, werden auf den Google-Ad-Servern möglicherweise keine linearen Displayanzeigen mehr ausgeliefert.

Wenn sich Ihr Contentplayer am selben Ursprung befindet, von dem Sie das IMA SDK laden, müssen Sie keine Änderungen an Ihrer IMA-Implementierung vornehmen, um den Contentplayer zu ändern oder die Erfassung von Inhaltssignalen zu beenden.

Cross-Origin-

Wenn das IMA SDK ursprungsübergreifend zu Ihrem Contentplayer ist, kann IMA Signale zur Inhaltserkennung über die Klasse CrossOriginProxy erfassen. Mit dieser Klasse kann das IMA SDK die korrekte Platzierung von linearen Displayanzeigen überprüfen und Signale zum Thema des Videoinhalts erfassen. Wenn Sie das IMA SDK in einem domainübergreifenden iFrame platzieren, müssen Sie die Klasse CrossOriginProxy implementieren.

Wenn Sie Ihren Contentplayer weiterhin ursprungsübergreifend zum IMA SDK platzieren, ohne die Klasse CrossOriginProxy zu implementieren, werden auf den Google-Ad-Servern möglicherweise keine linearen Displayanzeigen mehr ausgeliefert.

So laden Sie die Klasse CrossOriginProxy in Ihre App:

  1. Importieren Sie in Ihrer HTML-Datei die Datei ima_proxy.js:

    <html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

  2. Rufen Sie in der Datei main.js die CrossOriginProxy-Instanz ab.

  3. Rufen Sie die Methode setVideoElements() mit einem Array aller Videoplayer auf, in denen Anzeigen auf Ihrer Seite oder in Ihrer App ausgeliefert werden.

Bevor Sie eine Anzeigenanfrage stellen, müssen Sie die Videoelemente mit dem Aufruf setVideoElements() an die CrossOriginProxy-Instanz übergeben. Im folgenden Beispiel wird ein Array mit einem einzelnen Videoplayer für Inhalte übergeben:

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

Videoplayer für Content ändern

Wenn Sie zu einem anderen Videoplayer für Inhalte wechseln oder einen weiteren hinzufügen, müssen Sie ein neues Array an die Methode setVideoElements() übergeben. Wenn Sie den neuen setVideoElements()-Aufruf ausführen, beginnt IMA mit der Erfassung von Signalen für den neuen Contentplayer und beendet die Erfassung von Signalen für alle Contentplayer, die in vorherigen Aufrufen übergeben wurden.

Im folgenden Beispiel wird das neue Videoelement an die Klasse CrossOriginProxy übergeben:

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

Erfassung von Signalen beenden, wenn die Anzeigen vollständig sind

Wenn Sie die Wiedergabe von Anzeigen beenden und die Methode AdsLoader.destroy() aufrufen, müssen Sie auch die Methode setVideoElements() mit einem leeren Array aufrufen. Wenn Sie den Aufruf setVideoElements() mit einem leeren Array ausführen, wird der Verweis auf die Contentplayer, die IMA enthält, gelöscht und Probleme mit Speicherlecks werden verhindert.