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 mencakup pendekatan yang disarankan untuk memperbaiki masalah yang ditampilkan.
Perhatikan bahwa daftar ini tidak mewakili daftar lengkap potensi masalah,
tetapi diharapkan dapat berfungsi sebagai panduan yang berguna untuk mengidentifikasi jenis masalah yang mungkin perlu
diatasi.
Selain itu, bergantung pada penerapan Anda, Anda mungkin perlu mencari semua tempat yang mungkin memerlukan perubahan tersebut 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 dimuatnya 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 |
Dengan asumsi bahwa GPT API siap dipanggil saat file JavaScript
gpt.js yang dimuat 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 dimuat.
|
Skenario 3: Memeriksa objek googletag untuk mengetahui apakah GPT sudah siap
| Deskripsi kasus penggunaan umum |
Karena GPT API mungkin belum siap saat file JavaScript gpt.js dimuat atau saat objek googletag ditentukan, memeriksa objek tersebut untuk melihat apakah GPT API 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 tingkat tinggi |
Jika mengandalkan sintaksis yang tepat dari kode library GPT yang diminifikasi, Anda hampir
pasti akan 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 hal mendeteksi apakah PubAdsService
dimuat sepenuhnya, kita memiliki nilai boolean
googletag.pubadsReady.
|
Skenario 5: Menutupi fungsi atau variabel GPT
| Deskripsi kasus penggunaan tingkat tinggi |
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 umum |
Kondisi race dapat menyebabkan gangguan karena internal GPT berkembang. 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 mengikuti waktu GPT yang biasa. Contoh pengurutan parsial
yang valid meliputi:
-
Define-Enable-Display
- Menentukan setelan tingkat halaman
- Menentukan slot
- enableServices()
- Menampilkan slot
-
Aktifkan-Definisikan-Display
- Menentukan setelan tingkat halaman
- enableServices()
- Menentukan slot
- Menampilkan slot
|
Skenario 7: Menyalahgunakan penutupan dan pencakupan variabel JavaScript
| Deskripsi kasus penggunaan umum |
Asumsi yang salah tentang pencakupan variabel JavaScript, dan nilai variabel
ditangkap 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 |
Di JavaScript, penutupan mengambil variabel berdasarkan 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 kode berfungsi
yang ditempatkan pada antrean perintah akan segera
dieksekusi, dan harus sangat berhati-hati
mengenai aturan pencakupan JavaScript.
|
Skenario 8: Memindahkan penampung slot dalam DOM setelah memanggil tampilan
| Deskripsi kasus penggunaan tingkat tinggi |
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: Menimpa API browser
| Deskripsi kasus penggunaan tingkat tinggi |
Penimpaan API browser (alias patching monyet, 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);
}
|
