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 sugerencias1 |
<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 |
|
13 |
<script> |
14 |
googletag.cmd.push(function() { |
15 |
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
Línea 15:
|
|
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 En la documentación para desarrolladores sobre la función |
|
22 |
googletag.pubads().setTargeting("topic","basketball"); |
Línea 22: |
|
23 |
googletag.pubads().enableSingleRequest(); |
Línea 23: |
|
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): |
|
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 " 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.
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:
-
Cree un bloque de anuncios nuevo o elija uno existente para hacer un seguimiento del recuento de impresiones.
-
Cree una línea de pedido de 1 x 1 y agréguele una creatividad de imagen de píxel transparente.
-
Oriente la línea de pedido de 1 x 1 al bloque de anuncios creado en el paso 1.
-
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.
-
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.
-