Cómo usar Adsense en una web responsive

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...

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...

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...

<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>

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...

switch ($width) {
  case (>320): 
    alto=60; ancho=234;
}

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...

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...

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...