Menghindari Kesalahan Penerapan Umum

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. Di kolom dalam kasus yang paling ekstrim, penerapan ini dapat menyebabkan penayangan iklan terganggu dengan cara yang tidak dapat diprediksi. Model tersebut dianggap sebagai penerapan yang tidak didukung.

Setiap skenario mencakup 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 umum 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 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, 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 penuh di 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: Menimpa fungsi atau variabel GPT

Deskripsi kasus penggunaan umum Kasus penggunaan berdasarkan penimpaan fungsi atau variabel yang digunakan oleh GPT dapat mengalami gangguan kapan saja karena ini bukan kasus penggunaan yang didukung. Perubahan waktu di internal GPT mungkin memunculkan hal ini jenis perilaku yang tidak tepat akibat 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 valid urutan parsial meliputi:
  • Tentukan-Aktifkan-Display
    1. Menentukan setelan tingkat halaman
    2. Menentukan slot
    3. enableServices()
    4. Slot layar
  • Enable-Define-Display
    1. Menentukan setelan tingkat halaman
    2. enableServices()
    3. Menentukan slot
    4. Slot layar

Skenario 7: Menyalahgunakan penutupan dan cakupan 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

Pada JavaScript, closure akan menangkap variabel dengan referensi, bukan berdasarkan nilai. Artinya jika suatu variabel ditetapkan ulang, maka nilai barunya akan digunakan penutupan yang menangkapnya dan 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 pada antrean perintah bisa 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 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");