Comienza a usar Google Publisher Tag

Google Publisher Tag (GPT) es una biblioteca de etiquetado de anuncios Google Ad Manager.

Puedes usar GPT para crear solicitudes de anuncios de forma dinámica. GPT toma detalles clave como el código de la unidad de anuncios, el tamaño del anuncio y la segmentación personalizada, crea la solicitud y muestra el anuncio en páginas web.

Para obtener más detalles sobre GPT, consulte la Centro de ayuda de Ad Manager.

A continuación, se incluyen algunos ejemplos que puede usar para comenzar a usar GPT. Si si necesita más ayuda con GPT, consulte la página de la aplicación.

Muestra un anuncio de prueba

En el siguiente ejemplo, se explica cómo crear una página de prueba que Usa GPT para cargar un anuncio genérico de la red de prueba de Google.

Puedes encontrar el código completo de este ejemplo en la mostrar un anuncio de prueba.

Crea un documento HTML básico

En un editor de texto, crea un documento HTML básico llamado hello-gpt.html.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
  </body>
</html>

Cómo cargar la biblioteca de GPT

Para cargar la biblioteca de GPT, agregue lo siguiente al <head> del documento HTML.

Este código carga la biblioteca de GPT desde https://securepubads.g.doubleclick.net/tag/js/gpt.js. Una vez que la biblioteca tenga completamente cargado, procesa cualquier comando en cola del Objeto googletag.

Importante: Solo carga las etiquetas GPT desde un dominio de Google.
```
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>
```
Cómo definir un espacio publicitario

Defina un espacio publicitario y, luego, inicialice GPT con el googletag.enableServices().

Este código primero garantiza que el objeto googletag esté disponible y, luego, pone en cola un que crea un espacio publicitario y habilita GPT.

El espacio publicitario de este ejemplo cargará un anuncio con un tamaño de 300x250 del anuncio unidad especificada por la ruta de acceso /6355419/Travel/Europe/France/Paris. El anuncio será se muestra en un elemento <div id="banner-ad"> en el cuerpo de la página, lo que se agregarán a continuación.
La ruta de la unidad de anuncios sigue el formato /network-code/[parent-ad-unit-code/.../]ad-unit-code, En el ejemplo anterior, se ilustra lo siguiente:
- network-code es un identificador único del Red de Ad Manager a la que pertenece la unidad de anuncios
- parent-ad-unit-code son los códigos de todas las unidades de anuncios superiores (solo se aplica a las unidades de anuncios que no son de primer nivel)
- ad-unit-code es el código de la unidad de anuncios que se mostrará.
Ten en cuenta que todos los códigos de unidades de anuncios incluidos en la ruta de la unidad de anuncios deben cumplir con el reglas de formato especificadas por en Ad Manager.
```
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>
```
Especificar dónde aparecerá el anuncio

Para especificar en qué lugar de la página aparecerá el anuncio, agrega el siguiente código a el <body> del documento HTML.

Ten en cuenta que el ID de este <div> coincide con el que se especificó cuando se definió espacio publicitario.
```
<body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>
```
Obtén una vista previa de la página de prueba

Guarda el archivo hello-gpt.html y ábrelo en un navegador web. Una vez cargado, la página mostrará un anuncio de prueba en el cuerpo de la página web.

Precaución: Si no ves ningún anuncio, asegúrate de que el ID de div especificado en la El <head> de la página coincide con el ID del elemento <div> que agregaste. el <body> de la página.

Muestra tu propio anuncio

Para mostrar su propio anuncio, utilice el archivo hello-gpt.html de Mostrar una prueba del anuncio y, luego, reemplaza el código del encabezado por código que especifique de tu propia red de Ad Manager.

Genera una etiqueta de anuncio para la unidad de anuncios que deseas mostrar. Obtén más información sobre generar etiquetas de anuncios Centro de ayuda de Ad Manager.

Copia y usa el código de etiqueta de anuncio que se proporciona en la sección Encabezado del documento. para reemplazar el código correspondiente en el elemento <head> de su documento HTML.

<head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
      googletag
          .defineSlot("ad-unit-path", [width, height], "div-id")
          .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>

Guarda el archivo hello-gpt.html actualizado y ábrelo en un navegador web.

Aprende los conceptos básicos