Untuk mendiskusikan dan memberikan masukan tentang produk kami, bergabunglah ke channel Discord Ad Manager resmi di server Komunitas Iklan dan Pengukuran Google.

Halaman ini diterjemahkan oleh Cloud Translation API.

Menambahkan dukungan iklan pengiring

Pilih platform: HTML5 Android iOS

Anda mungkin ingin mengaitkan slot iklan HTML dalam halaman dengan slot iklan video atau overlay. Hubungan antara slot iklan terkait ini disebut sebagai hubungan master-pengiring.

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

Menggunakan iklan pengiring

Untuk menggunakan iklan pendamping, lakukan langkah-langkah berikut:

1. Memesan iklan pengiring

Anda harus memesan iklan pengiring yang ingin ditampilkan dengan iklan utama terlebih dahulu. Iklan pendamping 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 roadblocking.

2. Meminta iklan pengiring

Secara default, iklan pendamping diaktifkan untuk setiap permintaan iklan.

3. Menampilkan iklan pengiring Display

Ada dua cara untuk merender iklan pendamping:

Secara otomatis menggunakan Tag Google Publisher (GPT).

Jika Anda menggunakan GPT untuk menerapkan iklan pengiring, iklan tersebut akan ditampilkan secara otomatis selama ada slot iklan pengiring yang dideklarasikan di halaman HTML dan iklan ini terdaftar di API (yaitu, ID div di JavaScript dan HTML harus cocok). Beberapa manfaat menggunakan GPT adalah:
- Awareness terhadap slot pengiring.
- Pengisian ulang pengiring dari jaringan penayang, jika respons VAST berisi lebih sedikit iklan pengiring daripada slot yang ditentukan di halaman HTML.
- Pengisian otomatis pengiring jika iklan video tidak ada.
- Slot iklan pengiring yang sudah dimuat sebelumnya untuk pemutar video klik untuk diputar.
- 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 iklan pendamping HTML di situs Anda. Sebaiknya sebagian besar penayang menggunakan GPT. SDK HTML5 mengenali slot GPT jika GPT dimuat di halaman web utama (bukan di IFrame). Anda dapat menemukan informasi yang lebih mendetail 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 tambahan agar pendamping GPT Anda ditampilkan dengan benar:

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

Agar pendamping 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:

Tidak boleh 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 dalam HTML

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

Contoh 1: Penerapan slot iklan dasar
Contoh 2: Penerapan slot iklan dinamis
Contoh 3: Slot iklan yang dimuat sebelumnya

Contoh 1: Penerapan slot iklan dasar

Contoh kode berikut menunjukkan cara menyertakan file gpt.js di halaman HTML dan mendeklarasikan slot iklan. Slot iklan yang dinyatakan adalah 728x90 piksel. GPT mencoba mengisi slot dengan iklan pengiring yang ditampilkan dalam respons VAST yang cocok dengan ukuran ini. Setelah slot iklan dideklarasikan, fungsi googletag.display() dapat merendernya di mana pun fungsi tersebut dipanggil di halaman. Karena slot adalah slot pengiring, iklan tidak ditampilkan secara langsung. Sebagai gantinya, iklan tersebut muncul bersama iklan video master.

Berikut 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 mengetahui implementasi yang berfungsi.

Contoh 2: Penerapan slot iklan dinamis

Terkadang Anda mungkin tidak tahu jumlah slot iklan yang ada di halaman hingga konten halaman dirender. Contoh kode berikut menunjukkan cara menentukan slot iklan saat halaman dirender. Contoh ini identik dengan Contoh 1 kecuali karena mendaftarkan slot iklan tempat iklan benar-benar ditampilkan.

<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 yang dimuat sebelumnya

Dalam 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 terjadi setelah halaman dimuat. Misalnya, iklan pengiring hanya dapat dimuat setelah pengguna mengklik video klik untuk diputar. Dalam kasus seperti itu, Anda memerlukan kemampuan untuk meminta iklan reguler guna mengisi slot iklan sebelum iklan pengiring diminta. Untuk mendukung kasus penggunaan ini, Anda dapat menampilkan iklan web standar di slot pendamping. Pastikan iklan web ditargetkan ke slot pengiring. Anda dapat menargetkan slot pendamping dengan cara yang sama seperti menargetkan slot iklan web standar.

