Halaman ini diterjemahkan oleh Cloud Translation API.

Iklan pengiring

Sebaiknya kaitkan slot iklan HTML dalam halaman dengan video atau slot iklan overlay. Hubungan antara slot iklan terkait ini disebut sebagai hubungan pendamping-master.

Selain meminta iklan master overlay dan video, Anda dapat menggunakan IMA SDK untuk menampilkan iklan HTML pengiring. Iklan ini ditampilkan dalam HTML lingkungan fleksibel App Engine.

Gunakan iklan pengiring

Untuk menggunakan iklan pengiring, lakukan langkah-langkah berikut:

1. Pesan iklan pengiring Anda

Anda harus terlebih dahulu memesan iklan pengiring yang ingin ditampilkan dengan iklan utama. Iklan pengiring dapat diproses di Ad Manager. Anda dapat menayangkan hingga enam iklan pengiring per iklan master. Teknik ini, saat satu pembeli mengontrol semua iklan di halaman, juga dikenal sebagai roadblock.

2. Meminta iklan pengiring

Secara default, iklan pengiring diaktifkan untuk setiap permintaan iklan.

3. Iklan pengiring Display

Ada dua cara untuk merender iklan pengiring:

Otomatis menggunakan Tag Google Publisher (GPT)
Jika Anda menggunakan GPT untuk menerapkan iklan pengiring, iklan tersebut adalah ditampilkan secara otomatis selama ada slot iklan pengiring yang dinyatakan di halaman HTML dan iklan ini didaftarkan dengan API (yaitu, direktori ID dalam JavaScript dan HTML harus cocok). Beberapa manfaat menggunakan GPT adalah:
- Awareness slot pengiring
- Pengisian ulang pengiring dari jaringan penayang, jika VAST berisi iklan pengiring lebih sedikit daripada slot yang ditentukan di halaman HTML
- Pengiring akan terisi otomatis jika iklan video tidak ada
- Slot iklan pengiring bawaan untuk pemutar video klik untuk putar
- Rendering pendamping otomatis, termasuk HTMLResource dan iFrameResource
Secara manual menggunakan Ad API.

Menggunakan iklan pengiring dengan Tag Google Publisher

Tag Google Publisher (GPT) mengotomatiskan tampilan HTML iklan pengiring di situs Anda. Sebaiknya sebagian besar penayang menggunakan GPT. Tujuan SDK HTML5 mengenali slot GPT jika GPT dimuat di halaman web utama (bukan dalam IFrame). Anda dapat menemukan informasi yang lebih detail tentang penggunaan GPT dengan IMA SDK di dokumen GPT.

Jika Anda menghosting HTML5 SDK dalam IFrame

Jika Anda memenuhi kedua kriteria berikut, Anda harus menyertakan skrip proxy agar pengiring GPT Anda ditampilkan dengan benar:

Muat HTML5 SDK dalam IFrame.
Memuat GPT di halaman web utama (di luar IFrame).

Agar pengiring Anda ditampilkan dalam skenario ini, Anda harus memuat Skrip proxy GPT sebelum memuat SDK:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

Hal lain yang perlu diperhatikan:

Seharusnya tidak ada GPT yang dimuat di dalam IFrame yang memuat SDK.
GPT harus dimuat di halaman teratas, bukan di IFrame lain.
Skrip proxy harus dimuat dalam frame yang sama dengan GPT (yaitu, di halaman utama).

Mendeklarasikan slot iklan pengiring di HTML

Bagian ini menjelaskan cara mendeklarasikan iklan pengiring dalam HTML menggunakan GPT dan menyediakan kode contoh untuk berbagai skenario. Untuk HTML5 SDK, Anda perlu menambahkan beberapa JavaScript ke halaman HTML Anda dan menyatakan iklan pengiring slot waktu.

Catatan: Di setiap contoh berikut, pastikan Anda memberikan network dan unit-path yang valid di Panggilan metode googletag.defineSlot (terletak di <head> atau <body> bergantung pada contoh sebenarnya yang Anda gunakan).

Contoh 1: Penerapan slot iklan dasar
Contoh 2: Penerapan slot iklan dinamis
Contoh 3: Slot iklan bawaan

Contoh 1: Penerapan slot iklan dasar

Kode contoh berikut menunjukkan cara menyertakan file gpt.js di halaman HTML Anda dan mendeklarasikan slot iklan. Slot iklan yang dinyatakan adalah 728x90 piksel. GPT berupaya mengisi slot dengan iklan pengiring apa pun yang ditampilkan dalam respons VAST yang cocok dengan ukuran ini. Setelah slot iklan dideklarasikan, fungsi googletag.display() dapat merendernya di mana pun ia dipanggil pada halaman. Karena slot tersebut merupakan slot pengiring, iklan tidak langsung ditampilkan. Sebaliknya, mereka yang muncul di samping iklan video master.

Berikut ini contoh penerapannya:

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

     <!-- Register your companion slots -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
       </script>
     </div>
   <body>
 </html>

Cobalah

Anda dapat melihat codepen berikut untuk implementasi yang berfungsi.

Contoh 2: Penerapan slot iklan dinamis

Terkadang Anda mungkin tidak tahu berapa banyak slot iklan yang Anda miliki di satu halaman sampai konten halaman dirender. Kode contoh berikut menunjukkan cara menentukan slot iklan saat halaman dirender. Contoh ini identik dengan Contoh 1 kecuali bahwa iklan terdaftar slot tempat mereka benar-benar ditampilkan.

Catatan: Saat pemutar video akan menampilkan iklan, pemutar video akan meminta slot waktu. Pastikan bahwa slot telah ditentukan sebelum pemutar menampilkan iklan.

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() {
           // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
           googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
               .addService(googletag.companionAds())
               .addService(googletag.pubads());
           googletag.display('companionDiv');
         });
       </script>
     </div>
   <body>
 </html>

Cobalah

Anda dapat melihat kode berikut untuk implementasi yang berfungsi.

Contoh 3: Slot iklan bawaan

Pada kasus tertentu, Anda mungkin perlu menampilkan sesuatu di slot iklan sebelum iklan pengiring diminta. Iklan pengiring biasanya diminta bersama dengan iklan video. Permintaan ini dapat muncul setelah halaman memuat. Misalnya, iklan pengiring dapat dimuat hanya setelah pengguna mengeklik video klik untuk putar. Dalam kasus semacam itu, Anda memerlukan kemampuan untuk meminta iklan biasa untuk mengisi slot iklan sebelum iklan pengiring diminta. Kepada mendukung kasus penggunaan ini, Anda dapat menampilkan iklan web standar di slot pendamping. Pastikan bahwa iklan web ditargetkan ke slot pengiring. Anda dapat menargetkan slot pengiring dengan cara yang sama seperti menargetkan slot iklan web standar.

Catatan: Kode contoh berikut sama persis seperti yang diberikan untuk Contoh 1 dengan pengecualian bagian yang dicetak tebal. Di sini Anda memberikan jaringan iklan dan jalur unit iklan pramuat Anda bukan unit iklan video.

Berikut ini contoh implementasi yang baru saja dijelaskan:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

Cobalah

Anda dapat melihat codepen berikut untuk implementasi yang berfungsi.

Menggunakan iklan pengiring dengan Ad API

Bagian ini menjelaskan cara menampilkan iklan pengiring menggunakan Ad API.

Iklan pengiring Display

Untuk menampilkan iklan pengiring, dapatkan referensi ke objek Ad terlebih dahulu melalui salah satu peristiwa AdEvent yang dikirim dari AdsManager. Sebaiknya gunakan peristiwa AdEvent.STARTED, sebagai menampilkan iklan pengiring harus sesuai dengan penayangan iklan master.

Selanjutnya, gunakan objek Ad ini untuk memanggil getCompanionAds() guna dapatkan array objek CompanionAd. Di sini Anda memiliki opsi untuk menentukan CompanionAdSelectionSettings, yang memungkinkan Anda menetapkan filter di iklan pengiring untuk jenis materi iklan, persentase kecocokan mendekati, jenis resource, dan kriteria ukuran. Untuk mengetahui informasi selengkapnya tentang setelan ini, lihat HTML5.

Objek CompanionAd yang ditampilkan oleh getCompanionAds kini dapat digunakan untuk menampilkan iklan pengiring di halaman menggunakan panduan berikut:

Buat slot iklan pengiring <div> dari ukuran yang dibutuhkan pada halaman.
Di pengendali peristiwa untuk STARTED, ambil peristiwa Ad dengan memanggil getAd().
Gunakan getCompanionAds() untuk mendapatkan daftar iklan pengiring yang cocok dengan ukuran slot iklan pengiring dan CompanionAdSelectionSettings dan memiliki nomor urut yang sama sebagai materi iklan utama. Materi iklan yang tidak memiliki atribut urutan diperlakukan sebagai memiliki nomor urut 0.
Dapatkan konten dari CompanionAd dan menetapkannya sebagai HTMl dalam dari slot iklan <div>.

Kode contoh

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

Tampilkan iklan pengiring yang fleksibel

IMA kini mendukung iklan pengiring yang dapat disesuaikan. Iklan pengiring ini dapat mengubah ukuran agar sesuai dengan ukuran slot iklan. Mereka mengisi 100% dari lebar div induk, lalu mengubah ukuran tinggi agar sesuai dengan konten pendamping. Keduanya disetel menggunakan ukuran pendamping Fluid di Ad Manager. Lihat gambar berikut untuk mengetahui tempat menetapkan nilai ini.

Gambar yang menampilkan setelan iklan pengiring Ad Manager. Menyoroti opsi ukuran pengiring.

Pengiring yang dapat disesuaikan GPT

Saat menggunakan pengiring GPT, Anda dapat mendeklarasikan slot pengiring yang lancar dengan memperbarui Parameter kedua metode defineSlot().

 <!-- Register your companion slots -->
 <script>
   googletag.cmd.push(function() {
     // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
     googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
         .addService(googletag.companionAds())
         .addService(googletag.pubads());
     googletag.companionAds().setRefreshUnfilledSlots(true);
     googletag.pubads().enableVideoAds();
     googletag.enableServices();
   });
 </script>

Pengiring yang dapat disesuaikan API Iklan

Saat menggunakan API Iklan untuk iklan pengiring, Anda bisa menyatakan slot pengiring yang lancar dengan memperbarui google.ima.CompanionAdSelectionSettings.sizeCriteria menjadi nilai SELECT_FLUID.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>