Adsense adaptable en web responsive

JUAKO1982

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
15 Dic 2011
Mensajes
283
Hola a todos. Estoy creando una web responsive. Y quiero poner adsense versión adaptable. Mi pregunta es la siguiente: ¿simplemente hay que crear un anuncio adaptable? ¿Y no hay que decirle las dimensiones?
Otra cosa ¿para los bloques de enlaces que se puede hacer? Muchas gracias.
 

Fabián Rodríguez

Lambda
Programador
Verificación en dos pasos desactivada
Desde
24 Mar 2008
Mensajes
2.848
Hola, tienes que ir colocando el código de cada anuncio, seguido por las dimensiones.

Para lo de los bloques, como dije, tienes que definir dimensiones, una vez hecho, colocas un bloque de anuncios en forma de listado, que sería el mas pequeño.
Te dejo un código totalmente funcional que tengo implementado en uno de mis sitios, solo es cambiarle el google_ad_client, el google__Ad_slot (códgio de anuncio) y el valor con el que se compara el width en cada condicional.


HTML:
width = document.documentElement.clientWidth;
			google_ad_client = "ca-pub-xxxxxxxxxxxxxx";
			
			if(width >= 728) {				
			google_ad_slot = "xxxxxxxx";			
			google_ad_width = 728;
			google_ad_height = 90;
			
			}

			else if (width >= 380) {
				google_ad_slot = "xxxxxx";
				google_ad_width = 336;
				google_ad_height = 280;
			}



			else if (width >= 200) {
				google_ad_slot = "xxxxxxx";
				google_ad_width = 200;
				google_ad_height = 90;
			}

			else if (width >= 120) {
				google_ad_slot = "xxxxxxx";
				google_ad_width = 120;
				google_ad_height = 90;
			}
 

Galbatorix

Dseda
Verificación en dos pasos desactivada
Desde
13 May 2013
Mensajes
1.232
Hola a todos. Estoy creando una web responsive. Y quiero poner adsense versión adaptable. Mi pregunta es la siguiente: ¿simplemente hay que crear un anuncio adaptable? ¿Y no hay que decirle las dimensiones?
Otra cosa ¿para los bloques de enlaces que se puede hacer? Muchas gracias.


Puedes simplemente crear el anuncio adaptable y dejar que este elija el tamaño, aunque puede ocurrir que los resultados no sean siempre lo que tu quieres.

Pero plantéate este escenario.

Si el usuario ve una página en

- una computadora de escritorio, mostrar un anuncio de 360x360
- una tablet de alta resolución, mostrar un anuncio de 7280x90
- un tablet normal o un smartphone, mostrar un anuncio de 320x100
- un dispositivo con una resolución de 320px o menos, mostrar un anuncio de 234x60

Simplemente usa media queries y modifica max-width y max heigh de la clase adsbygoogle.

EDITO:
Que terrible implementación la de arriba. Deja el trabajo de decidir el tamaño del anuncio y de adaptarse al medio que muestra el anuncio al dispositivo, no a tu servidor.
 
Última edición:

JUAKO1982

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
15 Dic 2011
Mensajes
283
Puedes simplemente crear el anuncio adaptable y dejar que este elija el tamaño, aunque puede ocurrir que los resultados no sean siempre lo que tu quieres.

Pero plantéate este escenario.

Si el usuario ve una página en

- una computadora de escritorio, mostrar un anuncio de 360x360
- una tablet de alta resolución, mostrar un anuncio de 7280x90
- un tablet normal o un smartphone, mostrar un anuncio de 320x100
- un dispositivo con una resolución de 320px o menos, mostrar un anuncio de 234x60

Simplemente usa media queries y modifica max-width y max heigh de la clase adsbygoogle.

EDITO:
Que terrible implementación la de arriba. Deja el trabajo de decidir el tamaño del anuncio y de adaptarse al medio que muestra el anuncio al dispositivo, no a tu servidor.

Lo último que dices de terrible implementación a qué te refieres? ¿Tu dejarías el código y que se adapte sólo?
 

