A continuación, se muestra un ejemplo del código completo que se necesita para crear una etiqueta Google Publisher Tag (GPT) que puede usarse en implementaciones para móviles y para ordenadores. Use el generador de etiquetas de Google para generar etiquetas automáticamente.
Los desarrolladores que necesiten implementaciones avanzadas de GPT deben consultar la referencia de la API y las implementaciones de ejemplo (como la carga en diferido).
Código de ejemplo de Google Publisher Tag
En las etiquetas GPT, se implementan dos secciones de código:
- La configuración de GPT se realiza en la sección
<head>de la página web. - Las llamadas de cada espacio publicitario específico se incluyen en la sección correspondiente de la etiqueta
<body>.
Este ejemplo tiene fines informativos, por lo que le recomendamos que pida a un desarrollador que implemente el código en su sitio web.
Configuración de GPT
El siguiente código de ejemplo incluye la llamada a la biblioteca de JavaScript de GPT, la definición de espacios publicitarios, la segmentación por pares clave-valor, etc.
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 de la 3 a la 6: cargan de forma asíncrona la biblioteca de GPT que utiliza Ad Manager mediante SSL y HTTPS. En ellas se incluye la cola de comandos que gestiona la lista de funciones (normalmente, llamadas de anuncio) que deben procesarse de forma asíncrona. No es necesario modificar este fragmento de 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: El fragmento |
|
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: defina la segmentación de pares clave-valor a nivel de espacio publicitario con Más información sobre cómo configurar la segmentación y los tamaños con GPT |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Línea 23: se utiliza así que todos los espacios publicitarios la heredan. Al igual que ocurre con los pares clave-valor de los espacios publicitarios, se pueden asociar varios valores a una clave: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Línea 23: con |
|
| 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 se utilizan etiquetas de varios tamaños, recomendamos omitir este fragmento (en cuyo caso el tamaño del elemento renderizado será el de la creatividad seleccionada) o comprobar que ambas dimensiones puedan contener la creatividad apta de mayor tamaño. En las etiquetas de anuncio de tamaño único, este parámetro sirve para expandir el elemento contenedor hasta que la creatividad se cargue y así evitar que otros elementos de la página se desplacen cuando se renderice la creatividad. |
|
| 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: las llamadas a funciones se añaden a la cola de comandos para que se procesen de forma asíncrona al cargar la página. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Líneas 9, 12, 23, 26, 30 y 33: con Aunque se utilicen números aleatorios, GPT identifica una solicitud de anuncio de forma interna mediante su biblioteca. Además, es posible que los nombres que se utilicen sean los mismos en diferentes páginas, siempre que en una no haya varias etiquetas div con el mismo nombre. Consulte más información sobre la estructura del inventario de Ad Manager, la jerarquía de los bloques de anuncios y la forma en que estos heredan la segmentación en la descripción general del inventario. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | <body> |
| 38 | </html> |
Si no puede editar el encabezado de las páginas web
Puede utilizar GPT sin modificar el <header> del sitio web.
Opción 1: Etiquetas GPT insertadas
Utilice una etiqueta insertada para definir el lugar de la página en que aparecerá el bloque de anuncios, en lugar de usar el encabezado de página. Al utilizar una etiqueta de este tipo, se incluyen en una única etiqueta <script> la definición y la solicitud completas del espacio publicitario de GPT, incluida la carga de la biblioteca de GPT.
La etiqueta de anuncio utiliza la biblioteca de JavaScript de GPT, por lo que debe incluirse el código que carga la biblioteca antes de añadir el de la etiqueta del anuncio.
En estos ejemplos de etiqueta GPT insertada no se admite la arquitectura de solicitud única.
Llamar a la biblioteca de JavaScript de GPT
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Etiqueta de anuncio insertada de ejemplo
<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: Colocar todo el código en el cuerpo de la página web
Use la implementación tradicional de etiquetas GPT, pero coloque las definiciones de los espacios publicitarios en el cuerpo del código HTML y no en el encabezado.
Debe llamarse al código que carga la biblioteca y define los espacios publicitarios antes de solicitar los anuncios que se publicarán en dichos espacios. Este método es más complejo, ya que no se segmenta el código en el encabezado y el cuerpo de la página y, además, es necesario gestionar su secuencia, pero de este modo se obtiene la flexibilidad que proporciona la arquitectura de solicitud única.
Crear solicitudes sin etiquetas y sin JavaScript
Puede solicitar código sin formato de creatividades cuyo traficado se haya hecho en Ad Manager mediante solicitudes sin etiquetas. Por lo general, estas solicitudes se usan cuando hace falta personalizar el análisis y la visualización de las creatividades, por ejemplo, en decodificadores o en otros entornos que no admiten etiquetas ni SDKs de Google.
