Cómo detecto las dimensiones del anuncio servido

Actualmente estoy usando etiquetas de editor de Google con DFP para publicar anuncios en un sitio que muy pronto responderá. Tenemos un espacio publicitario en particular que puede servir hasta 2 anchos potenciales, 728 o 960, y dependiendo del ancho que se publique, quiero mostrar el anuncio arriba o debajo del navegador.Cómo detecto las dimensiones del anuncio servido

Así que la primera pregunta obvia es si esto es incluso remotamente sensato y, además, ¿es posible? Sospecho que probablemente debería definir dos espacios publicitarios distintos.

La pregunta principal, aunque probablemente sea más académica, es ¿cómo puedo detectar las dimensiones de un anuncio que se ha publicado? Sospecho que la solución a esto es independiente de la plataforma publicitaria, ya que básicamente detecté la inserción del nodo y luego inspeccioné las dimensiones del elemento del contenedor.

He estado experimentando con el evento javascript DOMNodeInserted pero parece desencadenar todo "PERO" los anuncios. Estoy confundido por esto a menos que gpt inserte los anuncios de una manera que no desencadene este evento.

Fuente

2012-09-11 sphoid

¡Buena pregunta! – jnthnclrk

He hecho algo como esto antes ... y el método que establecí reemplazó una función interna de DFP (renderEnded) para poder ver cuál era el anuncio en el punto que había representado en la pantalla ...

Por ejemplo, para obtener las dimensiones del anuncio que podría hacer algo como lo siguiente (sólo he probado esto en cromo pero no debería ser demasiado lejos de ser totalmente transversal navegador):