Carlos Perez

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
6 Ago 2013
Mensajes
410
Me parecia que ya habia anuncios de adsense adaptables oficiales pero aun estaban en beta.
En dado caso busca un buen tema, hay buenos temas (wordpress) pero estos solo ocupan anuncios cuadrados pero eso si en todos los moviles aparecen.
 

MorrisM

Dseda
Verificación en dos pasos desactivada
Desde
16 Jul 2011
Mensajes
1.050
Hola, tienes que ir colocando el código de cada anuncio, seguido por las dimensiones.

Para lo de los bloques, como dije, tienes que definir dimensiones, una vez hecho, colocas un bloque de anuncios en forma de listado, que sería el mas pequeño.
Te dejo un código totalmente funcional que tengo implementado en uno de mis sitios, solo es cambiarle el google_ad_client, el google__Ad_slot (códgio de anuncio) y el valor con el que se compara el width en cada condicional.


HTML:
width = document.documentElement.clientWidth;
			google_ad_client = "ca-pub-xxxxxxxxxxxxxx";
			
			if(width >= 728) {				
			google_ad_slot = "xxxxxxxx";			
			google_ad_width = 728;
			google_ad_height = 90;
			
			}

			else if (width >= 380) {
				google_ad_slot = "xxxxxx";
				google_ad_width = 336;
				google_ad_height = 280;
			}



			else if (width >= 200) {
				google_ad_slot = "xxxxxxx";
				google_ad_width = 200;
				google_ad_height = 90;
			}

			else if (width >= 120) {
				google_ad_slot = "xxxxxxx";
				google_ad_width = 120;
				google_ad_height = 90;
			}


Este es un acercamiento viejo. Te recomendaría usar asíncrono, es mejor para la carga.

Se hace desde el CSS.

Este código te pone el tamaño en automático:

Insertar CODE, HTML o PHP:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive_homepage -->
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Saludos
 

Galbatorix

Dseda
Verificación en dos pasos desactivada
Desde
13 May 2013
Mensajes
1.232
Lo último que dices de terrible implementación a qué te refieres? ¿Tu dejarías el código y que se adapte sólo?

El código dice que cuando se solicita la página se "mide" el tamaño del medio y se devuelve el anuncio con el tamaño elegido. El código tiene varios problemas de concepto.

Por ejemplo, la función devuelve todo el anuncio cada vez, cuando lo único que tiene que hacer es devolver el ancho y el alto. Usando switch el codigo sería un poco más eficiente:
PHP:
switch ($width) {
  case (>320): 
    alto=60; ancho=234;
}

Pero sigue siendo una mala implementación. Que pasa si el usuario llama la página en modo horizontal y le dan ancho de 640 y luego pone el teléfono en 320: el anuncio no cambia de tamaño, porque este tamaño se definió en el momento de generación y ya no cambia, eso no es adaptable.

El diseño adaptable cambia junto con el medio que muestra la página: cambia si ves una página en horizontal y lo pones en vertical. Se adapta a cualquier tamaño, incluso dinámicamente, como cuando redimencionas una ventana.

Yo uso media-queries.
 

JUAKO1982

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
15 Dic 2011
Mensajes
283
Este es un acercamiento viejo. Te recomendaría usar asíncrono, es mejor para la carga.

Se hace desde el CSS.

Este código te pone el tamaño en automático:

Insertar CODE, HTML o PHP:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive_homepage -->
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Saludos

Pero hay algo que no entiendo. Yo genero el código adaptable automático. Y luego lo pongo en un lugar en el cual quiero que salga un cuadrado de 200x200. ¿Qué pasará entonces? ¿Siempre que exista una pantalla donde quepa el anuncio se va a mostrar el cuadrado de 200x200? Pero si es un rectángulo la cosa cambia. Si pego el código en un lugar de 728x90 ¿qué pasa cuando la pantalla disminuye a una de móvil por ejemplo? ¿Y con una vertical de 160x600 también pasa lo mismo?

Digo esto porque cuando genero el código adaptable automático no aparecen las dimensiones por ningún lado y eso es un poco raro.

