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 esas implementaciones pueden parecer funcionar bien con la versión actual de GPT, no se garantiza que continúen haciéndolo en el futuro. En los casos más extremos, estas implementaciones pueden provocar que la publicación de anuncios se interrumpa 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 exhaustiva de posibles problemas, pero se espera que sirva como una guía útil para identificar los tipos de problemas que podrían ser necesarios.

Además, según tu implementación, es posible que debas buscar en todos los lugares de tu sitio en los que esos cambios pueden ser necesarios.

Errores comunes

Situación 1: Uso de copias no oficiales de bibliotecas 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, o bien 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 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>

Situación 2: Utilizar objetos de escucha de etiquetas de la secuencia de comandos 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 cargue el archivo JavaScript gpt.js es incorrecto, ya que el archivo pubads_impl.js proporciona algunas partes de la API. Por lo tanto, es incorrecto confiar de cualquier manera en la API (incluidos los frameworks) desde objetos de escucha de eventos adjuntos a la etiqueta de secuencia de comandos.
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 / descripción de la solució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 tu devolución de llamada cuando se cargue GPT.

Situación 3: Verificación del 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 carga el archivo JavaScript gpt.js o cuando se define 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 / descripción de la solución GPT propagará la marca booleana googletag.apiReady en cuanto la API esté lista para llamarse a fin de que puedas realizar aserciones confiables.

Situación 4: Recurrir a una sintaxis de código ofuscada

Descripción del caso de uso de alto nivel Si dependes de la sintaxis precisa del código reducido de la biblioteca de GPT, es muy probable 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 mejorarlas constantemente.
Por ejemplo, un requisito común es detectar cuándo PubAdsService está completamente cargado 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 / descripción de la solución Solo se puede confiar en la API pública. Para detectar si PubAdsService está completamente cargado, tenemos un valor booleano googletag.pubadsReady.

Situación 5: Cómo reemplazar cualquier función o variable de GPT

Descripción del caso de uso de alto nivel Los casos de uso basados en el reemplazo de cualquier función o variable que use GPT pueden fallar en cualquier momento, ya que no es un caso de uso admitido. Los cambios de tiempo en la parte interna de GPT pueden mostrar este tipo de comportamiento incorrecto por 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: Orden incorrecto de llamadas a GPT

Descripción del caso de uso de alto nivel Las condiciones de carrera pueden generar fallas a medida que evolucionan los componentes internos de GPT. Es posible que un conjunto de declaraciones ordenado de forma incorrecta que funcionaron debido a tiempos específicos de 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 / descripción de la solución Para evitar las condiciones de carrera, asegúrate de respetar el tiempo habitual de GPT. Estos son algunos ejemplos de pedidos parciales válidos:
  • Define-Enable-Display
    1. Cómo definir la configuración a nivel de la página
    2. Define ranuras
    3. enableServices()
    4. Ranuras de pantalla
  • Enable-Define-Display
    1. Cómo definir la configuración a nivel de la página
    2. enableServices()
    3. Define ranuras
    4. Ranuras de pantalla

Situación 7: Uso inadecuado de cierres y alcance 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 se pasan 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 / descripción de la solución

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

En el caso de GPT cargados de forma asíncrona, según la rapidez con la que GPT cargue las devoluciones de llamada en la cola de comandos podrían ejecutarse de inmediato o no. En el ejemplo anterior, esto altera el comportamiento de los comandos en cola.

Para evitar problemas, el código debe escribirse sin suponer que las funciones ubicadas en la cola de comandos se ejecutarán de inmediato, y se debe tener cuidado con las reglas de alcance de JavaScript.

Situación 8: Movimiento de contenedores de ranuras dentro del DOM después de llamar a display

Descripción del caso de uso de alto nivel Mover o insertar contenedores de ranuras en el DOM después de llamar a la pantalla puede generar un reprocesamiento 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");