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. Utilice el generador de etiquetas de Google para generar una etiqueta automáticamente.
Los desarrolladores y quienes necesiten implementaciones avanzadas de GPT pueden consultar la referencia de la API y las implementaciones de ejemplo (como la carga diferida).
Código de ejemplo de Google Publisher Tag
Hay dos secciones de código que se implementan para GPT:
- La configuración de GPT se incluye en la etiqueta
<head>de la página web. - Las llamadas para cada espacio publicitario específico se envían a la sección relevante de
<body>.
Este ejemplo se usa con fines informativos; te recomendamos que un desarrollador implemente el código en tu sitio web.
Configuración de GPT
En el siguiente ejemplo de código, se incluyen llamadas a la biblioteca JavaScript de GPT, definiciones de los espacios publicitarios, segmentaciones de pares clave-valor y mucho más.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Líneas 3 a 6: 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. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Línea 9:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
Líneas 11, 14 y 15: Se configura la segmentación de pares clave-valor a nivel del espacio publicitario con Obtén más información para configurar la segmentación y los tamaños con GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Línea 16: 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: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Línea 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Línea 23 (opcional): 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. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Líneas 8, 25 y 32: 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. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Líneas 9, 12, 23, 26, 30 y 33: 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. Eso se hace en segundo plano con 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. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Si no puede editar el encabezado de sus páginas web
Puedes usar GPT sin modificar el elemento <header> de tu sitio web.
Opción 1: Etiqueta GPT intercalada
Usa una etiqueta intercalada para definir dónde aparece la unidad 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>.
Debido a que la etiqueta de anuncio usa la biblioteca JavaScript de GPT, debes incluir el código que carga la biblioteca antes de incluir el código de la etiqueta de 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 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>
Opción 2: Coloca todo el código en el cuerpo de la página web
Usa la implementación convencional de GPT, pero coloca las definiciones del espacio publicitario en el cuerpo de tu 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.
Crea una solicitud sin etiqueta sin JavaScript
En lugar de una etiqueta de anuncio, puedes usar una solicitud sin etiqueta para solicitar el código de la creatividad sin formato cuyo tráfico se coordinó en Ad Manager. Por lo general, las solicitudes sin etiqueta se usan cuando se requieren una visualización y un análisis personalizados, como en decodificadores y otros entornos que no admiten SDK o etiquetado de Google.