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 del anuncio
- Segmentación por pares clave-valor
- Arquitectura de solicitud única
Cómo cargar 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>De esta manera, se carga la biblioteca de GPT y se inicializan 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 las etiquetas GPT, puede definir 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 de Cómo mostrar un anuncio fijo para 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 flexibles se ajustan
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 denominan 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 cada espacio publicitario 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 a la <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 publicitarios antes en este ejemplo.
Una vez definidos todos los espacios publicitarios, se realiza una llamada para mostrar el banner-ad. Dado que 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 la carga y la actualización de anuncios y el comportamiento por lotes con mayor precisión con SRA habilitada.
Ejemplo completo
A continuación, se muestra el código fuente completo para la página de muestra en la que se basa esta guía. También puedes ver una demostración interactiva de esta página.