Sık Yapılan Uygulama Hatalarından Kaçınma

Aşağıdaki senaryolarda, projenizle ilgili sürerken gözlemlenen en yaygın hatalardan hakkında daha fazla bilgi edinin. Bu tür uygulamalar GPT'nin geçerli sürümüyle düzgün çalışıyor gibi görünse de, gelecekte de böyle çalışmaları garanti edilmez. Bu uygulamalar, en uç durumlarda reklam sunumunun öngörülemez şekillerde kesintiye uğramasına neden olabilir. Bunlar desteklenmeyen uygulamalar olarak kabul edilir.

Her senaryoda, gösterilen sorunun düzeltilmesi için önerilen bir yaklaşım yer alır.

Bu listenin potansiyel sorunların tam bir listesini temsil etmediğini unutmayın. Ancak ekibinizin en sık ihtiyaç duyabileceği sorun türlerini ele alınmalıdır.

Ayrıca, uygulamanıza bağlı olarak, sitenizde bu tür değişikliklerin gerekli olabileceği tüm yerleri aramanız gerekebilir.

Sık Yapılan Yanlışlar

1. Senaryo: GPT JavaScript kitaplıklarının resmi olmayan kopyalarını kullanma

Genel kullanım alanı açıklaması gpt.js, pubads_impl.js veya kendi sunucularınızdan yükledikleri kitaplıkları barındırma ya da bu dosyaları resmi olmayan bir kaynaktan yüklüyor.
Hata içeren örnek kod snippet'i
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
Hatayı düzeltmek için önerilen yöntemler
// 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>

2. Senaryo: gpt.js komut dosyası etiket işleyicilerinden yararlanma

Genel kullanım alanı açıklaması JavaScript dosyası çalıştırıldığında GPT API'nin çağrılmaya hazır olduğunu varsaymak, gpt.js yüklenmesi yanlış, çünkü API'nin bazı bölümleri pubads_impl.js dosya API'ye herhangi bir şekilde (çerçeveler dahil) güvenme etkinlik işleyicilerin içinden eklenmiş olması gerekir.
Hata içeren örnek kod snippet'i
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);
Hatayı düzeltmek için önerilen yollar
// 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);
Düzeltmenin açıklaması / açıklaması googletag.cmd, GPT'yle hemen çalıştırılacak komutların listesini tutar hazır. GPT yüklendiğinde geri çağırma işlevinizin çalıştırılmasını sağlamanın doğru yolu budur.

Senaryo 3: GPT'nin hazır olup olmadığını öğrenmek için googletag nesnesini kontrol etme

Karmaşık kullanım alanı açıklaması gpt.js JavaScript dosyası yüklenirken GPT API hazır olmayabilir. googletag nesnesi tanımlı olduğunda, bu nesneyi kontrol ederek GPT API'si güvenilir değildir.
Hatalı kod snippet'i örneği
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
Hatayı düzeltmek için önerilen yollar
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
Düzeltmenin açıklaması GPT, API çağrılmaya hazır olduğunda doğru beyanlarda bulunabilmeniz için googletag.apiReady boole işaretini doldurur.

Senaryo 4: Kodu karartılmış söz dizimine güvenme

Genel kullanım alanı açıklaması Sıkıştırılmış GPT kitaplığı kodunun hassas söz dizimine güveniyorsanız neredeyse kesinlikle kesintilerle karşılaşırsınız. Sürekli iyileştirmeler için GPT'nin işleyişini sürekli olarak değiştirdiğimizden, lütfen API kullanımınızı API Referans Kılavuzu'nda belgelenen API ile sınırlandırın.
. Örneğin, PubAdsService'in tam olarak yüklendiği zamanı tespit etmek, refresh() numaralı telefonu aramak için sipariş verin.
Hatalı kod snippet'i örneği
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
Hatayı düzeltmek için önerilen yollar
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
Düzeltmenin açıklaması / açıklaması Yalnızca herkese açık API'ye güvenilebilir. PubAdsService'in tam olarak yüklenip yüklenmediğini algılama amacıyla googletag.pubadsReady adlı bir boole değeri kullanırız.

5. senaryo: GPT'nin herhangi bir işlevinin veya değişkeninin üzerine yazma

