Evitare errori comuni di implementazione

I seguenti scenari rappresentano alcuni degli errori più comuni osservati quando implementando GPT. Sebbene tali implementazioni possano sembrare efficaci con lo stato attuale di GPT, non è garantito che continueranno a farlo anche in futuro. Nella nella maggior parte dei casi estremi, queste implementazioni possono causare interruzioni imprevedibili della pubblicazione di annunci. Sono considerate implementazioni non supportate.

Ogni scenario include un approccio suggerito per la risoluzione del problema mostrato.

Tieni presente che questo elenco non rappresenta un elenco completamente esaustivo di potenziali problemi. ma che serva da guida utile per identificare i tipi di problemi che potrebbero richiedere essere gestiti.

Inoltre, a seconda della tua implementazione, potrebbe essere necessario cercare tutti i punti in cui tali modifiche potrebbero essere necessarie all'interno del tuo sito.

Errori comuni

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

Descrizione del caso d'uso generale Hosting di gpt.js, pubads_impl.js o qualsiasi libreria caricata dai tuoi server oppure caricando 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 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>

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

Descrizione del caso d'uso generale Supponendo che l'API GPT sia pronta per essere chiamata quando il file JavaScript Il caricamento di gpt.js non è corretto perché alcune parti dell'API sono fornite dalla pubads_impl.js file. Affidarsi in qualsiasi modo (inclusi i framework) all'API dai listener di eventi associati al tag script non sono quindi corretti.
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 GPT è pronto. Questo è il modo corretto per assicurarti che il callback venga eseguito dopo il caricamento di GPT.

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

Descrizione del caso d'uso generale Poiché l'API GPT potrebbe non essere pronta quando viene caricato il file JavaScript gpt.js, o quando viene definito l'oggetto googletag, controllando l'oggetto per vedere 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 è pronta per essere chiamata, così puoi fare asserzioni affidabili.

Scenario 4: utilizzo della sintassi del codice offuscata

Descrizione del caso d'uso generale Se ti affidi alla sintassi esatta del codice della libreria GPT minimizzata, quasi che subiranno sicuramente rotture. Limita il tuo utilizzo all'API documentata nella Guida di riferimento API, poiché apportiamo modifiche continue il funzionamento interno di GPT per migliorare continuamente.
Ad esempio, un requisito comune è rilevare quando PubAdsService viene caricato completamente per 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. In caso di rilevamento di se PubAdsService è completamente caricato, abbiamo un valore booleano googletag.pubadsReady.

Scenario 5: sovrascrittura di qualsiasi funzione o variabile di GPT

Descrizione del caso d'uso generale I casi d'uso basati sulla sovrascrittura di qualsiasi funzione o variabile utilizzata da GPT potrebbero interrompere in qualsiasi momento perché non è un caso d'uso supportato. Le modifiche alle tempistiche nei componenti interni di GPT possono rivelare questo comportamento errato per malfunzionamenti.
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 del caso d'uso generale Le condizioni di gara possono creare malfunzionamenti con l’evoluzione dei componenti interni di GPT. Un errore un insieme ordinato di istruzioni operative a causa di tempistiche specifiche di esecuzione potrebbero non rimanere operativi 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 gare d'effetto rispettando le tempistiche normali di GPT. Esempio valido gli ordini parziali includono:
  • Definisci-Attiva-Display
      .
    1. Definisci le impostazioni a livello di pagina
    2. Definisci gli slot
    3. enableServices()
    4. Slot di visualizzazione
  • Attiva-Definisci-Display
      .
    1. Definisci le impostazioni a livello di pagina
    2. enableServices()
    3. Definisci gli slot
    4. Slot di visualizzazione

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

Descrizione del caso d'uso generale Ipotesi errate sulla definizione dell'ambito delle variabili JavaScript e sul valore delle variabili acquisito 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 suo nuovo valore verrà utilizzato quando la funzione che lo ha acquisito in un secondo momento. Il comportamento del codice nella fase di chiusura può variare a seconda che il callback venga eseguito immediatamente o ritardato.

Nel caso di GPT caricato in modo asincrono, a seconda della velocità di caricamento del tag GPT i callback sulla coda dei comandi potrebbero essere eseguiti immediatamente o meno. Nella precedente Ad esempio, questo modifica il comportamento dei comandi in coda.

Per evitare problemi, il codice deve essere scritto senza il presupposto che funzioni posta nella coda dei comandi, verrà eseguita immediatamente e occorre prestare attenzione riguarda le regole di definizione dell'ambito di JavaScript.

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

Descrizione del caso d'uso generale Lo spostamento o l'inserimento dei container di slot nel DOM dopo aver chiamato il display può causare modifica del flusso 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");