En la siguiente guía, se amplía 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 de pares clave-valor
- Arquitectura de solicitud única
Cómo cargar la biblioteca de GPT
Primero, carga e 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"></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. Cuando inicializas estos objetos, puedes comenzar a usar el array de comandos de GPT de inmediato. Agrega el código JavaScript que sigue al cuerpo de la función vacía definida en este fragmento.
Cómo definir espacios publicitarios
Después de cargar GPT, puede definir espacios publicitarios. En el siguiente ejemplo, se definen tres espacios publicitarios con diferentes formatos, tamaños y opciones de segmentación de anuncios.
Espacio publicitario de tamaño fijo
A continuación, se muestra un espacio publicitario sencillo y 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 de la unidad de anuncios, el tamaño y el ID de <div> del contenedor, 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 publicitario. Obtén más información sobre la segmentación de pares clave-valor.
Espacio publicitario fijo
A continuación, se incluye un espacio publicitario fijo adjuntado 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 anclaje son un tipo de formato fuera de página, que se define 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 en relación con los tipos de páginas y dispositivos en los que pueden publicarse. Debido a estas restricciones, debes verificar que la ranura se defina correctamente antes de interactuar con ella. Consulta la muestra Muestra un anuncio fijo para obtener más información.
Espacio publicitario flexible
Este es un espacio publicitario flexible para un anuncio nativo:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Los espacios publicitarios flexibles no tienen un tamaño fijo. Los espacios publicitarios flexibles se ajustan
para adaptarse al contenido creativo del anuncio. Defines espacios publicitarios flexibles con la opción de tamaño fluid. Obtén más información sobre los tamaños de los anuncios y las opciones de tamaño disponibles.
Cómo establecer la configuración a nivel de página
Algunas opciones de configuración de GPT se aplican de manera global, en lugar de a espacios publicitarios específicos. Esta configuración se conoce como configuración a nivel de la página.
A continuación, se muestra un ejemplo de cómo establecer 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 realiza tres acciones:
- 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 respeten las exclusiones competitivas y las publicidades simultáneas, por lo que te recomendamos que siempre actives la SRA. Obtén más información sobre cómo usar la SRA correctamente.
- Habilita los servicios adjuntos a nuestros espacios publicitarios 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 id del contenedor corresponden a los valores que proporcionaste cuando definiste los
espacios publicitarios anteriormente 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 muestra las solicitudes de llamada y procesa todos los espacios publicitarios definidos hasta este momento. Si es necesario, puedes controlar la carga y la actualización de anuncios y el comportamiento por lotes con mayor precisión con la 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.