Genel kullanım alanı açıklaması GPT tarafından kullanılan herhangi bir işlevin veya değişkenin üzerine yazmaya dayalı kullanım alanları her an bozulabilir desteklenmediğinden emin olun. GPT'nin dahili yapısında yapılan zamanlama değişiklikleri, bu tür yanlış davranışları kesintilerle ortaya çıkarabilir.
Hata içeren örnek kod snippet'i
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
Hatayı düzeltmek için önerilen yollar
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

6. Senaryo: GPT'ye yapılan çağrıları yanlış sıralama

Karmaşık kullanım alanı açıklaması GPT'nin dahili bileşenleri geliştikçe yarış koşulları kesintilere neden olabilir. Yürütmedeki belirli zamanlamalar nedeniyle işlevsel olan ancak yanlış sıralanmış bir ifade grubu gelecekte çalışmayabilir.
Hatalı kod snippet'i örneği
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
Hatayı düzeltmek için önerilen yollar
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
Düzeltmenin açıklaması GPT'nin normal zamanlamasına uyum sağlayarak yarış şartlarından kaçının. Geçerli kısmi sipariş örnekleri:
  • Ekranı-Tanımlama-Etkinleştir
    1. Sayfa düzeyinde ayarları tanımlama
    2. Slot tanımlama
    3. enableServices()
    4. Görüntülü reklam alanları
  • Ekranı-Tanımlama-Etkinleştir
    1. Sayfa düzeyinde ayarları tanımlama
    2. enableServices()
    3. Slotları tanımlama
    4. Ekran yuvaları

7. Senaryo: Kapanışlar ve JavaScript değişken kapsamı belirlemeyi hatalı kullanma

Karmaşık kullanım alanı açıklaması JavaScript değişken kapsamı ve değişkenlerin değeri hakkında yanlış varsayımlar googletag.cmd.push parametresine geçirilen işlevde yakalandı.
Hata içeren örnek kod snippet'i
// 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]);
  })
 }
}
Hatayı düzeltmek için önerilen yollar
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]);
  }
 }
)
Düzeltmenin açıklaması

JavaScript'te, kapanışlar değişkenleri değere göre değil referansa göre yakalar. Bunun anlamı şudur: bir değişken yeniden atanırsa, bu durumda fonksiyon yakalanan kapatma işlemi daha sonra yürütülür. Bu nedenle, geri çağırma işlevinin hemen mi yoksa gecikmeli mi yürütüldüğüne bağlı olarak, kapatmadaki kodun davranışı değişebilir.

Eşzamansız olarak yüklenen GPT'de, GPT'nin ne kadar hızlı yükleneceğine bağlı olarak komut kuyruğundaki geri çağırma işlevleri hemen yürütülebilir veya yürütülmeyebilir. Önceki bu da sıraya alınan komutların davranışını değiştirir.

Herhangi bir sorun yaşamamak için kod, komut kuyruğuna yerleştirilen işlevlerin hemen yürütüleceği varsayımı olmadan yazılmalı ve JavaScript'in kapsam kurallarına dikkat edilmelidir.

Senaryo 8: Gösterim çağrısından sonra slot kapsayıcılarını DOM içinde taşıma

Karmaşık kullanım alanı açıklaması Ekranı çağırdıktan sonra alan kapsayıcılarını DOM'ye taşımak veya eklemek istenmeyen yeniden düzenleme ve öngörülemeyen davranışlara neden olur.
Hatalı kod snippet'i örneği
// 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"));
Hatayı düzeltmek için önerilen yollar
// 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");

9. senaryo: Tarayıcı API'lerinin üzerine yazma

Karmaşık kullanım alanı açıklaması GPT'de tarayıcı API'lerinin üzerine yazma (diğer adıyla maymun yamalama, çoklu doldurma) desteklenmez. Bu uygulama, GPT gibi üçüncü taraf komut dosyalarını beklenmedik şekillerde bozma potansiyeline sahiptir.
Hatalı kod snippet'i örneği
// Incorrect: Overwriting window.fetch
const { fetch: originalFetch } = window;
window.fetch = (...args) => {
 console.log('Fetching!');
 return originalFetch(resource, config);
};
Hatayı düzeltmek için önerilen yollar
// 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);
}