Menghindari Kesalahan Penerapan Umum
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Skenario berikut mewakili beberapa kesalahan paling umum yang diamati saat menerapkan GPT. Meskipun implementasi tersebut mungkin tampak berfungsi baik dengan
GPT, tidak ada jaminan bahwa hal itu akan terus berlanjut di masa mendatang. Dalam
kasus yang paling ekstrem, penerapan ini dapat menyebabkan penayangan iklan rusak dengan cara yang tidak dapat diprediksi.
Penerapan tersebut dianggap sebagai penerapan yang tidak didukung.
Setiap skenario menyertakan pendekatan yang disarankan untuk memperbaiki masalah yang ditampilkan.
Perlu diperhatikan bahwa daftar ini tidak mewakili daftar lengkap potensi masalah,
tetapi diharapkan dapat berfungsi sebagai panduan
yang bermanfaat untuk mengidentifikasi jenis masalah yang mungkin perlu
ditangani.
Selanjutnya, bergantung pada implementasi Anda, Anda mungkin perlu mencari
perubahan tersebut mungkin diperlukan dalam situs Anda.
Kesalahan Umum
Skenario 1: Menggunakan salinan tidak resmi library JavaScript GPT
Deskripsi kasus penggunaan tingkat tinggi |
Menghosting gpt.js, pubads_impl.js, atau library apa pun yang dimuat dari server Anda sendiri, atau
memuat file ini dari sumber tidak resmi.
|
Contoh Cuplikan kode dengan error |
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
|
Cara yang disarankan untuk memperbaiki error |
// Correct: Access these files from a Google domain
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
// Also correct, if using Limited Ads
<script src="https://pagead2.googlesyndication.com/tag/js/gpt.js" async></script>
|
Skenario 2: Mengandalkan pemroses tag skrip gpt.js
Deskripsi kasus penggunaan umum |
Mengasumsikan bahwa GPT API siap dipanggil saat file JavaScript
gpt.js dimuat adalah salah, karena beberapa bagian API disediakan oleh
file pubads_impl.js . Mengandalkan API apa pun dengan cara apa pun (termasuk framework)
dari dalam pemroses peristiwa yang dilampirkan ke tag skrip salah.
|
Contoh Cuplikan kode dengan error |
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
// Incorrect: Attaching a callback to the script's onload event.
tag.onload = callback;
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(tag, node);
|
Cara yang disarankan untuk memperbaiki error |
// Make sure that googletag.cmd exists.
window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
// Correct: Queueing the callback on the command queue.
googletag.cmd.push(callback);
|
Penjelasan / deskripsi perbaikan |
googletag.cmd mengelola daftar perintah yang akan dijalankan segera setelah GPT
sudah siap. Ini adalah cara yang benar untuk memastikan callback Anda dijalankan saat GPT telah dimuat.
|
Skenario 3: Memeriksa objek googletag untuk mengetahui apakah GPT sudah siap
Deskripsi kasus penggunaan tingkat tinggi |
Karena GPT API mungkin belum siap saat file JavaScript gpt.js dimuat
atau saat objek googletag ditentukan, periksa objek tersebut untuk mengetahui apakah
GPT API yang tersedia tidak dapat diandalkan.
|
Contoh Cuplikan kode dengan error |
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
functionProcessingGPT();
}
|
Cara yang disarankan untuk memperbaiki error |
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
functionProcessingGPT();
}
|
Penjelasan / deskripsi perbaikan |
GPT akan mengisi flag boolean
googletag.apiReady segera setelah
API siap dipanggil sehingga Anda dapat membuat pernyataan yang andal.
|
Skenario 4: Mengandalkan sintaksis kode yang di-obfuscate
Deskripsi kasus penggunaan umum |
Jika Anda mengandalkan sintaksis yang tepat dari kode library GPT yang diminifikasi, Anda hampir
pasti mengalami kerusakan. Harap batasi penggunaan Anda pada API yang didokumentasikan dalam Panduan Referensi API, karena kami terus berubah
cara kerja internal GPT untuk peningkatan yang konstan.
Misalnya, persyaratan umum adalah mendeteksi kapan PubAdsService dimuat sepenuhnya
untuk memanggil refresh() .
|
Contoh Cuplikan kode dengan error |
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
functionProcessingGPT();
}
|
Cara yang disarankan untuk memperbaiki error |
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
functionProcessingGPT();
}
|
Penjelasan/deskripsi perbaikan |
Hanya API publik yang dapat diandalkan. Dalam kasus mendeteksi apakah PubAdsService
dimuat sepenuhnya, kita memiliki nilai boolean
googletag.pubadsReady.
|
Skenario 5: Menutupi fungsi atau variabel GPT
Deskripsi kasus penggunaan umum |
Kasus penggunaan berdasarkan penggantian fungsi atau variabel apa pun yang digunakan oleh GPT dapat rusak kapan saja
karena ini bukan kasus penggunaan yang didukung. Perubahan pengaturan waktu di internal GPT dapat menampilkan
jenis perilaku yang salah ini dengan kerusakan.
|
Contoh Cuplikan kode dengan error |
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
|
Cara yang disarankan untuk memperbaiki error |
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];
|
Skenario 6: Kesalahan pengurutan panggilan ke GPT
Deskripsi kasus penggunaan tingkat tinggi |
Kondisi perlombaan dapat menyebabkan kerusakan seiring dengan berkembangnya internal GPT. Pernyataan
serangkaian pernyataan yang berurutan yang fungsional karena pengaturan waktu tertentu dalam eksekusi
mungkin tidak tetap beroperasi pada masa mendatang.
|
Contoh Cuplikan kode dengan error |
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
|
Cara yang disarankan untuk memperbaiki error |
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
|
Penjelasan/deskripsi perbaikan |
Hindari kondisi race dengan memastikan untuk mematuhi pengaturan waktu GPT yang biasa. Contoh valid
urutan parsial meliputi:
-
Tentukan-Aktifkan-Display
- Menentukan setelan tingkat halaman
- Menentukan slot
- enableServices()
- Menampilkan slot
-
Enable-Define-Display
- Menentukan setelan tingkat halaman
- enableServices()
- Menentukan slot
- Slot layar
|
Skenario 7: Menyalahgunakan penutupan dan pencakupan variabel JavaScript
Deskripsi kasus penggunaan tingkat tinggi |
Asumsi yang salah tentang cakupan variabel JavaScript, dan nilai variabel yang diambil dalam fungsi yang diteruskan ke googletag.cmd.push .
|
Contoh Cuplikan kode dengan error |
// Incorrect: Variable x is declared outside the anonymous function
// but referenced within it.
for (var x = 0; x < slotCount; x++) {
window.googletag.cmd.push(
function(){
// If GPT is not yet loaded, this code will be executed subsequently when
// the command queue is processed. Every queued function will use the last value
// assigned to x (most likely slotCount).
// This is because the function closure captures the reference to x,
// not the current value of x.
window.googletag.display(slot[x]);
})
}
}
|
Cara yang disarankan untuk memperbaiki error |
window.googletag.cmd.push(
function(){
// Correct: We both declare and reference x inside the context of the function.
for (var x = 0; x < slotCount; x++){
window.googletag.display(slot[x]);
}
}
)
|
Penjelasan / deskripsi perbaikan |
Pada JavaScript, closure akan menangkap variabel dengan referensi, bukan berdasarkan nilai. Artinya,
jika variabel ditetapkan ulang, nilai barunya akan digunakan saat penutupan
fungsi yang menangkapnya kemudian dieksekusi. Dengan demikian, perilaku kode dalam penutupan
dapat berubah bergantung pada apakah callback segera dieksekusi atau ditunda.
Dalam kasus GPT yang dimuat secara asinkron, bergantung pada seberapa cepat GPT memuat callback di antrean perintah, callback tersebut dapat langsung dieksekusi atau tidak. Di
contoh ini mengubah perilaku perintah dalam antrean.
Untuk menghindari masalah, kode harus ditulis tanpa asumsi bahwa fungsi yang ditempatkan di antrean perintah akan segera dieksekusi, dan Anda harus berhati-hati dengan aturan cakupan JavaScript.
|
Skenario 8: Memindahkan penampung slot dalam DOM setelah memanggil tampilan
Deskripsi kasus penggunaan umum |
Memindahkan atau memasukkan penampung slot di DOM setelah memanggil tampilan dapat menyebabkan
perubahan posisi/geometri yang tidak diinginkan
dan perilaku yang tidak dapat diprediksi di GPT.
|
Contoh Cuplikan kode dengan error |
// Incorrect: Moving slot containers after calling display
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
...
// Inserting another element before the slot container, pushing the slot container down the page.
document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
|
Cara yang disarankan untuk memperbaiki error |
// Correct: Make any DOM order changes before calling display
document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
...
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
|
Skenario 9: Menutupi API browser
Deskripsi kasus penggunaan umum |
API browser yang ditimpa (alias monkey patching, polyfilling) tidak didukung di GPT.
Praktik ini berpotensi merusak skrip pihak ketiga seperti GPT dengan cara yang tidak diharapkan.
|
Contoh Cuplikan kode dengan error |
// Incorrect: Overwriting window.fetch
const { fetch: originalFetch } = window;
window.fetch = (...args) => {
console.log('Fetching!');
return originalFetch(resource, config);
};
|
Cara yang disarankan untuk memperbaiki error |
// Correct: Avoid making changes to browser APIs.
// If you need custom logic, consider leaving the browser API intact.
const myFetch = (...args) => {
console.log('Fetching!');
return window.fetch(...args);
}
|
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-25 UTC.
[null,null,["Terakhir diperbarui pada 2025-07-25 UTC."],[[["\u003cp\u003eAvoid unofficial copies of GPT JavaScript libraries, always access them from an official Google domain.\u003c/p\u003e\n"],["\u003cp\u003eUtilize \u003ccode\u003egoogletag.cmd.push\u003c/code\u003e to queue functions and ensure they execute when GPT is ready, rather than relying on script tag listeners or checking the \u003ccode\u003egoogletag\u003c/code\u003e object directly.\u003c/p\u003e\n"],["\u003cp\u003eStrictly adhere to the documented GPT API and refrain from relying on obfuscated code or overwriting any GPT functions or variables to prevent breakages.\u003c/p\u003e\n"],["\u003cp\u003eMaintain the correct order of GPT calls, like defining page-level settings and slots before enabling services and displaying ads, to avoid race conditions.\u003c/p\u003e\n"],["\u003cp\u003eBe mindful of JavaScript variable scoping and closures, especially when using \u003ccode\u003egoogletag.cmd.push\u003c/code\u003e, to prevent unexpected behavior due to delayed execution.\u003c/p\u003e\n"],["\u003cp\u003eEnsure slot containers are positioned correctly in the DOM before calling \u003ccode\u003edisplay\u003c/code\u003e to avoid reflows and unpredictable rendering.\u003c/p\u003e\n"],["\u003cp\u003eRefrain from overwriting browser APIs, as it can negatively impact the functionality of third-party scripts like GPT.\u003c/p\u003e\n"]]],["The content outlines unsupported methods of implementing GPT (Google Publisher Tag) that may cause unpredictable ad serving issues. Key actions to avoid include: using unofficial GPT JavaScript libraries, relying on script tag listeners or the `googletag` object to determine API readiness, using obfuscated code syntax, overwriting GPT functions/variables, mis-ordering GPT calls, and misusing JavaScript variable scoping. Correct implementations involve using Google-hosted libraries, leveraging `googletag.cmd.push`, respecting API timing, and modifying the DOM before calling display. Also, avoid overwriting browser APIs.\n"],null,[]]