Cómo hacer bloques de anuncios adaptables de DFP

Publicado: 2016-01-22

Anuncios adaptables de Google DFP: ejemplo de etiqueta de doble clic

Esta publicación se actualizó por última vez el 31 de agosto de 2021

Así que tiene un tema receptivo y ahora quiere pasar a Google Ad Manager (GAM) desde AdSense. Lo primero que ve es que no hay más bloques de anuncios receptivos como los que normalmente encuentra en AdSense.

Las instrucciones de soporte de Google pueden ser un poco engañosas o complicadas. Así que hoy les mostraré cómo pueden hacer que los códigos GAM respondan en unos simples pasos.

Personalizar el código de DFP para que los anuncios adaptables de Google Ad Manager no es tarea fácil.Si no tiene experiencia en codificación, sería más prudente que los expertos lo hicieran correctamente la primera vez.¡No quiere arriesgarse a perder sus ingresos publicitarios!

Si necesitas ayuda , contáctanos aquí.

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

Configura tu inventario. Configure todos los tamaños relevantes por bloque de anuncios. Leer: Mejores prácticas de integración de Adsense y GAM
Consulte nuestro tutorial sobre cómo generar varias etiquetas de Ad Manager aquí: https://youtu.be/s74dMDzczyc
Ahora crea dos archivos de texto y guárdalos. Use un buen editor de texto (prefiero usar Notepad ++ porque es gratis y fácil de usar).
Haz uno para la cabeza y otro para las etiquetas del cuerpo.
Guarde las etiquetas del cuerpo.
Abra el archivo head.txt que ha creado.

Hacer que la etiqueta principal responda

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

<!– Iniciar etiqueta GPT –>

ventana.googletag = ventana.googletag || {comando: []};

googletag.cmd.push(función() {

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>

<!– Finalizar etiqueta GPT –>

Paso 2: he resaltado un fragmento de código allí:

googletag.cmd.push(función() {

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

El número de mapas de tamaño. Puede reutilizar el mapa del mismo tamaño en varios bloques de anuncios, si corresponde.
El número de bloques de anuncios que tiene
La cantidad de bloques de anuncios que desea que sean receptivos

var mappingadunitname = googletag.sizeMapping().

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

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

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //móvil

añadirTamaño([0, 0], [[320, 50], [1, 1]]). //otro

construir();

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

googletag.cmd.push(función() {

Paso 4: después de agregar la asignación, el código de su encabezado debería verse así:

<!– Iniciar etiqueta GPT –>

ventana.googletag = ventana.googletag || {comando: []};

googletag.cmd.push(función() {

var mappingheaderad1 = googletag.sizeMapping().

añadirTamaño([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //escritorio

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

añadirTamaño([0, 0], [1, 1]). //otro

construir();

var mapeocontentad1 = googletag.sizeMapping().

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

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

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //móvil

añadirTamaño([0, 0], [[320, 50], [1, 1]]). //otro

construir();

var mapeocontentad2 = googletag.sizeMapping().

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

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

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

añadirTamaño([0, 0], [[300, 250], [1, 1]]). //otro

construir();

var mapeorightrail1 = googletag.sizeMapping().

añadirTamaño([992, 0], [[300, 250], [1, 1]]). //escritorio

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

añadirTamaño([0, 0], [1, 1]). //otro

construir();

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>

<!– Finalizar etiqueta GPT –>

Paso 5: ahora un último paso: debe definir o asignar una asignación de tamaño para cada uno de los bloques de anuncios.Tomemos uno aquí y luego te 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 coincidan con el mapa de tamaño que desea agregar dentro del bloque 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 un mapeo similar para todos los demás bloques de anuncios le dará su código final.

<!– Iniciar etiqueta GPT –>

ventana.googletag = ventana.googletag || {comando: []};

googletag.cmd.push(función() {

var mappingheaderad1 = googletag.sizeMapping().

añadirTamaño([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //escritorio

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

añadirTamaño([0, 0], [1, 1]). //otro

construir();

var mapeocontentad1 = googletag.sizeMapping().

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

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

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //móvil

añadirTamaño([0, 0], [[320, 50], [1, 1]]). //otro

construir();

var mapeocontentad2 = googletag.sizeMapping().

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

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

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

añadirTamaño([0, 0], [[300, 250], [1, 1]]). //otro

construir();

var mapeorightrail1 = googletag.sizeMapping().

añadirTamaño([992, 0], [[300, 250], [1, 1]]). //escritorio

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

añadirTamaño([0, 0], [1, 1]). //otro

construir();

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>

<!– Finalizar etiqueta GPT –>

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

Paso 8: ahora veamos la asignación de tamaño:

var mapeocontentad2 = googletag.sizeMapping().

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

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

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

añadirTamaño([0, 0], [[300, 250], [1, 1]]). //otro

construir();

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

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

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

Y en la última línea estamos diciendo:

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

Los números 992px, 768px y 320px funcionarán para la mayoría de los sitios web, ya que siguen los tamaños convencionales de los navegadores de escritorio, tableta y móvil.

Sin embargo, si tiene un sitio web con un tema para tableta y móvil, puede preguntarle a su 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 existente.Somos uno de los principales socios editoriales de Google y contamos con un conjunto de soluciones de monetización para editores que ayudan a nuestros clientes a alcanzar sus objetivos de ingresos y resolver sus dolores de cabeza relacionados con las operaciones publicitarias.

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

Si está interesado en obtener ayuda para configurar bloques de anuncios adaptables de DFP.¡Regístrese para obtener una cuenta Premium en MonetizeMore hoy!

Lecturas relacionadas:

AdSense ofrece bloques de anuncios receptivos
Principales tipos de anuncios para móviles en 2016
Los beneficios de las páginas móviles aceleradas de Doubleclick para editores
Cómo preparar a los editores para que la inversión en anuncios móviles supere a los equipos de escritorio
Doubleclick ahora ofrece seguimiento entre dispositivos y publicidad nativa para anunciantes y editores móviles