Cómo usar Adsense en una web responsive

  • Autor Autor JUAKO1982
  • Fecha de inicio Fecha de inicio
JUAKO1982

JUAKO1982

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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.
 
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;
			}
 
JUAKO1982 dijo:
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.
Hacer clic para expandir...


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:
Galbatorix dijo:
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.
Hacer clic para expandir...

Lo último que dices de terrible implementación a qué te refieres? ¿Tu dejarías el código y que se adapte sólo?
 
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.
 
Fabián Rodríguez dijo:
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;
			}
Hacer clic para expandir...


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
 
JUAKO1982 dijo:
Lo último que dices de terrible implementación a qué te refieres? ¿Tu dejarías el código y que se adapte sólo?
Hacer clic para expandir...

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.
 
MorrisM dijo:
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
Hacer clic para expandir...

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?
 
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>
 
MorrisM dijo:
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>
Hacer clic para expandir...

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?
 
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.
 
MorrisM dijo:
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.
Hacer clic para expandir...

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.
 
¡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.
Enlace eliminado
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

daenolpa1997
¿Cómo usar varias cuentas AdSense desde otro país sin riesgo de baneo?
2 3
Respuestas
41
Visitas
1K
garyt
G
Hojure
¿Puedo usar Adsense y PopAds juntos en mi sitio web?
Respuestas
6
Visitas
235
Hojure
Hojure
christapia
¿Puedo usar Adsense en mi web de noticias de anime?
Respuestas
3
Visitas
240
m16u31
m16u31
Marco2018
Mejores prácticas para usar AdSense y Mgid en una web
Respuestas
4
Visitas
344
Marco2018
Marco2018
P
Cómo monetizar mi web sin usar AdSense o InfoLinks
Respuestas
8
Visitas
571
Amaya Adsterra
Amaya Adsterra
Atrás
Arriba