Skenario berikut mewakili beberapa kesalahan paling umum yang diamati saat menerapkan GPT. Meskipun penerapan tersebut mungkin berfungsi dengan baik dengan GPT versi saat ini, tidak ada jaminan bahwa penerapan tersebut akan terus berfungsi dengan baik di masa mendatang. Dalam kasus yang paling ekstrem, penerapan ini dapat menyebabkan penayangan iklan terganggu dengan cara yang tidak dapat diprediksi. Implementasi dianggap sebagai implementasi 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 menjadi panduan bermanfaat untuk mengidentifikasi jenis masalah yang mungkin perlu ditangani.
Selain itu, bergantung pada penerapannya, Anda mungkin perlu mencari di semua tempat di mana perubahan tersebut mungkin diperlukan dalam situs Anda.
Kesalahan Umum
Skenario 1: Menggunakan salinan tidak resmi library JavaScript GPT
| Deskripsi kasus penggunaan umum | 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 async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> // Also correct, if using Limited Ads <script async src="https://pagead2.googlesyndication.com/tag/js/gpt.js"></script> |
Skenario 2: Mengandalkan pemroses tag skrip gpt.js
| Deskripsi kasus penggunaan umum |
Asumsikan bahwa GPT API siap dipanggil saat file JavaScript
gpt.js dimuat adalah salah, karena beberapa bagian API disediakan oleh file
pubads_impl.js. Oleh karena itu, mengandalkan API dengan cara apa pun (termasuk framework) dari dalam pemroses peristiwa yang disertakan pada tag skrip merupakan tindakan yang 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 menyimpan daftar perintah yang akan dijalankan segera setelah GPT
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 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 umum |
Jika Anda mengandalkan sintaksis yang tepat dari kode library GPT yang diminifikasi, hampir pasti Anda akan mengalami kerusakan. Harap batasi penggunaan Anda ke API yang didokumentasikan dalam Panduan Referensi API, karena kami terus
mengubah cara kerja internal GPT untuk peningkatan berkelanjutan. Misalnya, persyaratan umumnya 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 bisa diandalkan. Dalam kasus untuk mendeteksi apakah PubAdsService dimuat sepenuhnya, kita memiliki nilai boolean googletag.pubadsReady. |
Skenario 5: Menimpa fungsi atau variabel GPT
| Deskripsi kasus penggunaan umum | Kasus penggunaan yang didasarkan pada penimpaan fungsi atau variabel apa pun yang digunakan oleh GPT dapat rusak kapan saja karena ini bukan kasus penggunaan yang didukung. Perubahan waktu di internal GPT dapat menampilkan perilaku yang tidak benar semacam ini melalui 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 kerusakan saat bagian internal GPT berkembang. Rangkaian pernyataan yang salah diurutkan dan berfungsi karena waktu tertentu dalam eksekusi mungkin tidak akan 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 pengurutan parsial yang valid meliputi:
|
Skenario 7: Penyalahgunaan penutupan dan cakupan variabel JavaScript
| Deskripsi kasus penggunaan umum |
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 |
Dalam JavaScript, {i>closure<i} merekam variabel berdasarkan referensi, bukan berdasarkan nilai. Artinya, jika sebuah variabel ditetapkan ulang, nilai barunya akan digunakan saat fungsi ditutup yang mengambilnya nanti. Dengan demikian, perilaku kode dalam penutupan dapat berubah bergantung pada apakah callback dieksekusi segera atau tertunda. Dalam kasus GPT yang dimuat secara asinkron, bergantung pada seberapa cepat GPT memuat callback pada antrean perintah dapat langsung dijalankan atau tidak. Dalam contoh di atas, ini mengubah perilaku perintah yang diantrekan. Untuk menghindari masalah, kode harus ditulis tanpa asumsi bahwa fungsi yang ditempatkan pada antrean perintah akan langsung dijalankan, dan harus berhati-hati sehubungan dengan aturan pencakupan JavaScript. |
Skenario 8: Memindahkan penampung slot dalam DOM setelah memanggil tampilan
| Deskripsi kasus penggunaan umum | Memindahkan atau memasukkan penampung slot dalam 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");
|