Mengaktifkan iklan Display linear

IMA SDK for HTML5 mendukung iklan Display linear selain iklan video linear. Untuk mengetahui detail tentang iklan video linear, lihat Ringkasan periklanan Solusi Video.

Mengaktifkan iklan Display linear dapat menciptakan permintaan tambahan untuk ruang iklan Anda, karena iklan Display linear bersaing dengan iklan video linear untuk ruang iklan Anda. IMA menangani rendering iklan Display linear, tetapi mengharuskan Anda menyiapkan deteksi konten video. Penerapan deteksi konten IMA berbeda-beda, bergantung pada apakah Anda membuat pemutar konten dalam frame origin yang sama dengan pemutar iklan, atau apakah Anda membuat pemutar iklan dalam frame lintas origin.

Panduan ini membahas cara menyiapkan deteksi konten untuk mengaktifkan iklan Display linear, mengubah pemutar video konten, dan berhenti mengumpulkan sinyal konten.

Menyiapkan deteksi konten

Untuk mengaktifkan iklan Display linear untuk permintaan iklan, lakukan tindakan berikut:

Origin yang sama

Jika IMA SDK memiliki origin yang sama dengan pemutar konten Anda, lakukan salah satu hal berikut:

  • Lebih disukai Teruskan pemutar video ke panggilan AdsManagerLoadedEvent.getAdsManager(). Meskipun getAdsManager() memungkinkan Anda meneruskan objek yang berisi properti currentTime, Anda harus meneruskan instance HTMLVideoElement ke getAdsManager() untuk mendukung deteksi konten.

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

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

  • Jika Anda tidak dapat menyediakan pemutar konten selama panggilan AdsManagerLoadedEvent.getAdsManager(), panggil metode AdsManager.configureAdsManager() dengan pemutar video. Agar deteksi konten berfungsi, konten harus berupa HTMLVideoElement.

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

Jika Anda tidak menyiapkan deteksi konten, server iklan Google mungkin berhenti menayangkan iklan Display linear.

Jika pemutar konten Anda berada di origin yang sama dengan tempat Anda memuat IMA SDK, Anda tidak perlu melakukan perubahan apa pun pada penerapan IMA untuk menangani perubahan pemutar konten atau menghentikan pengumpulan sinyal konten.

Lintas origin

Jika IMA SDK bersifat lintas origin ke pemutar konten Anda, IMA dapat mengumpulkan sinyal deteksi konten melalui class CrossOriginProxy. Class ini memungkinkan IMA SDK memverifikasi penempatan iklan Display linear yang benar dan mengumpulkan sinyal yang terkait dengan materi konten video. Jika Anda menempatkan IMA SDK dalam iframe lintas domain, Anda harus menerapkan class CrossOriginProxy.

Jika Anda terus menempatkan pemutar konten lintas origin ke IMA SDK tanpa menerapkan class CrossOriginProxy, server iklan Google mungkin akan berhenti menayangkan iklan Display linear.

Untuk memuat class CrossOriginProxy ke dalam aplikasi Anda, lakukan hal berikut:

  1. Di file HTML Anda, impor file 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. Di file main.js, dapatkan instance CrossOriginProxy.

  3. Panggil metode setVideoElements() dengan array semua pemutar video yang menampilkan iklan di halaman atau aplikasi Anda.

Sebelum membuat panggilan iklan, Anda harus meneruskan elemen video ke instance CrossOriginProxy dengan panggilan setVideoElements(). Contoh berikut meneruskan array yang berisi satu pemutar video konten:

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

Mengubah pemutar video konten

Jika Anda mengubah atau menambahkan pemutar video konten lain, Anda harus meneruskan array baru ke metode setVideoElements(). Saat Anda melakukan panggilan setVideoElements() baru, IMA akan mulai mengumpulkan sinyal untuk pemutar konten baru, dan berhenti mengumpulkan sinyal untuk pemutar konten yang diteruskan dalam panggilan sebelumnya.

Contoh berikut meneruskan elemen video baru ke class CrossOriginProxy:

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

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

Berhenti mengumpulkan sinyal saat iklan selesai

Setelah selesai memutar iklan dan memanggil metode AdsLoader.destroy(), Anda juga harus memanggil metode setVideoElements() dengan array kosong. Melakukan panggilan setVideoElements() dengan array kosong akan menghapus referensi ke pemutar konten yang dimiliki IMA dan mencegah masalah kebocoran memori.