Comienza a usar Google Publisher Tag

Google Publisher Tag (GPT) es una biblioteca de etiquetado de anuncios para 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, consulta el Centro de ayuda de Ad Manager.

A continuación, se incluyen algunos ejemplos que puede usar para comenzar a usar GPT. Si necesita más ayuda con GPT, consulte las opciones de asistencia.

Mostrar 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 página de muestra Mostrar un anuncio de prueba.

  1. 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>
        <script>
          googletag.cmd.push(() => {
            // Request and render an ad for the "banner-ad" slot.
            googletag.display("banner-ad");
          });
        </script>
      </body>
    </html>
    
  2. Cómo cargar la biblioteca de GPT

    Para cargar la biblioteca de GPT, agrega 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 se carga por completo, procesa los comandos en cola del objeto googletag.

    <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"></script>
      <style></style>
    </head>
    
  3. Cómo definir un espacio publicitario

    Define un espacio publicitario y, luego, inicializa GPT con el método googletag.enableServices().

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

    En el espacio publicitario de este ejemplo, se cargará un anuncio de tamaño 300x250 de la unidad de anuncios especificada por la ruta de acceso /6355419/Travel/Europe/France/Paris. El anuncio se mostrará en un elemento <div id="banner-ad"> en el cuerpo de la página, que se agregará a continuación.

    <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"></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>
    
  4. Especificar dónde aparecerá el anuncio

    Para especificar dónde aparecerá el anuncio en la página, agrega el siguiente código al <body> del documento HTML.

    Ten en cuenta que el ID de este <div> coincide con el ID especificado cuando se define el 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>
    
  5. Obtener una vista previa de la página de prueba

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

Muestra tu propio anuncio

Para mostrar tu propio anuncio, usa el archivo hello-gpt.html de Muestra un anuncio de prueba y, luego, reemplaza el código en el encabezado por uno que especifique el inventario de tu propia red de Ad Manager.

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

  2. Copia el código de etiqueta del anuncio proporcionado en la sección Encabezado del documento y úsalo para reemplazar el código correspondiente en el <head> de tu documento HTML.

    <head>
     <meta charset="utf-8">
     <title>Hello GPT</title>
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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>
    
  3. Guarda el archivo hello-gpt.html actualizado y ábrelo en un navegador web.