En la siguiente guía, se explica cómo mostrar un anuncio de prueba y se presentan conceptos más básicos para aprovechar al máximo la biblioteca de Google Publisher Tag (GPT). Estos conceptos incluyen lo siguiente:
- Tamaño de los anuncios
- Segmentación por pares clave-valor
- Arquitectura de solicitud única
Carga la biblioteca de GPT
Para comenzar, carga y luego inicializa la biblioteca de GPT. Agrega lo siguiente al <head> del documento HTML:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Esto carga la biblioteca de GPT y, luego, inicializa los objetos googletag y CommandArray. La inicialización de estos objetos te permite comenzar a usar el array de comandos de GPT de inmediato. Agrega el código JavaScript que aparece a continuación al cuerpo de la función vacía definida en este fragmento.
Define espacios publicitarios
Después de cargar la GPT, puedes definir los espacios publicitarios. En el siguiente ejemplo, se definen tres posiciones de anuncios con diferentes formatos de anuncios, tamaños y opciones de segmentación.
Espacio publicitario de tamaño fijo
Este es un espacio publicitario simple de tamaño fijo:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
Además de la ruta de acceso, el tamaño y el ID <div> del contenedor de la unidad de anuncios, este fragmento también especifica varias opciones de segmentación. Estas opciones restringen y diferencian los anuncios que son aptos para publicarse en este espacio. Obtén más información sobre la segmentación por pares clave-valor.
Espacio publicitario fijo
Este es un espacio de anuncio fijo, adjunto a la parte inferior del viewport:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
Los espacios de ancla son un tipo de formato fuera de página que se definen con el método defineOutOfPageSlot, en lugar del método defineSlot habitual. Obtén más información sobre las creatividades fuera de página.
Los formatos fuera de página suelen tener restricciones sobre los tipos de páginas y dispositivos en los que son aptos para publicarse. Debido a estas restricciones, debes verificar que el espacio esté definido correctamente antes de interactuar con él. Consulta el ejemplo para mostrar un anuncio fijo y obtener más información.
Espacio publicitario fluido
Este es un espacio publicitario flexible para un anuncio nativo:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Los espacios publicitarios fluidos no tienen un tamaño fijo. Los espacios publicitarios fluidos se ajustan para adaptarse al contenido creativo del anuncio. Para definir espacios publicitarios fluidos, usa la opción de tamaño fluid. Obtén más información sobre el tamaño de los anuncios y las opciones de tamaño disponibles.
Configura la configuración a nivel de la página
Algunas opciones de configuración de la GPT se aplican de forma global, en lugar de a espacios publicitarios específicos. Estos se conocen como parámetros de configuración a nivel de la página.
Este es un ejemplo de cómo configurar la configuración a nivel de la página:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
Este fragmento hace tres cosas:
- Configura las opciones de segmentación a nivel de la página, que se aplican a todos los espacios publicitarios de la página.
- Activa el modo de arquitectura de solicitud única (SRA), que agrupa las solicitudes de varios espacios publicitarios en una sola solicitud de anuncio. La SRA mejora el rendimiento y es necesaria para garantizar que se cumplan las exclusiones competitivas y los bloqueos, por lo que te recomendamos que siempre la actives. Obtén más información para usar la SRA correctamente.
- Habilita los servicios conectados a nuestros espacios de anuncios que permiten realizar solicitudes de anuncios.
Anuncios gráficos
Por último, agrega el siguiente fragmento al <body> de la página:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
Esto define dos contenedores de espacios publicitarios: banner-ad y native-ad. Estos valores de id del contenedor corresponden a los valores que proporcionaste cuando definiste los espacios de anuncios antes en este ejemplo.
Después de definir todos los espacios de anuncios, se realiza una llamada para mostrar el banner-ad. Como la SRA está habilitada, esta única llamada de visualización solicita y renderiza todos los espacios publicitarios definidos hasta este punto. Si es necesario, puedes controlar con mayor precisión la carga y actualización de los anuncios, así como el comportamiento por lotes con la SRA habilitada.
Ejemplo completo
El siguiente es el código fuente completo de la página de ejemplo en la que se basa esta guía. También puedes ver una demostración interactiva de esta página.