Anda mungkin ingin mengaitkan slot iklan HTML dalam halaman dengan slot iklan overlay atau video. Hubungan antara slot iklan yang terkait 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 lingkungan HTML.
Menggunakan iklan pengiring
Untuk menggunakan iklan pengiring, lakukan langkah-langkah berikut:
1. Pesan iklan pengiring
Anda harus terlebih dahulu memesan iklan pengiring yang ingin ditampilkan dengan iklan master. 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 roadblocking.
2. Meminta iklan pengiring
Secara default, iklan pengiring diaktifkan untuk setiap permintaan iklan.
3. Tampilkan iklan pengiring
Ada dua cara untuk merender iklan pengiring:
- 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 dengan API (yaitu, ID div di JavaScript dan HTML harus cocok). Beberapa manfaat menggunakan GPT adalah:- Kesadaran slot pengiring
- Pengisian ulang pengiring dari jaringan penayang, jika respons VAST berisi lebih sedikit iklan pengiring daripada slot yang ditentukan di halaman HTML
- Pengiring akan diisi otomatis jika iklan video tidak ada
- Slot iklan pengiring yang dimuat sebelumnya untuk pemutar video klik untuk putar
- Rendering pengiring otomatis, termasuk
HTMLResource
daniFrameResource
- Secara manual menggunakan Ad API.
Menggunakan iklan pengiring dengan Tag Google Publisher
Tag Google Publisher (GPT) mengotomatiskan tampilan iklan pengiring HTML di situs Anda. Sebaiknya sebagian besar penayang menggunakan GPT. HTML 5 SDK mengenali slot GPT jika GPT dimuat di halaman web utama (bukan dalam IFrame). Anda dapat menemukan informasi yang lebih mendetail terkait penggunaan GPT dengan IMA SDK di dokumen GPT.
Jika Anda menghosting HTML5 SDK dalam IFrame
Jika memenuhi kedua kriteria berikut, Anda harus menyertakan skrip proxy tambahan agar pengiring GPT ditampilkan dengan benar:
- Muat HTML5 SDK di IFrame.
- Memuat GPT pada halaman web utama (di luar IFrame).
Agar pengiring 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 atas, bukan di IFrame lain.
- Skrip proxy harus dimuat di 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 harus menambahkan beberapa JavaScript ke halaman HTML dan menyatakan slot iklan pengiring.
Catatan: Pada setiap contoh berikut, pastikan untuk
menyediakan network
dan unit-path
yang valid dalam
panggilan metode googletag.defineSlot
(terletak di tag <head> atau
<body>, bergantung pada contoh aktual 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 dan
mendeklarasikan slot iklan. Slot iklan yang dinyatakan adalah 728x90 piksel. GPT mencoba mengisi slot dengan
iklan pengiring apa pun yang ditampilkan di respons VAST yang cocok dengan ukuran ini. Setelah slot iklan dideklarasikan, fungsi googletag.display()
dapat merendernya di mana pun dipanggil di
halaman. Karena slot tersebut adalah slot pengiring, iklan tidak akan langsung ditampilkan. Sebagai gantinya, iklan tersebut
akan muncul bersama iklan video master.
Berikut adalah contoh implementasinya:
<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 penerapan yang berfungsi.
Contoh 2: Penerapan slot iklan dinamis
Terkadang, Anda mungkin tidak mengetahui jumlah slot iklan yang ada di halaman hingga konten halaman dirender. Kode contoh berikut menunjukkan cara menentukan slot iklan saat halaman dirender. Contoh ini sama dengan Contoh 1 kecuali bahwa contoh ini mendaftarkan slot iklan tempat iklan tersebut benar-benar ditampilkan.
Catatan: Saat pemutar video akan menampilkan iklan, pemutar akan meminta slot. Pastikan slot 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 penerapan 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 putar. Dalam kasus tersebut, Anda harus dapat meminta iklan biasa untuk mengisi slot iklan sebelum iklan pengiring diminta. Untuk mendukung kasus penggunaan ini, Anda dapat menampilkan iklan web standar di slot pengiring. Pastikan iklan web ditargetkan ke slot pengiring. Anda dapat menarget slot pengiring dengan cara yang sama seperti menarget slot iklan web standar.
Catatan: Kode contoh berikut sama persis dengan yang diberikan untuk Contoh 1 dengan pengecualian bagian yang berhuruf tebal. Dalam hal ini, Anda menyediakan jaringan iklan dan jalur unit untuk iklan pramuat, bukan unit iklan video Anda.
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 pena kode berikut untuk penerapan yang berfungsi.
Menggunakan iklan pengiring dengan Ad API
Bagian ini menjelaskan cara menampilkan iklan pengiring menggunakan Ad
API.
Tampilkan iklan pengiring
Untuk menampilkan iklan pengiring, pertama-tama dapatkan referensi ke objek Ad
melalui peristiwa AdEvent
yang dikirim dari AdsManager
.
Sebaiknya gunakan peristiwa AdEvent.STARTED
, karena menampilkan
iklan pengiring harus bertepatan dengan menampilkan iklan master.
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 pengiring untuk jenis materi iklan, persentase kecocokan hampir sesuai,
jenis resource, dan kriteria ukuran. Untuk informasi selengkapnya tentang setelan ini, lihat
dokumentasi API
HTML5.
Objek CompanionAd
yang ditampilkan oleh getCompanionAds
kini dapat digunakan untuk menampilkan iklan pengiring di halaman menggunakan panduan ini:
- Buat slot iklan pengiring
<div>
dengan ukuran yang diperlukan di halaman. - Di pengendali peristiwa untuk peristiwa
STARTED, ambil objek
Ad
dengan memanggilgetAd()
. - Gunakan
getCompanionAds()
untuk mendapatkan daftar iklan pengiring yang cocok dengan ukuran slot iklan pengiring danCompanionAdSelectionSettings
serta memiliki nomor urut yang sama dengan materi iklan master. Materi iklan yang tidak memiliki atribut urutan dianggap memiliki nomor urut 0. - Dapatkan konten dari instance
CompanionAd
dan tetapkan sebagai HTMl dalam dari<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>
Tampilkan iklan pengiring yang dapat menyesuaikan
IMA kini mendukung iklan pengiring yang dapat menyesuaikan. Iklan pengiring ini dapat diubah ukurannya
agar sesuai dengan ukuran slot iklan. Dia mengisi 100% lebar div induk, lalu mengubah ukuran
tingginya agar sesuai dengan konten pendamping. Tema ini ditetapkan menggunakan ukuran pendamping Fluid
di Ad Manager. Lihat gambar berikut untuk mengetahui tempat menetapkan nilai ini.
Pengiring GPT yang dapat disesuaikan
Saat menggunakan pengiring GPT, Anda dapat mendeklarasikan slot pendamping yang dapat disesuaikan 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 Ad API untuk iklan pengiring, Anda dapat mendeklarasikan slot pendamping yang dapat disesuaikan 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>