Comience a usar Google Publisher Tag

Ejemplo de Google Publisher Tag

A continuación, encontrará un ejemplo del código completo que le permitirá crear una etiqueta Google Publisher Tag (GPT) para su implementación en dispositivos móviles y computadoras de escritorio. Obtenga más información sobre cómo usar Google Tag Generator para generar etiquetas GPT automáticamente.

Este artículo también incluye las instrucciones para resolver problemas a la hora de editar el título de sus páginas web y crear un píxel de seguimiento de 1 × 1 sin usar JavaScript.

Optimice la velocidad de GPT mediante la actualización del dominio de la biblioteca alojada

La biblioteca de Google Publisher Tag ahora está alojada en https://securepubads.g.doubleclick.net/tag/js/gpt.js, además de estar alojada en el dominio googletagservices.com. Si bien no es obligatorio, le recomendamos que actualice todas las referencias a GPT en sus páginas para utilizar este nuevo dominio.

Este cambio consolida todas las solicitudes de publicación de anuncios en un dominio, en lugar de dos, lo que significa que el navegador solo necesita conectarse a un dominio. La biblioteca es exactamente la misma en ambos dominios.

El resultado es una mejora en la velocidad de sus etiquetas y la obtención de anuncios un poco más rápida.

Ejemplo de una etiqueta Google Publisher Tag

Ver código sin sugerencias
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>
8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>
13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male")
21       .setTargeting("age", "20-30");
22     googletag.pubads().setTargeting("topic","basketball");
23     googletag.pubads().enableSingleRequest();
24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {
39          googletag.display("div-gpt-ad-123456789-1");
40       });
41     </script>
42   </div>
43 </body>
44 </html>
 
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>

Líneas 3 a 7: Se incluye un texto estándar que carga de forma asíncrona la biblioteca de GPT que usa Ad Manager mediante SSL/HTTPS. En esta sección, se crea la cola de comandos que administra la lista de funciones (por lo general, llamadas del anuncio) de forma asíncrona. No es necesario editar esta sección del código.
8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>

Líneas 8-12 (opcional): Se configuran los atributos de página para espacios publicitarios de AdSense. Si cambia estos atributos, se anulan los estilos que se hayan configurado en Ad Manager o AdSense. Esta función no se suele usar, ya que se puede establecer esa configuración en Ad Manager. La documentación para desarrolladores sobre la función .set() describe cómo establecer los parámetros de AdSense en GPT.
13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")

Línea 15: "/1234/travel/asia" especifica el código de red (1234) y el bloque de anuncios orientado (travel/asia). Busque su código de red en Ad Manager, en Administrador y luego Configuración global y luego Código de red.

[728, 90] establece el tamaño de creatividad del espacio publicitario. Se pueden indicar varios tamaños con la sintaxis [[width1, height1], [width2, height2], [width3, height3]]. Asocie todos los tamaños aquí con el bloque de anuncios orientado, lo que le permitirá acotar la lista en función del espacio publicitario específico. Cuando use espacios publicitarios de varios tamaños, declárelos en el mismo orden en que aparecen en Ad Manager. Obtenga más información sobre la secuencialidad y la definición de espacios.
16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male")
21       .setTargeting("age", "20-30");

Líneas 17, 20 y 21: Se configura la orientación de pares clave-valor a nivel del espacio publicitario con la función .setTargeting(). Puede asociar varios valores con una clave, como en el primer ejemplo: ("key", ["value1", "value2", "value3"]). Para orientar varias claves, llame a la función varias veces, como se muestra en el segundo caso: (gender=male y age=20-30).

En la documentación para desarrolladores sobre la función .setTargeting(), se indica cómo definir parámetros de clave-valor en GPT. Obtenga más información acerca de cómo configurar la orientación y los tamaños con GPT.
22     googletag.pubads().setTargeting("topic","basketball");

Línea 22: googletag.pubads().setTargeting("topic","basketball"); configura la orientación del par clave-valor al nivel de la página. Cuando configura la orientación con claves-valor a nivel de la página, todos los espacios publicitarios heredan su orientación. Al igual que con claves-valor al nivel del espacio, puede asociar varios valores a una clave: ("key", ["value1", "value2", "value3"]).
23     googletag.pubads().enableSingleRequest();

Línea 23: googletag.pubads().enableSingleRequest(); habilita la arquitectura de solicitud única (SRA). Incluya esta línea para llamar a todos los espacios publicitarios de la página con una sola llamada (permite hacer publicidades simultáneas garantizadas y puede ofrecer ventajas de rendimiento en su página).
24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

