Włączanie linearnych reklam displayowych

Pakiet IMA SDK dla HTML5 obsługuje oprócz linearnych reklam wideo także linearne reklamy displayowe. Szczegółowe informacje o linearnych reklamach wideo znajdziesz w artykule Omówienie reklam w Video Solutions.

Włączenie linearnych reklam displayowych może zwiększyć popyt na Twoją przestrzeń reklamową, ponieważ linearne reklamy displayowe konkurują o nią z linearnymi reklamami wideo. Pakiet IMA obsługuje renderowanie linearnych reklam displayowych, ale wymaga skonfigurowania wykrywania treści wideo. Wdrażanie wykrywania treści IMA różni się w zależności od tego, czy odtwarzacz treści tworzysz w tej samej ramce źródłowej co odtwarzacz reklam, czy też odtwarzacz reklam tworzysz w ramce współdzielonej.

Z tego przewodnika dowiesz się, jak skonfigurować wykrywanie treści, aby włączyć linearne reklamy displayowe, zmienić odtwarzacz treści wideo i zatrzymać zbieranie sygnałów dotyczących treści.

Konfigurowanie wykrywania treści

Aby włączyć linearne reklamy displayowe w przypadku żądań reklam:

To samo źródło

Jeśli pakiet IMA SDK ma to samo źródło co odtwarzacz treści, wykonaj jedną z tych czynności:

  • Preferowane: przekaż odtwarzacz w wywołaniu AdsManagerLoadedEvent.getAdsManager(). Chociaż getAdsManager() umożliwia przekazanie obiektu zawierającego właściwość currentTime, musisz przekazać instancję HTMLVideoElement do getAdsManager(), aby obsługiwać wykrywanie treści.

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

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

  • Jeśli nie możesz podać odtwarzacza treści podczas wywołania AdsManagerLoadedEvent.getAdsManager(), wywołaj metodę AdsManager.configureAdsManager() z odtwarzaczem wideo. Aby wykrywanie treści działało, musi to być HTMLVideoElement.

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

Jeśli nie skonfigurujesz wykrywania treści, serwery reklam Google mogą przestać wyświetlać linearne reklamy displayowe.

Jeśli odtwarzacz treści znajduje się w tym samym miejscu, z którego wczytujesz pakiet IMA SDK, nie musisz wprowadzać żadnych zmian w implementacji IMA, aby obsłużyć zmianę odtwarzacza treści lub zatrzymać zbieranie sygnałów dotyczących treści.

Współdzielenie

Jeśli pakiet IMA SDK jest współdzielony z odtwarzaczem treści, IMA może zbierać sygnały wykrywania treści za pomocą klasy CrossOriginProxy. Ta klasa umożliwia pakietowi IMA SDK weryfikację prawidłowego miejsca docelowego reklamy displayowej linearnej i zbieranie sygnałów związanych z tematyką treści wideo. Jeśli umieścisz pakiet IMA SDK w elemencie iframe obejmującym wiele domen, musisz zaimplementować klasę CrossOriginProxy.

Jeśli odtwarzacz treści nadal będzie umieszczony w innym miejscu niż pakiet IMA SDK bez zaimplementowanej klasy CrossOriginProxy, serwery reklam Google mogą przestać wyświetlać linearne reklamy displayowe.

Aby wczytać klasę CrossOriginProxy do aplikacji:

  1. W pliku HTML zaimportuj plik 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. W pliku main.js pobierz instancję CrossOriginProxy.

  3. Wywołaj metodę setVideoElements() z tablicą wszystkich odtwarzaczy wideo, które wyświetlają reklamy na Twojej stronie lub w aplikacji.

Zanim wyślesz żądanie reklamy, musisz przekazać elementy wideo do instancji CrossOriginProxy za pomocą wywołania setVideoElements(). W poniższym przykładzie przekazywana jest tablica zawierająca pojedynczy odtwarzacz treści wideo:

// 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);
});

Zmiana odtwarzacza treści wideo

Jeśli zmienisz odtwarzacz wideo lub dodasz kolejny, musisz przekazać nową tablicę do metody setVideoElements(). Gdy wykonasz nowe wywołanie setVideoElements(), IMA zacznie zbierać sygnały dla nowego odtwarzacza i przestanie zbierać sygnały dla odtwarzaczy przekazanych w poprzednich wywołaniach.

W tym przykładzie nowy element wideo jest przekazywany do klasy CrossOriginProxy:

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

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

Zatrzymywanie zbierania sygnałów po zakończeniu wyświetlania reklam

Po zakończeniu odtwarzania reklam i wywołaniu metody AdsLoader.destroy() musisz też wywołać metodę setVideoElements() z pustą tablicą. Wywołanie setVideoElements() z pustą tablicą powoduje usunięcie odwołania do odtwarzaczy treści, które przechowuje IMA, i zapobiega problemom z wyciekiem pamięci.