---------- Post agregado el 03-abr-2014 hora: 16:19 ----------

¿Y qué pasa con los bloques de enlaces? ¿Se puede hacer algo con ellos en una web responsive?
 

MorrisM

Dseda
Verificación en dos pasos desactivada
Desde
16 Jul 2011
Mensajes
1.050
Se debe adaptar al tamaño automáticamente para rellenar el espacio.

Yo lo uso de forma avanzada con este código:

Insertar CODE, HTML o PHP:
<style type="text/css">

.adslot_1 { width: 320px; height: 50px; } [MENTION=16931]medi[/MENTION]a (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } } [MENTION=16931]medi[/MENTION]a (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

</style>

El HTML queda así:

Insertar CODE, HTML o PHP:
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
 

JUAKO1982

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
15 Dic 2011
Mensajes
283
Se debe adaptar al tamaño automáticamente para rellenar el espacio.

Yo lo uso de forma avanzada con este código:

Insertar CODE, HTML o PHP:
<style type="text/css">

.adslot_1 { width: 320px; height: 50px; } [MENTION=16931]medi[/MENTION]a (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } } [MENTION=16931]medi[/MENTION]a (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

</style>

El HTML queda así:

Insertar CODE, HTML o PHP:
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Gracias. ¿Pego el código tal cual? ¿O solo la segunda parte que has puesto "el html queda así?
Otra cosa. Si es un bloque cuadrado que en la versión de ordenador tiene 200x200 qué código avanzado tengo que poner?
 

MorrisM

Dseda
Verificación en dos pasos desactivada
Desde
16 Jul 2011
Mensajes
1.050
Se deben poner los 2.

El primero va en el header o dentro del archivo .CSS.

El segundo va en el HTML donde se coloca el ad.

Analiza el código y sabrás que hacer. No tiene mucha ciencia. Leelo y trata de entenderlo. Te explico:

.adslot_1 { width: 320px; height: 50px; } media (min-width:500px)

Lo que dice es en una resolución mínima de 500px muestra un 320x50.

El bloque de 200x200 se ve perfectamente en el teléfono, no veo motivo para usar responsivo.
 

JUAKO1982

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
15 Dic 2011
Mensajes
283
Se deben poner los 2.

El primero va en el header o dentro del archivo .CSS.

El segundo va en el HTML donde se coloca el ad.

Analiza el código y sabrás que hacer. No tiene mucha ciencia. Leelo y trata de entenderlo. Te explico:

.adslot_1 { width: 320px; height: 50px; } media (min-width:500px)

Lo que dice es en una resolución mínima de 500px muestra un 320x50.

El bloque de 200x200 se ve perfectamente en el teléfono, no veo motivo para usar responsivo.

Muchas gracias por tu ayuda. ¿Puedo modificar el código? Es decir, ¿puedo modificar los anchos y los altos del código adaptable avanzado?

<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
(min-width:500px) { .adslot_1 { width: 468px; height: 60px; } } [MENTION=16931]medi[/MENTION]a (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

¿Podría cambiar por ejemplo el valor de 320x50 por otro? ¿Y el min-width:800px podría poner de 900px?
Muchas gracias por todos los comentarios y ayudas.
 

MorrisM

Dseda
Verificación en dos pasos desactivada
Desde
16 Jul 2011
Mensajes
1.050
¡Claro! Puedes modificar y poner lo que gustes. Y puedes agregar más condiciones para cada resolución.

Con los nuevos ads adaptables cualquier tamaño es válido.

Ahora, Yo lo uso con max-width en lugar de min-width. Se me hace más fácil.

Por ejemplo, aquí muestro un 300x250 en los teléfonos cuando están vertical:

Insertar CODE, HTML o PHP:
@media screen and (max-width:320px){.adslot_1{width:300px;height:250px}.adslot_page{width:300px;height:250px}}.post a{color:red}

Después entras aquí para probar tu diseño en todas las resoluciones y dispositivos.
Screenfly / Test Your Website at Different Screen Resolutions
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros, intermediario gratis
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba