Cómo evitar errores comunes de implementación

Las siguientes situaciones representan algunos de los errores más comunes que se observan cuando se implementa GPT. Si bien estas implementaciones pueden parecer funcionar bien con el versión de GPT, no se garantiza que seguirán haciéndolo en el futuro. En los casos más extremos, estas implementaciones pueden hacer que la publicación de anuncios falle de forma impredecible. Se consideran implementaciones no admitidas.

Cada situación incluye un enfoque sugerido para solucionar el problema que se muestra.

Ten en cuenta que esta lista no es una lista completamente exhaustiva de problemas potenciales, pero se espera que sirva como una guía útil para identificar los tipos de problemas que pueden debe abordarse.

Además, según su implementación, quizás necesite buscar todos los lugares donde estos cambios pueden ser necesarios en su sitio.

Errores comunes

Situación 1: Uso de copias no oficiales de bibliotecas de JavaScript de GPT

Descripción del caso de uso de alto nivel Alojar gpt.js, pubads_impl.js o las bibliotecas que carguen desde tus propios servidores cargar estos archivos desde una fuente no oficial.
Ejemplo de fragmento de código con error 
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
Formas sugeridas de corregir el 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>

Situación 2: Uso de los objetos de escucha de la etiqueta de secuencia de comandos de gpt.js

Descripción del caso de uso de alto nivel Suponer que la API de GPT está lista para que se la llame cuando se carga el archivo JavaScript gpt.js es incorrecto, ya que el archivo pubads_impl.js proporciona algunas partes de la API. Confiar en la API de cualquier manera (incluidos los frameworks) de los objetos de escucha de eventos adjuntos a la etiqueta de la secuencia de comandos es incorrecto.
Ejemplo de fragmento de código con 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);
Formas sugeridas de corregir el 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);
Explicación o descripción de la corrección googletag.cmd mantiene una lista de comandos que se ejecutarán en cuanto GPT esté listo. Esta es la forma correcta de asegurarte de que se ejecute la devolución de llamada cuando se cargue el GPT.

Situación 3: Cómo verificar el objeto googletag para saber si GPT está listo

Descripción del caso de uso de alto nivel Dado que es posible que la API de GPT no esté lista cuando se cargue el archivo JavaScript gpt.js o cuando se defina el objeto googletag, no es confiable verificar ese objeto para ver si la API de GPT está disponible.
Ejemplo de fragmento de código con error 
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
Formas sugeridas de corregir el error 
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
Explicación o descripción de la corrección GPT propagará la marca booleana googletag.apiReady en cuanto La API está lista para que la llames, de modo que puedas hacer aserciones confiables.

Situación 4: Dependencia de la sintaxis de código ofuscado

Descripción del caso de uso de alto nivel Si dependes de la sintaxis precisa del código de la biblioteca de GPT reducido, es casi seguro que experimentes fallas. Limita tu uso a la API documentada en la Guía de referencia de la API, ya que cambiamos continuamente el funcionamiento interno de GPT para realizar mejoras constantes.
Por ejemplo, un requisito común es detectar cuándo PubAdsService se carga por completo para llamar a refresh().
Ejemplo de fragmento de código con error 
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
Formas sugeridas de corregir el error 
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
Explicación o descripción de la corrección Solo se puede confiar en la API pública. En el caso de detectar si PubAdsService se cargó por completo, tenemos un valor booleano googletag.pubadsReady.

Situación 5: Se reemplaza cualquier función o variable de GPT

Descripción del caso de uso de alto nivel Los casos de uso basados en la anulación de cualquier función o variable que use GPT pueden fallar en cualquier momento, ya que no es un caso de uso compatible. Los cambios de tiempo en las funciones internas de GPT pueden generar este tipo de comportamiento incorrecto debido a las fallas.
Ejemplo de fragmento de código con error 
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
Formas sugeridas de corregir el error 
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

Situación 6: Realizar pedidos erróneos a GPT

Descripción del caso de uso de alto nivel Es posible que las condiciones de carrera generen fallas a medida que los componentes internos de GPT evolucionen. Es posible que un conjunto de instrucciones ordenadas de forma incorrecta que funcionaban debido a tiempos específicos en la ejecución no siga funcionando en el futuro.
Ejemplo de fragmento de código con error 
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
Formas sugeridas de corregir el error 
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
Explicación o descripción de la corrección Para evitar condiciones de carrera, asegúrate de respetar los tiempos habituales de GPT. Ejemplo válido las órdenes parciales incluyen:
  • Definir-Habilitar-Pantalla
    1. Cómo definir la configuración a nivel de página
    2. Define los horarios
    3. enableServices()
    4. Ranuras de visualización
  • Enable-Define-Display
    1. Cómo definir la configuración a nivel de página
    2. enableServices()
    3. Define las ranuras
    4. Ranuras de visualización

Situación 7: Usar de manera inadecuada clausuras y alcances de la variable de JavaScript

Descripción del caso de uso de alto nivel Suposiciones incorrectas sobre el alcance de las variables de JavaScript y el valor de las variables capturadas en la función que se pasa a googletag.cmd.push
Ejemplo de fragmento de código con 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]);
  })
 }
}
Formas sugeridas de corregir el 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]);
  }
 }
)
Explicación o descripción de la corrección

En JavaScript, los cierres capturan variables por referencia en lugar de por valor. Esto significa que, si una variable se reasigna, su nuevo valor se usará cuando la función un cierre que lo capturó y se ejecuta más tarde. Por lo tanto, el comportamiento del código en el cierre puede cambiar según si la devolución de llamada se ejecuta de inmediato o se retrasa.

En el caso de la GPT cargada de forma asíncrona, según la rapidez con la que la GPT cargue las devoluciones de llamada en la cola de comandos, es posible que se ejecuten de inmediato o no. En el anterior ejemplo, esto altera el comportamiento de los comandos en cola.

Para evitar problemas, el código debe escribirse sin la suposición de que funciona colocado en la cola de comandos se ejecutará de inmediato y se debe tener cuidado con con respecto a las reglas de alcance de JavaScript.

Situación 8: Se mueven contenedores de espacios dentro del DOM después de llamar a la pantalla

Descripción del caso de uso de alto nivel Mover o insertar contenedores de espacios en el DOM después de llamar a la visualización puede generar un reflujo no deseado y un comportamiento impredecible en GPT.
Ejemplo de fragmento de código con 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"));
Formas sugeridas de corregir el 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");

Situación 9: Se reemplazan las APIs del navegador

Descripción del caso de uso de alto nivel Las APIs del navegador de reemplazo (también conocidas como parches de mono o polyfilling) no se admiten en GPT. Esta práctica tiene el potencial de dañar secuencias de comandos de terceros, como GPT, de formas inesperadas.
Ejemplo de fragmento de código con error 
// Incorrect: Overwriting window.fetch
const { fetch: originalFetch } = window;
window.fetch = (...args) => {
 console.log('Fetching!');
 return originalFetch(resource, config);
};
Formas sugeridas de corregir el error 
// 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);
}
Anterior
Supervisa el rendimiento