<html> 
<head> 
    <title>DFP test</title> 

    <script type='text/javascript'> 
     var googletag = googletag || {}; 
     googletag.cmd = googletag.cmd || []; 
     (function() { 
      var gads = document.createElement('script'); 
      gads.async = true; 
      gads.type = 'text/javascript'; 
      var useSSL = 'https:' == document.location.protocol; 
      gads.src = (useSSL ? 'https:' : 'http:') + 
      '//www.googletagservices.com/tag/js/gpt.js'; 
      var node = document.getElementsByTagName('script')[0]; 
      node.parentNode.insertBefore(gads, node); 
     })(); 
    </script> 


    <script type="text/javascript"> 
     googletag.cmd.push(function() { 
      var slot1 = googletag.defineSlot('/12345678/TEST', [266, 115], 'div-gpt-ad-1340819095858-0').addService(googletag.pubads()); 

      slot1.oldRenderEnded = slot1.renderEnded; 
      slot1.renderEnded = function(){ 
       window.console.log('width: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.width); 
       window.console.log('height: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.height); 
       slot1.oldRenderEnded(); 
      }; 

      googletag.pubads().enableSingleRequest(); 
      googletag.enableServices(); 
     }); 
    </script> 

</head> 
<body> 

    <div id='div-gpt-ad-1340819095858-0' style='width:266px; height:115px;'> 
     <script type='text/javascript'> 
      googletag.cmd.push(function() { 
       googletag.display('div-gpt-ad-1340819095858-0'); 
      }); 
     </script> 
    </div> 

</body> 
</html>

Puede que eso no sea exactamente lo que buscas, pero anular esa función debería permitirte llegar a donde necesitas estar. Avísame si tienes alguna pregunta.

Fuente

2012-09-12 08:48:19

Esta es realmente la solución más cercana a lo que estoy buscando. El siguiente paso es detectar consistentemente el ancho deseado de la creatividad presentada dentro del espacio publicitario. Para nosotros, la creatividad puede variar entre iframes, imágenes y objetos flash. Descubrí que casi siempre tienen un parámetro de ancho que puedo leer. Detectar el ancho representado parece problemático si el contenedor div es demasiado pequeño ya que la creatividad simplemente se rompe horizontalmente. – sphoid

@Matt Cooper: ¿dónde y cómo descubrió la función interna de DFP renderEnded? Si hay otras funciones que puedo anular eso sería genial. – dinie

@umami Lo encontré simplemente mirando en el espacio de nombres de googletag con el inspector de Chrome. Si enciendes al inspector y escribes googletag en la consola, verás el objeto googletag ... hay algunas funciones allí y, si miras en la instancia de slot_manager_instance y profundizas en los bloques de anuncios individuales, encontrarás una gran cantidad de otras funciones ... Otro repositorio que encontré en una fecha posterior engancha el registrador de dfp interno y hace posible enganchar otras funciones de dfp también, puede encontrarlo interesante: https://github.com/mcountis/ dfp-events –

Tuve un problema similar en WiiMusic.net con Google AdSense. Lo que terminé haciendo fue detectar el tamaño del div que contenía el anuncio con JavaScript y luego cargar el anuncio. En esta situación, no fue posible cambiar la resolución o el tamaño de mi página una vez cargada, así que funcionó.

En su caso, su página puede sin duda cambiar el tamaño y lo que no. Creo que tendrá que volver a cargar los anuncios en ese punto, si desea que diferentes versiones de anuncios sean visibles en función de su diseño receptivo. Si está utilizando el código de anuncio asíncrono, esto debería ser posible.

Para resumir, sí, esto es sensato y posible con JavaScript. Sus anuncios requieren JavaScript para funcionar de todos modos, por lo que esto no debería ser una gran barrera.

Fuente

2012-09-11 17:24:38 Brad

En mi situación, realmente necesito hacer lo contrario. Ajustaré el tamaño/posición del div que contiene según el tamaño del anuncio servido, no al revés. Para hacer eso, necesito encontrar una forma de definir una devolución de llamada para cuando se inserte el anuncio. Como dije, probé el evento DOMNodeInserted y también estoy experimentando con DOMSubtreeModified para detectar cuándo se inserta el contenido del anuncio. – sphoid

@sphoid, perdone mi ignorancia, pero pensé que los espacios publicitarios de DFP solo podían contener un tamaño. ¿Cómo determina DFP qué tamaño de anuncio le servirá? ¿Está dimensionando su página de forma diferente según el tamaño de anuncio que obtenga? Creo que el problema DOMNodeInserted se debe al iframe en el que se está publicando el anuncio. – Brad

Puede definir varios tamaños de anuncio separados por comas para una ranura en googletag.defineslot(). Lo hago principalmente para el espacio publicitario de la tabla de clasificación, que puede mostrar banners de ancho de página completa, así como banners centrados más estrechos. Algunos de mis anuncios no insertan iframes, en su lugar generan un div de forma dinámica e insertan algunas etiquetas de script y, a veces, etiquetas de objeto si la creatividad está basada en flash. Debería ser capaz de detectar cuando esos elementos se insertan al menos. – sphoid

Así que, como de costumbre, estaba pensando demasiado en esto. La razón por la que no detecté un cambio de DOM es porque el anuncio ya se había insertado cuando yo estaba asignando los controladores de eventos. Cuando cargue anuncios sincrónicamente, puedo medir inmediatamente las dimensiones del contenedor div y obtener las dimensiones del anuncio. Al cargar de forma asíncrona, puedo sondear los cambios html internos almacenando el html original usando y sondeando los cambios y haciendo la medición del contenedor div cuando ocurre el cambio. Gracias Brad por tu tiempo.

Fuente

2012-09-11 18:09:05 sphoid

Hablé demasiado pronto. Esta solución solo funciona en situaciones donde el contenedor div puede cambiar el tamaño cuando la creatividad lo amerite. Tengo un escenario en el que el contenedor div no puede cambiar de tamaño, por lo que la creatividad se rompe horizontalmente, que es el problema que estoy tratando de evitar. Supongo que necesito una forma legítima de detectar las dimensiones de la creatividad. – sphoid

Ha habido una actualización de GPT que permite que esto se haga de una manera más elegante. El evento le dirá si se devolvió una creatividad y, de ser así, las dimensiones, así como información adicional.

googletag.pubads().addEventListener('slotRenderEnded', function(event) { 
console.log('Creative with id: ' + event.creativeId + 
    ' is rendered to slot of size: ' + event.size[0] + 'x' + event.size[1]); 
});

También hay event.isEmpty que le dirá si una creatividad real fue devuelta o no.

Fuente

2014-04-17 17:52:38 Ken

y un evento.Tamaño también "array, indica el tamaño de la creatividad procesada". https://support.google.com/dfp_premium/answer/1650154?hl=es – MarkD

Esta debería ser la respuesta seleccionada ahora. – jnthnclrk

Cómo detecto las dimensiones del anuncio servido

Respuesta

Cuestiones relacionadas