Berikut adalah contoh penerapan 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 code-pen berikut untuk implementasi yang berfungsi.

Menggunakan iklan pendamping dengan Ad API

Bagian ini menjelaskan cara menampilkan iklan pendamping menggunakan Ad API.

Menampilkan iklan pengiring Display

Untuk menampilkan iklan pengiring, pertama-tama dapatkan referensi ke objek Ad melalui salah satu peristiwa AdEvent yang dikirim dari AdsManager. Sebaiknya gunakan peristiwa AdEvent.STARTED, karena menampilkan iklan pengiring harus bertepatan dengan menampilkan iklan utama.

Selanjutnya, gunakan objek Ad ini untuk memanggil getCompanionAds() guna mendapatkan array objek CompanionAd. Di sini, Anda memiliki opsi untuk menentukan CompanionAdSelectionSettings, yang memungkinkan Anda menetapkan filter pada iklan pendamping untuk jenis materi iklan, persentase kecocokan dekat, jenis resource, dan kriteria ukuran. Untuk mengetahui informasi selengkapnya tentang setelan ini, lihat dokumentasi IMA CompanionAdSelectionSettings API.

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

Buat slot iklan pendamping <div> dengan ukuran yang diperlukan di halaman.
Di pengendali peristiwa untuk peristiwa STARTED, ambil objek Ad dengan memanggil getAd().
Gunakan getCompanionAds() untuk mendapatkan daftar iklan pengiring yang cocok dengan ukuran slot iklan pengiring dan CompanionAdSelectionSettings serta memiliki nomor urut yang sama dengan materi iklan master. Materi iklan dengan atribut urutan yang tidak ada dianggap memiliki nomor urutan 0.
Dapatkan konten dari instance CompanionAd dan tetapkan sebagai HTML dalam <div> slot iklan tersebut.

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>

Menampilkan iklan pengiring yang lancar

IMA kini mendukung iklan pengiring yang dapat menyesuaikan. Iklan pendamping ini dapat diubah ukurannya agar sesuai dengan ukuran slot iklan. Iklan ini mengisi 100% lebar div induk, lalu mengubah ukuran tingginya agar sesuai dengan konten pendamping. Ukuran ini ditetapkan dengan menggunakan ukuran iklan pengiring Fluid di Ad Manager. Lihat gambar berikut untuk mengetahui tempat menetapkan nilai ini.

Gambar yang menampilkan setelan iklan pendamping Ad Manager. Menandai opsi ukuran pengiring.

Pengiring fleksibel GPT

Saat menggunakan pendamping GPT, Anda dapat mendeklarasikan slot pendamping 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>

Pendamping lancar Ad API

Saat menggunakan Ad API untuk iklan pendamping, Anda dapat mendeklarasikan slot pendamping yang fleksibel dengan memperbarui google.ima.CompanionAdSelectionSettings.SizeCriteria ke 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>

Menambahkan dukungan iklan pengiring Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Menggunakan iklan pengiring

1. Memesan iklan pengiring

2. Meminta iklan pengiring

3. Menampilkan iklan pengiring Display

Menggunakan iklan pengiring dengan Tag Google Publisher

Jika Anda menghosting HTML5 SDK dalam IFrame

Mendeklarasikan slot iklan pengiring dalam HTML

Contoh 1: Penerapan slot iklan dasar

Cobalah

Contoh 2: Penerapan slot iklan dinamis

Cobalah

Contoh 3: Slot iklan yang dimuat sebelumnya

Cobalah

Menggunakan iklan pendamping dengan Ad API

Menampilkan iklan pengiring Display

Kode contoh

Menampilkan iklan pengiring yang lancar

Pengiring fleksibel GPT

Pendamping lancar Ad API

Menambahkan dukungan iklan pengiring