Panduan berikut memperluas cara menampilkan iklan pengujian, dan memperkenalkan konsep dasar lainnya untuk memaksimalkan library Tag Penayang Google (GPT). Konsep ini mencakup:
- Ukuran iklan
- Penargetan nilai kunci
- Arsitektur permintaan tunggal
Memuat library GPT
Mulai dengan memuat dan melakukan inisialisasi library GPT. Tambahkan kode berikut ke <head> dokumen HTML:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></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 melakukan inisialisasi objek ini, Anda dapat segera
menggunakan array perintah GPT. Tambahkan kode JavaScript berikut ke isi fungsi kosong yang ditentukan dalam cuplikan ini.
Menentukan slot iklan
Setelah memuat GPT, Anda dapat menentukan slot iklan. Contoh berikut menentukan tiga slot iklan dengan opsi format, ukuran, dan penargetan iklan yang berbeda.
Slot iklan berukuran tetap
Berikut adalah slot iklan sederhana berukuran tetap:
// 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 jalur unit iklan, ukuran, dan ID <div> 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 adalah slot iklan anchor, yang dilampirkan ke 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 pada jenis halaman dan perangkat yang memenuhi syarat untuk menayangkannya. Karena batasan ini, Anda harus memverifikasi bahwa slot berhasil ditentukan sebelum berinteraksi dengannya. Lihat contoh Menampilkan iklan anchor untuk mengetahui detailnya.
Slot iklan fleksibel
Berikut adalah slot iklan adaptif untuk iklan native:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Slot iklan fleksibel tidak memiliki ukuran tetap. Slot iklan fleksibel disesuaikan 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 untuk slot iklan tertentu. Setelan ini disebut 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 ke dalam satu permintaan iklan. SRA meningkatkan performa, dan diperlukan untuk menjamin bahwa pengecualian kompetitif dan iklan roadblock dihormati, jadi sebaiknya Anda selalu mengaktifkan SRA. Pelajari lebih lanjut cara menggunakan SRA dengan benar.
- Mengaktifkan layanan yang terpasang ke slot iklan kami yang memungkinkan permintaan iklan dibuat.
Iklan Display
Terakhir, tambahkan cuplikan berikut ke <body> 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>
Ini menentukan dua penampung slot iklan: banner-ad dan native-ad. Nilai
id penampung ini sesuai dengan nilai yang Anda berikan saat menentukan
slot iklan sebelumnya dalam contoh ini.
Setelah semua slot iklan ditentukan, panggilan untuk menampilkan banner-ad akan dilakukan. Karena
SRA diaktifkan, satu panggilan display ini meminta dan merender semua slot iklan
yang ditentukan hingga saat ini. Jika perlu, Anda dapat
mengontrol pemuatan dan pembaruan iklan serta
perilaku pengelompokan dengan SRA diaktifkan secara lebih akurat.
Contoh lengkap
Berikut adalah kode sumber lengkap untuk halaman contoh yang menjadi dasar panduan ini. Anda juga dapat melihat demo interaktif halaman ini.