Dalam contoh konsep dasar dan memulai, metode display()
library Tag Penayang Google (GPT) digunakan untuk mendaftarkan dan menampilkan slot iklan. Namun, ada kalanya
lebih disukai atau bahkan diperlukan untuk memisahkan
tindakan ini, untuk lebih
mengontrol waktu pemuatan
konten iklan. Misalnya, saat bekerja dengan
platform pengelolaan izin atau meminta konten iklan sebagai hasil dari pengguna
tindakan.
Dalam panduan ini, kita akan mempelajari mekanisme yang disediakan GPT untuk mengontrol pemuatan konten iklan dan mengambil konten iklan baru sesuai permintaan. Kode lengkap untuk contoh ini dapat ditemukan di permintaan berbasis peristiwa contoh halaman.
Mengontrol pemuatan iklan
Secara default, perilaku metode display()
adalah
mendaftar, meminta, dan menampilkan konten iklan ke dalam slot iklan. Permintaan dan rendering konten iklan secara otomatis dapat dinonaktifkan menggunakan metode PubAdsService.disableInitialLoad()
.
Dengan pemuatan awal dinonaktifkan, panggilan ke display()
hanya akan mendaftarkan slot iklan.
Tidak ada konten iklan yang akan dimuat hingga tindakan kedua dilakukan. Hal ini memungkinkan Anda
mengontrol dengan tepat kapan permintaan iklan dibuat.
Untuk menghindari pembuatan permintaan iklan yang tidak disengaja, disableInitialLoad()
harus dipanggil
sebelum mengaktifkan layanan dan sebelum memanggil display()
.
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Request GPT ads based on events." /> <title>Event-based ad requests</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define the ad slot. googletag .defineSlot("/6355419/Travel", [728, 90], "div-for-slot") .setTargeting("test", "event") .addService(googletag.pubads()); // Disable initial load. // This prevents GPT from automatically fetching ads when display is called. googletag.pubads().disableInitialLoad(); googletag.enableServices(); }); </script> <style></style> </head> <body> <div id="div-for-slot" style="width: 300px; height: 250px"></div> <script> googletag.cmd.push(() => { // Register the ad slot. // An ad will not be fetched until refresh is called. googletag.display("div-for-slot"); }); </script> </body> </html>
Dalam contoh ini, pemuatan awal dinonaktifkan untuk memastikan tidak ada permintaan iklan yang dibuat
dan tidak ada konten iklan yang dirender saat display()
dipanggil. Slot siap
menerima dan menampilkan iklan, tetapi permintaan iklan tidak akan dibuat hingga slot
dimuat ulang.
Muat ulang
Metode PubAdsService.refresh()
digunakan untuk mengisi
satu atau beberapa slot dengan konten iklan baru. Metode ini dapat digunakan pada slot yang belum
memuat konten apa pun (karena disableInitialLoad()
), atau untuk mengganti
konten slot yang sudah terisi. Namun, hanya slot yang telah
yang didaftarkan dengan memanggil display()
memenuhi syarat untuk diperbarui.
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Request GPT ads based on events." /> <title>Event-based ad requests</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define the ad slot. googletag .defineSlot("/6355419/Travel", [728, 90], "div-for-slot") .setTargeting("test", "event") .addService(googletag.pubads()); // Disable initial load. // This prevents GPT from automatically fetching ads when display is called. googletag.pubads().disableInitialLoad(); googletag.enableServices(); }); </script> <style></style> </head> <body> <div id="div-for-slot" style="width: 300px; height: 250px"></div> <button id="showAdButton">Show/Refresh Ad</button> <script> googletag.cmd.push(() => { // Register the ad slot. // An ad will not be fetched until refresh is called. googletag.display("div-for-slot"); // Register click event handler. document.getElementById("showAdButton").addEventListener("click", () => { googletag.cmd.push(() => { googletag.pubads().refresh(); }); }); }); </script> </body> </html>
Dalam contoh yang diubah ini, saat pengguna mengklik "Tampilkan/Muat Ulang Iklan" tombol,
Metode refresh()
dipanggil. Tindakan ini akan memicu permintaan untuk mengambil konten iklan baru
dan memuatnya ke slot terdaftar, yang akan menimpa konten yang sudah ada.
Perhatikan bahwa dalam contoh sebelumnya, metode refresh()
dipanggil tanpa
parameter, yang memiliki efek memuat ulang semua slot iklan terdaftar.
Namun, Anda juga dapat memuat ulang slot iklan tertentu dengan meneruskan array
slot ke metode refresh()
. Lihat Memuat ulang slot iklan
untuk contohnya.
Praktik terbaik
Saat menggunakan refresh()
, ada beberapa praktik terbaik yang harus
dipatuhi.
Jangan memuat ulang terlalu cepat.
Memperbarui slot iklan terlalu cepat dapat menyebabkan permintaan iklan Anda dibatasi. Untuk mencegah hal ini, hindari memuat ulang slot lebih sering dari sekali setiap 30 detik.
Jangan memanggil
clear()
secara tidak perluSaat memuat ulang slot iklan, jangan panggil
PubAdsService.clear()
terlebih dahulu. Hal ini tidak diperlukan, karenarefresh()
menggantikan konten slot yang ditentukan, terlepas dari apakah konten iklan telah dimuat sebelumnya. Segera meneleponclear()
sebelum memanggilrefresh()
hanya akan menambah jumlah waktu slot kosong dapat dilihat oleh pengguna.Hanya memuat ulang slot iklan yang terlihat
Menggunakan
refresh()
untuk mengganti konten slot iklan yang tidak pernah terlihat dapat menurunkan rasio {i>ActiveView<i} Anda secara signifikan. Tujuan ImpressionViewableEvent dapat digunakan untuk menentukan kapan slot iklan menjadi terlihat, seperti yang ditampilkan dalam contoh:googletag.cmd.push(function() { var REFRESH_KEY = 'refresh'; var REFRESH_VALUE = 'true'; googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot') .setTargeting(REFRESH_KEY, REFRESH_VALUE) .setTargeting('test', 'event') .addService(googletag.pubads()); // Number of seconds to wait after the slot becomes viewable. var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60; googletag.pubads().addEventListener('impressionViewable', function(event) { var slot = event.slot; if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) { setTimeout(function() { googletag.pubads().refresh([slot]); }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000); } }); googletag.enableServices(); });