Línea 29 (opcional): style="width: 728px; height: 90px" es el tamaño que tomará el elemento antes de procesar la creatividad, Si usa etiquetas de varios tamaños, recomendamos omitir esta (en ese caso, el tamaño del elemento tomará el de la creatividad seleccionada cuando se procese) o hacer que ambas dimensiones sean lo suficientemente grandes como para contener la creatividad apta de mayor tamaño. Para etiquetas de anuncios con un solo tamaño, use este parámetro para expandir el elemento contenedor hasta que la creatividad se cargue, de modo que otros elementos de la página no cambie cuando la creatividad se procese.
30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {

Líneas 9, l4, 31 y 38: Se agregan llamadas de función a una cola de comandos para que se procesen de manera asíncrona cuando se cargue la página.
39          googletag.display("div-gpt-ad-123456789-1");

Líneas 15, 18, 29, 32, 36 y 39: El parámetro "div-gpt-ad-123456789-0" asigna los espacios publicitarios definidos en el encabezado de los espacios publicitarios en la página (las etiquetas de división del cuerpo donde se publican las creatividades). Si bien se les puede asignar cualquier nombre siempre y cuando coincidan, nuestro generador de etiquetas usa la convención "div-gpt-ad-[random number]-0", "div-gpt-ad-[random number]-1" y así sucesivamente. Use el mismo ID de <div> de manera consistente para una posición determinada en una página, ya que se usa con el objetivo de optimizar una gran variedad de áreas.

Si bien aquí se usan números aleatorios, esa no es la única forma mediante la que GPT identifica una solicitud de anuncio, sino que se hace mediante la biblioteca de GPT. Asimismo, pueden conservarse estos nombres de una página a otra siempre que no haya varias instancias del mismo nombre de div en la misma página.

Obtenga más información sobre la estructura del inventario de Ad Manager, la jerarquía de los bloques de anuncios y cómo estos elementos heredan la orientación en la descripción general del inventario.
40       });
41     </script>
42   </div>
43 </body>
44 </html>

Si no puede editar el encabezado de sus páginas web

Puede usar GPT sin modificar el encabezado de sus páginas web.

Opción 1: Use una etiqueta intercalada para definir dónde aparece el bloque de anuncios en la página, en lugar de usar el encabezado de la página. Con una etiqueta intercalada, la totalidad de la solicitud y definición del espacio publicitario de GPT, incluida la carga de la biblioteca de GPT, estará incluida en una sola etiqueta <script>. A continuación, le mostramos ejemplos de definición de intercalado de espacio publicitario.

Como la etiqueta del anuncio usa la biblioteca JavaScript de GPT, debe incluir el código que carga la biblioteca antes de incluir el código de etiqueta del anuncio.

Ejemplo de etiqueta GPT asíncrona intercalada

Estos ejemplos de etiqueta GPT intercalada no son compatibles con SRA.

Cómo llamar a la biblioteca JavaScript de GPT

<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
</script>

Ejemplo de etiqueta de anuncio 1: etiqueta intercalada

<div id="div-gpt-ad-1234567891234-0">
  <script>
    googletag.cmd.push(function() {
      googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
        .addService(googletag.pubads())
        .setTargeting("Gender", "Male");
      googletag.enableServices();
      googletag.display('div-gpt-ad-1234567891234-0');
  });
  </script>
</div>

Ejemplo de etiqueta de anuncio 2: etiqueta concisa intercalada (no es compatible con la orientación en el nivel de espacio publicitario)

<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>

Opción 2: Use la implementación convencional de GPT, pero coloque las definiciones del espacio publicitario en el cuerpo de su HTML, en lugar del encabezado. El código que carga la biblioteca y define los espacios publicitarios deben llamarse antes de que solicite anuncios para esos espacios publicitarios. Como el código no está segmentado en el encabezado y cuerpo de su página, y usted debe administrar su secuencia, este enfoque es más complejo, pero proporciona la flexibilidad de SRA.

Cómo usar una etiqueta GPT sin JavaScript para crear un píxel de seguimiento de 1 x 1

Para crear un seguimiento de impresiones con GPT, siga estos pasos:

  1. Cree un bloque de anuncios nuevo o elija uno existente para hacer un seguimiento del recuento de impresiones.

  2. Cree una línea de pedido de 1 x 1 y agréguele una creatividad de imagen de píxel transparente.

  3. Oriente la línea de pedido de 1 x 1 al bloque de anuncios creado en el paso 1.

  4. Cree una etiqueta GPT sin JavaScript que llame al píxel de impresión y especifique el bloque de anuncios creado en el paso 1. Por ejemplo:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    Obtenga información acerca de cómo generar URL que no se basen en JavaScript.

  5. Use la etiqueta de píxel de impresión de alguna de estas dos maneras:

    • Agregue la etiqueta a una creatividad personalizada o de terceros que se publicará en la página. Para ello, en la página "Configuración" de la creatividad, agregue la etiqueta en la parte superior de la casilla "Fragmento de código".

    • Agregue la etiqueta a la página web directamente.

¿Te resultó útil esto?
¿Cómo podemos mejorarla?