Evitare errori comuni di implementazione

Gli scenari seguenti rappresentano alcuni degli errori più comuni osservati durante l'implementazione di GPT. Sebbene queste implementazioni possano sembrare compatibili con la versione attuale di GPT, non è garantito che continueranno a farlo in futuro. Nei casi più estremi, queste implementazioni possono causare l'interruzione della pubblicazione degli annunci in modi imprevedibili. Sono considerate implementazioni non supportate.

Ogni scenario include un approccio suggerito per risolvere il problema mostrato.

Tieni presente che questo elenco non rappresenta un elenco completo dei potenziali problemi, ma dovrebbe fungere da guida utile per identificare i tipi di problemi che potrebbero dover essere risolti.

Inoltre, a seconda dell'implementazione, potrebbe essere necessario cercare tutte le posizioni all'interno del sito in cui queste modifiche possono essere necessarie.

Errori comuni

Scenario 1: utilizzo di copie non ufficiali delle librerie JavaScript di GPT

Descrizione generale del caso d'uso Hosting di gpt.js, pubads_impl.js o di librerie che caricano dai tuoi server oppure caricamento di questi file da una fonte non ufficiale.
Esempio di snippet di codice con errore
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
Metodi suggeriti per correggere l'errore
// 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>

Scenario 2: utilizzo dei listener di tag script gpt.js

Descrizione generale del caso d'uso Supponendo che l'API GPT sia pronta per essere chiamata quando viene caricato il file JavaScript gpt.js, è errato, in quanto alcune parti dell'API sono fornite dal file pubads_impl.js. Pertanto, non è corretto fare affidamento in alcun modo (inclusi i framework) sull'API all'interno dei listener di eventi associati al tag script.
Esempio di snippet di codice con errore
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);
Metodi suggeriti per correggere l'errore
// 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);
Spiegazione / descrizione della correzione googletag.cmd gestisce un elenco di comandi che verranno eseguiti non appena il tag GPT sarà pronto. Questo è il modo corretto per assicurarti che il callback venga eseguito quando il GPT è stato caricato.

Scenario 3: controllo dell'oggetto googletag per sapere se GPT è pronto

Descrizione generale del caso d'uso Poiché l'API GPT potrebbe non essere pronta quando viene caricato il file JavaScript gpt.js o quando viene definito l'oggetto googletag, il controllo dell'oggetto per verificare se l'API GPT è disponibile non è affidabile.
Esempio di snippet di codice con errore
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
Metodi suggeriti per correggere l'errore
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
Spiegazione / descrizione della correzione GPT completerà il flag booleano googletag.apiReady non appena l'API sarà pronta per essere chiamata, in modo che tu possa creare asserzioni affidabili.

Scenario 4: utilizzo della sintassi del codice offuscato

Descrizione generale del caso d'uso Se ti affidi alla sintassi esatta del codice della libreria GPT minimizzato, quasi sicuramente riscontrerai interruzioni. Limita il tuo utilizzo all'API indicata nella Guida di riferimento API, dal momento che modifichiamo continuamente il funzionamento interno di GPT per miglioramenti costanti.
Ad esempio, un requisito comune è rilevare quando PubAdsService è completamente caricato per poter chiamare refresh().
Esempio di snippet di codice con errore
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
Metodi suggeriti per correggere l'errore
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
Spiegazione / descrizione della correzione È possibile fare affidamento solo sull'API pubblica. Nel caso in cui venga rilevato se PubAdsService è completamente caricato, abbiamo un valore booleano googletag.pubadsReady.

Scenario 5: sovrascrittura di qualsiasi funzione o variabile di GPT

Descrizione generale del caso d'uso I casi d'uso basati sulla sovrascrittura di qualsiasi funzione o variabile utilizzata da GPT potrebbero interrompere in qualsiasi momento, poiché non si tratta di un caso d'uso supportato. Le modifiche apportate alla temporizzazione nei file interni di GPT potrebbero mettere in evidenza questo tipo di comportamento non corretto mediante interruzioni.
Esempio di snippet di codice con errore
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
Metodi suggeriti per correggere l'errore
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

Scenario 6: ordine errato delle chiamate a GPT

Descrizione generale del caso d'uso Le condizioni di razza potrebbero creare interruzioni man mano che i componenti interni di GPT si evolvono. Un insieme di istruzioni ordinato in modo errato che funzionavano a causa di tempistiche specifiche nell'esecuzione potrebbe non rimanere operativo in futuro.
Esempio di snippet di codice con errore
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
Metodi suggeriti per correggere l'errore
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
Spiegazione / descrizione della correzione Evita le condizioni di gara assicurandoti di rispettare la tempistica consueta di GPT. Esempi di ordinamenti parziali validi includono:
  • Definisci-Abilita-Display
    1. Definisci le impostazioni a livello di pagina
    2. Definisci slot
    3. enableServices()
    4. Aree di visualizzazione
  • Abilita-Definisci-Display
    1. Definisci le impostazioni a livello di pagina
    2. enableServices()
    3. Definisci slot
    4. Aree di visualizzazione

Scenario 7: uso improprio di chiusure e definizione dell'ambito delle variabili JavaScript

Descrizione generale del caso d'uso Ipotesi errate sull'ambito delle variabili JavaScript e valore delle variabili acquisite nella funzione passata a googletag.cmd.push.
Esempio di snippet di codice con errore
// 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]);
  })
 }
}
Metodi suggeriti per correggere l'errore
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]);
  }
 }
)
Spiegazione / descrizione della correzione

In JavaScript, le chiusure acquisiscono le variabili per riferimento anziché per valore. Ciò significa che se una variabile viene riassegnata, il nuovo valore verrà utilizzato al momento dell'esecuzione della chiusura della funzione acquisita. Di conseguenza, il comportamento del codice nella chiusura può cambiare a seconda che il callback venga eseguito immediatamente o ritardato.

Nel caso del GPT caricato in modo asincrono, a seconda della velocità con cui GPT carica, i callback nella coda di comando potrebbero essere eseguiti immediatamente o meno. Nell'esempio precedente, ciò modifica il comportamento dei comandi in coda.

Per evitare problemi, il codice deve essere scritto senza presupporre che le funzioni inserite nella coda di comando vengano eseguite immediatamente e occorre prestare attenzione alle regole di definizione dell'ambito di JavaScript.

Scenario 8: spostamento dei container slot all'interno del DOM dopo la chiamata del display

Descrizione generale del caso d'uso Lo spostamento o l'inserimento di container slot nel DOM dopo la chiamata al display può causare un adattamento dinamico del contenuto indesiderato e comportamenti imprevedibili in GPT.
Esempio di snippet di codice con errore
// 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"));
Metodi suggeriti per correggere l'errore
// 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");