Cómo hacer unidades de anuncio de DFP responsivas

Spanish articles

Last updated: January 20, 2021 | by Kean Graham

Cmo hacer unidades de anuncio de DFP responsivas

This post was most recently updated on January 20th, 2021

Tiene un tema receptivo y ahora desea pasar de Google Ad Manager (GAM) para AdSense. Lo primero que ve es que no hay más unidades de anuncios responsivas como las que normalmente encuentra en AdSense.

Las instrucciones de soporte de Google pueden ser un poco difíciles o complicadas. Así que hoy voy a mostrarle cómo puedes hacer que los códigos de GAM sean responsivos en unos simples pasos.

¿Quieres los mejores tips para aumentar tus ingresos? Tendencias de la industria, Tecnología de anuncios, Operación de anuncios y otros tips, ¡directamente en tu correo!

Antes de comenzar, asegúrese de hacer lo siguiente:

Configura tu inventario. Configure todos los tamaños relevantes por unidad de anuncios. Leer: Mejores prácticas de integración de AdSense y GAM
Consulte nuestro tutorial sobre cómo generar múltiples tags de Ad Manager aquí: https://www.youtube.com/watch?v=s74dMDzczyc&feature=youtu.be
Ahora crea dos archivos de texto e guárdalos. Use un buen editor de texto (prefiero usar Notepad++ porque es gratis y fácil de trabajar).
Haga uno para el encabezado (heading) y otro para las tags del cuerpo.
Guarda las tags del cuerpo.
Abre el archivo head.txt que ha creado.

Haciendo responsiva la tag del encabezado

Paso 1: Abra el archivo head.txt en Notepad++. Primero, hagámoslo paso a paso. Su código de encabezado se verá así:

<!– Start GPT Tag –>

window.googletag = window.googletag || {cmd: []};

googletag.cmd.push(function() {

googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– End GPT Tag –>

Paso 2: He resaltado un código allí:

googletag.cmd.push(function() {

Debes agregar un poco de código después de la línea resaltada. A continuación se muestra el código que debe agregar. Pegue tantas instancias (copias) correspondientes a la ruta que elija entre las siguientes:

El número de mapas de tamaño. Puede volver a usar el mismo mapa de tamaño en varias unidades de anuncios si corresponde
El número de unidades de anuncios que tiene
El número de unidades de anuncios que desea que sean responsivas

var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //other

build();

Paso 3: He resaltado otro pedazo de código. Este es el nombre de la asignación que vamos a pasar en la unidad de anuncios en un momento. Prefiero que sea así, mappingadunitname, por lo que para nuestro ejemplo anterior, elijo crear un mapa de tamaño por unidad, lo que significa que necesitaremos 4 instancias de él y colocarlo después de:

googletag.cmd.push(function() {

Paso 4: Después de agregar el mapeo, su código de encabezado debería verse así:

<!– Start GPT Tag –>

window.googletag = window.googletag || {cmd: []};

googletag.cmd.push(function() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //other

build();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //other

build();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– End GPT Tag –>

Paso 5: Ahora un último paso: debe definir o asignar una asignación de tamaño para cada una de las unidades de anuncios. Tomemos uno aquí y luego le mostraré qué agregar y dónde.

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.addService(googletag.pubads());

Paso 6: Ahora necesita agregar este fragmento de código .defineSizeMapping(mappingadunitname) entre la parte azul y roja del código anterior, es decir, antes del punto.

Lo importante aquí es que las palabras entre paréntesis deben coincidir con el mapa de tamaño que desea agregar dentro de la unidad de anuncios. Para nuestro ejemplo aquí, RightRail_Ad1 debería tener esta apariencia:

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

Paso 7: Agregar una asignación similar para todas las demás unidades de anuncios le dará su código final.

<!– Start GPT Tag –>

window.googletag = window.googletag || {cmd: []};

googletag.cmd.push(function() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //other

build();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //other

build();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’)

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’)

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’)

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– End GPT Tag –>

Nota: Partes del código fueron resaltadas para enfatizar qué mapa de tamaño se usó para qué unidad de anuncios.

Paso 8: Ahora veamos la asignación del mapa de tamaño:

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //other

build();

El código en rojo define el ancho y la altura del navegador. Por lo general, la altura no es importante porque solo se tiene en cuenta cuando tenemos anchos iguales para 2 líneas en el código anterior.

Paso 9: Ahora estamos diciendo eso en la primera línea:

Si el ancho del navegador es igual o superior a 922px, muestre los tamaños de anuncio 728×280 o 728×90 o 336×250 o 1×1

Y en la última línea estamos diciendo:

Si el ancho del navegador es igual o superior a 320px, muestre los tamaños de anuncio 320×50 o 320×100 o 320×200 o 300×250 o 1×1

Los no.s, 992px, 768px and 320px funcionarán para la mayoría de los websites, ya que siguen los tamaños convencionales de los navegadores de desktop, tablets y dispositivos móviles.

Sin embargo, si tiene un website con un tema para tablet y celular, puede preguntarle a sua desarrollador qué tamaño de navegador se activa la transición del tema y luego puede agregar ese tamaño en lugar de 768px y 320px respectivamente.

Cuál es su estrategia de ingresos programáticos para 2019?

En MonetizeMore, ayudamos a los editores a obtener más ingresos de su inventario de anuncios ya existente. Somos un socio líder de publicación de Google y tenemos un conjunto de soluciones de monetización que ayudan a nuestros clientes a alcanzar sus objetivos de ingresos y resolver sus dolores de cabeza con operaciones publicitarias.

Si bien es completamente posible configurar unidades de anuncios responsivas de DFP por su cuenta, es importante tener en cuenta su costo de oportunidad. Vale la pena pasar el tiempo que podría dedicar a hacer crecer su negocio y arriesgarse a perder ingresos por una configuración defectuosa?

Si está interesado en obtener ayuda para configurar unidades de anuncios de DFP responsivos, regístrese hoy en MonetizeMore!

Kean Graham

Kean Graham is the CEO and founder of MonetizeMore & a pioneer in the Adtech Industry. He is the resident expert in Ad Optimization, covering areas like Adsense Optimization,GAM Management, and third-party ad network partnerships. Kean believes in the supremacy of direct publisher deals and holistic optimization as keys to effective and consistent ad revenue increases.