Panduan berikut memperluas cara menampilkan iklan percobaan, dan memperkenalkan konsep yang lebih dasar untuk memaksimalkan library Tag Google Publisher (GPT). Konsep ini meliputi:
- Ukuran iklan
- Penargetan nilai kunci
- Arsitektur permintaan tunggal
Memuat library GPT
Mulai dengan memuat dan menginisialisasi library GPT. Tambahkan kode berikut ke <head> pada dokumen HTML:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Tindakan ini akan memuat library GPT dan melakukan inisialisasi objek googletag
dan CommandArray. Dengan menginisialisasi objek ini, Anda dapat segera mulai
menggunakan array perintah GPT. Tambahkan kode JavaScript yang mengikuti isi fungsi kosong yang ditentukan dalam cuplikan ini.
Menentukan slot iklan
Setelah memuat GPT, Anda dapat menentukan slot iklan. Contoh berikut menetapkan tiga slot iklan dengan format iklan, ukuran, dan opsi penargetan yang berbeda.
Slot iklan ukuran tetap
Berikut ini slot iklan berukuran tetap yang sederhana:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
Selain ID <div> jalur unit iklan, ukuran, dan penampung, cuplikan ini juga menentukan sejumlah opsi penargetan. Opsi ini membatasi dan
membedakan iklan yang memenuhi syarat untuk ditayangkan ke slot ini. Pelajari penargetan nilai kunci lebih lanjut.
Slot iklan anchor
Berikut ini slot iklan anchor yang dipasang di bagian bawah area pandang:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
Slot anchor adalah jenis format di luar halaman, yang ditentukan
menggunakan metode defineOutOfPageSlot, bukan metode
defineSlot biasa. Pelajari materi iklan di luar halaman lebih lanjut.
Format di luar halaman sering kali memiliki batasan terkait jenis halaman dan perangkat yang valid untuk menayangkan iklan. Karena batasan ini, Anda harus memverifikasi bahwa slot berhasil ditentukan sebelum berinteraksi dengannya. Lihat contoh Menampilkan iklan anchor untuk detailnya.
Slot iklan yang dapat menyesuaikan
Berikut ini slot iklan yang dapat menyesuaikan untuk iklan native:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Slot iklan yang dapat menyesuaikan tidak memiliki ukuran tetap. Slot iklan yang dapat menyesuaikan
agar sesuai dengan konten materi iklan dari iklan. Anda menentukan slot iklan yang dapat menyesuaikan dengan opsi ukuran fluid. Pelajari lebih lanjut ukuran iklan dan opsi ukuran yang tersedia.
Mengonfigurasi setelan tingkat halaman
Opsi konfigurasi GPT tertentu berlaku secara global, bukan ke slot iklan tertentu. Ini disebut sebagai setelan tingkat halaman.
Berikut adalah contoh cara mengonfigurasi setelan tingkat halaman:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
Cuplikan ini melakukan tiga hal:
- Mengonfigurasi opsi penargetan tingkat halaman, yang diterapkan ke setiap slot iklan di halaman.
- Mengaktifkan mode Arsitektur Permintaan Tunggal (SRA), yang menggabungkan permintaan untuk beberapa slot iklan menjadi satu permintaan iklan. SRA meningkatkan performa, dan diperlukan untuk menjamin bahwa pengecualian dan penghalang pandang kompetitif dihormati, jadi sebaiknya Anda selalu mengaktifkan SRA. Pelajari lebih lanjut cara menggunakan SRA dengan benar.
- Mengaktifkan layanan yang disertakan ke slot iklan kami yang memungkinkan pembuatan permintaan iklan.
Iklan Display
Terakhir, tambahkan cuplikan berikut ke <body> di halaman:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
Parameter ini menentukan dua penampung slot iklan: banner-ad dan native-ad. Nilai
id penampung ini sesuai dengan nilai yang Anda berikan saat Anda menentukan
slot iklan sebelumnya dalam contoh ini.
Setelah semua slot iklan ditentukan, panggilan untuk menampilkan banner-ad akan dibuat. Karena
SRA diaktifkan, panggilan tampilan tunggal ini akan meminta dan merender semua slot iklan
yang ditentukan hingga saat ini. Jika perlu, Anda dapat secara lebih akurat
mengontrol pemuatan dan pembaruan iklan serta
perilaku pengelompokan dengan SRA diaktifkan.
Contoh lengkap
Berikut adalah kode sumber lengkap untuk halaman contoh yang menjadi dasar panduan ini. Anda juga dapat melihat demo interaktif halaman ini.