Artikel ini memberikan catatan dan contoh yang menunjukkan cara menampilkan iklan interstisial game H5 menggunakan library Tag Penayang Google (GPT). Interstisial game adalah iklan halaman penuh yang dikelola GPT dan ditampilkan kepada pengguna melalui pemicu manual pada game yang berjalan di halaman web.
Peristiwa GPT berikut digunakan untuk menampilkan dan berinteraksi dengan iklan interstisial game:
| Acara | Diaktifkan ketika... |
|---|---|
|
|
Slot iklan interstisial game siap ditampilkan. Untuk menampilkan interstisial, panggil |
|
|
Slot iklan interstisial game yang sedang ditampilkan kini ditutup. Digunakan untuk menjalankan logika kustom setiap kali interstisial game ditutup. |
Interstisial game dapat dirender dalam layar penuh atau di dalam bingkai game, bergantung pada cara game ditampilkan. Pelajari lebih lanjut Struktur Iklan Game H5.
Kode contoh berikut mengasumsikan bahwa game H5 ditempatkan langsung di frame atas yang sama dengan halaman (menggunakan struktur "Layar Penuh"). Dalam hal ini, iklan interstisial game juga akan dirender pada layar penuh.
Namun, kode yang sama ini juga berfungsi jika ditempatkan di dalam frame turunan (menggunakan struktur "iFrame/WebView"). Untuk membatasi iklan interstisial game ke kanvas game H5, game harus ditempatkan di iFrame.
Contoh
<!doctype html>
<html>
<head>
<!-- Tag Penayang Google di sini, jika ada, hanya akan bertanggung jawab untuk menayangkan iklan di luar game H5. -->
<title>Halaman untuk contoh game H5 ini</title>
<!-- Konten <head> Anda di sini. -->
</head>
<body>
<span id="example-text">Contoh game H5</span>
<iframe src="https://www.example-game.com" title="Contoh game" allow="autoplay">
<!-- Contoh kode ditayangkan di sini. Tag Penayang Google yang dimuat dalam bingkai ini hanya akan digunakan dalam game H5. -->
</iframe>
</body>
</html>
Catatan penggunaan
- Untuk memastikan pengalaman pengguna yang optimal, GPT hanya meminta iklan interstisial game di halaman yang mendukung format dengan benar. Oleh karena itu,
defineOutOfPageSlot()mungkin menampilkan null. Hanya minta iklan interstisial game di halaman atau lingkungan tempat Anda ingin menampilkan interstisial. Iklan interstisial game memenuhi syarat untuk ditayangkan ke desktop, tablet, dan perangkat seluler. - Interstisial muncul saat Anda memanggil
makeGameManualInterstitialVisibledarimakeGameManualInterstitialVisible. - Iklan interstisial game memiliki pembatasan frekuensi tetap. Hal ini mencegah peristiwa
gameManualInterstitialSlotReadydiaktifkan lebih dari sekali setiap 120 detik.
Persyaratan dan rekomendasi
- Penayang tidak diizinkan menggunakan interstisial game H5 di inventaris non-game. Dengan menerapkan format ini, penayang akan otomatis menyetujui ketentuan ini. Kebijakan Penayang Google dan Panduan Partner Ad Manager Google juga harus dipatuhi.
- Google berhak menyetujui atau menolak penayang kapan saja, dan penayang yang terbukti melanggar akan dikeluarkan dari daftar yang diizinkan.
- Iklan interstisial game membuat slot iklan sendiri. Tidak seperti jenis iklan lainnya, Anda tidak perlu menentukan elemen <div> untuk iklan interstisial game. Iklan ini otomatis membuat dan menyisipkan penampung sendiri ke dalam halaman saat iklan terisi.
- Jika menggunakan arsitektur permintaan tunggal (SRA) di halaman dengan beberapa slot, jangan panggil
display()hingga div slot iklan statis dibuat. Seperti yang dijelaskan dalam Praktik Terbaik Iklan, panggilan pertama kedisplay()meminta setiap slot iklan yang ditentukan sebelum titik tersebut. Walaupun slot interstisial game tidak memerlukan <div> standar, slot iklan statis memerlukannya. Memanggildisplay()sebelum elemen ini ada di halaman dapat mengakibatkan sinyal kualitas yang lebih rendah, jadi sebaiknya tunda panggilan awal hingga slot statis ditentukan. - Proses iklan interstisial manual memerlukan penyiapan unit iklan dan item baris yang sama seperti interstisial web standar.
Mulai
- Pemberian tag
- Buat slot GPT menggunakan
googletag.defineOutOfPageSlot()dan tetapkan Format OutOfPage kegoogletag.defineOutOfPageSlot().
Lihat panduan developer teknis GPT untuk interstisial game H5. - Setelah slot ditentukan, tambahkan pemroses peristiwa yang memproses peristiwa
gameManualInterstitialSlotReady. Dalam callback pemroses peristiwa, panggil metodemakeGameManualInterstitialVisible()pada objek peristiwa yang disediakan untuk menampilkan iklan. - Setelah Anda menyatakan semua slot iklan statis lainnya, panggilan ke
googletag.displayakan memicu permintaan untuk mengisi slot interstisial game.
- Buat slot GPT menggunakan
Contoh
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contoh Iklan Interstisial Manual Game</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
biarkan gameManualInterstitialSlot;
googletag.cmd.push(function () {
// Tentukan slot iklan interstisial manual game.
defineGameManualInterstitialSlot();
// Tentukan slot iklan statis.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Mengaktifkan SRA dan layanan.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Slot menampilkan null jika halaman atau perangkat tidak mendukung interstisial.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Tambahkan pemroses peristiwa untuk mendaftarkan handler klik setelah interstisial dimuat.
// Jika peristiwa ini tidak diaktifkan, coba hapus penyimpanan lokal dan muat ulang
// halaman tersebut.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Interstitial is ready.');
tombol konstanta = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Interstitial is active.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Slot iklan interstisial manual game hanya digunakan satu kali, jadi hancurkan slot lama dan buat yang baru.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">Interstisial manual game tidak didukung di halaman ini.</span>
<p>
<button id="trigger">TRIGGER INTERSTITIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Pastikan panggilan pertama yang akan ditampilkan muncul setelah slot iklan statis
// div ditentukan.
googletag.display(staticSlot);
});
</script>
</body>
</html>
Proses Iklan
- Buat unit iklan baru atau gunakan kembali unit iklan yang sudah ada. Pilih 320x480, 300x250, dan 336x280 sebagai ukuran unit iklan.
- Membuat item baris. Pilih setelan item baris yang sesuai berdasarkan kasus penggunaan Anda:
| Setelan item baris | ||||
|---|---|---|---|---|
| Kasus penggunaan | Jenis iklan | Jenis item baris | Materi iklan yang diharapkan | Penargetan > Inventaris |
| Untuk menayangkan iklan Display reservasi | Display |
|
320x480, 300x250, atau 336x280 |
Unit iklan yang dibuat atau dipilih di langkah sebelumnya |
| Untuk menayangkan iklan yang tidak direservasi | Display |
|
||
| Untuk menayangkan iklan video reservasi (misalnya tag VAST atau MP4) | Video atau audio |
|
300x250v atau 320x480v | |
| Untuk menayangkan iklan pengisian ulang/lelang terbuka | Display | Ad Exchange | Semua ukuran yang diminta | |