Tutorial: AdSense Responsive

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio
Excelente aporte compañero :encouragement:
 
cuento que hace unos días que lo tengo aplicado adaptado a mis necesidades y los resultados son óptimos, lo bueno es que se ajusta al ancho de como está la ventana u orientación del móvil o tablet al momento de la carga, por ejemplo si cargo desde el móvil en vertical ajusta al ancho del móvil vertical, en caso de tenerlo horizontal, ajusta al ancho del móvil horizontal, en algunos navegadores de ordenadores como por ejemplo en caso del safari en la mac si la ventana la achico un poco carga con respecto al ancho que tenga ajustada la ventana al momento de cargar la página...

tmb comento que los if del código se pueden ajustar, de hecho yo lo que hice fue unos if con anchos exactos de móviles como el iphone 4,4s 960px, o iphone 5 1136px que es un poco más, anchos genéricos de netbooks como es el 1024px etc y dsp los típicos, si es menor de 800, menor de 400 etc.. en cada caso con un anuncio determinado, así se hace un excelente responsive... incluso se pueden hacer pruebas a/b o a/b/c y responsive a la vez... se puede jugar y probar muchas cosas hasta encontrar lo más rentable para nuestra web
 
buen aporte, gracias!
 
Una consulta cicklow, es necesario crear el anuncio en el code antiguo? o basta con poner el pub- ? saludos y gracias :encouragement:
cicklow dijo:
Antes que nada y se que muchos comentaran que esto no esta permitido ni nada, ya que se modifica el código de adsense, les aviso:
Esta modificación es la UNICA PERMITIDA por adsense para hacer que tus banners funcionen responsivamente.



Junto a tu contenido, los anuncios de AdSense se pueden ajustar a distintos tamaños de pantallas usando un fragmento de JavaScript muy sencillo. Para aprovechar el diseño adaptable, primero crea varios tamaños de anuncios, por ejemplo 728 x 90, 468 x 60 y 300 x 250. A continuación, implementa un fragmento “if-else” para publicar el tamaño de anuncio correcto según el tamaño del dispositivo del usuario. Aquí te mostramos un ejemplo del código JavaScript relevante:

9e24ef17eb475b8892379a6b023e915b.png


Si no queremos crear un banner para cada tamaño de pantalla, lo que podremos hacer es usar el viejo codigo de adsense. (Old AdSense Code Generator)
PHP: 
<script type="text/javascript"><!--
google_ad_client = "pub-";
if(window.innerWidth >= 800){
 google_ad_width = 728;
 google_ad_height = 90;
 google_ad_format = "728x90_as";
}else if(window.innerWidth < 400){
 google_ad_width = 300;
 google_ad_height = 250;
 google_ad_format = "300x250_as";
}else{
 google_ad_width = 468;
 google_ad_height = 60;
 google_ad_format = "468x60_as";
}
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Para obtener recursos adicionales sobre el valor de la tecnología para móviles, probar tu sitio y encontrar desarrolladores que te ayuden a crear tu sitio optimizado para móviles, visita ¿Está tu web adaptada al móvil?

Saludos!

Fuente: Cómo usar AdSense con un diseño adaptable - Dentro de AdSense

PD: esto es para evitar que los banners de 728 te descuadren el diseño en los dispositivos mobiles o tablets... ya que los banners de 300x250 y los 468x90 no descuadran el diseño, son los banners que se adaptan automaticamente a la pantalla.
Hacer clic para expandir...
 
nicorto dijo:
Una consulta cicklow, es necesario crear el anuncio en el code antiguo? o basta con poner el pub- ? saludos y gracias :encouragement:
Hacer clic para expandir...

puedes usar el code nuevo, pero tendras que crear un banner de cada tamaño.
 
no, me refiero a ese código que pones
google_ad_client = "pub-";
if(window.innerWidth >= 800){
google_ad_width = 728;

bastaría con poner el pub- del editor?
cicklow dijo:
puedes usar el code nuevo, pero tendras que crear un banner de cada tamaño.
Hacer clic para expandir...
 
nicorto dijo:
no, me refiero a ese código que pones
google_ad_client = "pub-";
if(window.innerWidth >= 800){
google_ad_width = 728;

bastaría con poner el pub- del editor?
Hacer clic para expandir...

aaaa sisisi XD 🙂
 
Me viene bien luego lo pruebo con algun sitio saludoss:encouragement:
 
cicklow dijo:
Antes que nada y se que muchos comentaran que esto no esta permitido ni nada, ya que se modifica el código de adsense, les aviso:
Esta modificación es la UNICA PERMITIDA por adsense para hacer que tus banners funcionen responsivamente.



Junto a tu contenido, los anuncios de AdSense se pueden ajustar a distintos tamaños de pantallas usando un fragmento de JavaScript muy sencillo. Para aprovechar el diseño adaptable, primero crea varios tamaños de anuncios, por ejemplo 728 x 90, 468 x 60 y 300 x 250. A continuación, implementa un fragmento “if-else” para publicar el tamaño de anuncio correcto según el tamaño del dispositivo del usuario. Aquí te mostramos un ejemplo del código JavaScript relevante:

9e24ef17eb475b8892379a6b023e915b.png


Si no queremos crear un banner para cada tamaño de pantalla, lo que podremos hacer es usar el viejo codigo de adsense. (Old AdSense Code Generator)
PHP: 
<script type="text/javascript"><!--
google_ad_client = "pub-";
if(window.innerWidth >= 800){
 google_ad_width = 728;
 google_ad_height = 90;
 google_ad_format = "728x90_as";
}else if(window.innerWidth < 400){
 google_ad_width = 300;
 google_ad_height = 250;
 google_ad_format = "300x250_as";
}else{
 google_ad_width = 468;
 google_ad_height = 60;
 google_ad_format = "468x60_as";
}
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Para obtener recursos adicionales sobre el valor de la tecnología para móviles, probar tu sitio y encontrar desarrolladores que te ayuden a crear tu sitio optimizado para móviles, visita ¿Está tu web adaptada al móvil?

Saludos!

Fuente: Cómo usar AdSense con un diseño adaptable - Dentro de AdSense

PD: esto es para evitar que los banners de 728 te descuadren el diseño en los dispositivos mobiles o tablets... ya que los banners de 300x250 y los 468x90 no descuadran el diseño, son los banners que se adaptan automaticamente a la pantalla.
Hacer clic para expandir...

Disculpa que te moleste [MENTION=9679]cicklow[/MENTION], es que mientras más busco, más me confundo.
Resulta que en mi plantilla tengo un solo bloque de anuncio de tamaño: 336x280 debajo del título de cada artículo (single.php) Cuando se ingresa con un dispositivo móvil este anuncio ocupa casi toda la pantalla y como sabemos, esto no está permitido por Adsense...

Quería saber como transformar ese anuncio en uno de 320x50 px cuando se ingrese con un iphone o tablet por ejemplo... ¿Se puede? como lo tengo que hacer?, estoy bastante liado con esto, ni idea como hacerlo...

---------- Post agregado el 18-ene-2014 hora: 13:04 ----------

[MENTION] cicklow[/MENTION] quedaría bien si lo hago así?

Insertar CODE, HTML o PHP: 
<style>
.adsbygoogle { width:336px; height:280px } media(min-width: 500px) { .adsbygoogle { width: 320px; height: 50px; } } media(min-width: 800px) { .adsbygoogle { width: 300px; height: 250px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- banner responsive -->
<ins class="adsbygoogle"
     style="display:inline-block;"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
Felipe dijo:
Disculpa que te moleste [MENTION=9679]cicklow[/MENTION], es que mientras más busco, más me confundo.
Resulta que en mi plantilla tengo un solo bloque de anuncio de tamaño: 336x280 debajo del título de cada artículo (single.php) Cuando se ingresa con un dispositivo móvil este anuncio ocupa casi toda la pantalla y como sabemos, esto no está permitido por Adsense...

Quería saber como transformar ese anuncio en uno de 320x50 px cuando se ingrese con un iphone o tablet por ejemplo... ¿Se puede? como lo tengo que hacer?, estoy bastante liado con esto, ni idea como hacerlo...

---------- Post agregado el 18-ene-2014 hora: 13:04 ----------

[MENTION] cicklow[/MENTION] quedaría bien si lo hago así?

Insertar CODE, HTML o PHP: 
<style>
.adsbygoogle { width:336px; height:280px } media(min-width: 500px) { .adsbygoogle { width: 320px; height: 50px; } } media(min-width: 800px) { .adsbygoogle { width: 300px; height: 250px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- banner responsive -->
<ins class="adsbygoogle"
     style="display:inline-block;"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Hacer clic para expandir...
es que estas usando el code nuevo de las ads, adsense te permite crear anuncios adaptables desde tu cuenta sin complicarte tanto, podes usar eso.
 
cicklow dijo:
es que estas usando el code nuevo de las ads, adsense te permite crear anuncios adaptables desde tu cuenta sin complicarte tanto, podes usar eso.
Hacer clic para expandir...

Ahora estoy ocupando el código de un anuncio de 320 x 200 asincrono, tu dices que ese se adapta solo?.... lo que pasa es que me ocupa gran parte de la mitad de arriba de la pantalla y no muestra el contenido al usuario de dispositivo movil... como lo transformo en uno de 320x50... quizas no se puede y yo ando molestando xD
 
Felipe dijo:
Ahora estoy ocupando el código de un anuncio de 320 x 200 asincrono, tu dices que ese se adapta solo?.... lo que pasa es que me ocupa gran parte de la mitad de arriba de la pantalla y no muestra el contenido al usuario de dispositivo movil... como lo transformo en uno de 320x50... quizas no se puede y yo ando molestando xD
Hacer clic para expandir...

cuando creas el banner en tu cuenta te pregunta que tipo, el code viejo, el nuevo o responsive... usas este ultimo
 
Muchas gracias por el tuto

Enviado desde mi GT-S5360L usando Tapatalk 2
 
cicklow dijo:
cuando creas el banner en tu cuenta te pregunta que tipo, el code viejo, el nuevo o responsive... usas este ultimo
Hacer clic para expandir...

Yo creo que mi cuenta no tiene eso, lo único que sale como "responsive" es cuando elijo el tamaño del anuncio... mira la captura, luego cuando me entrega el codigo, solo me entrega el sincrono y asincrono...

Captura de pantalla 2014-01-19 a la(s) 15.58.15.webp
 
cicklow dijo:
cuando creas el banner en tu cuenta te pregunta que tipo, el code viejo, el nuevo o responsive... usas este ultimo
Hacer clic para expandir...

Hola, una pregunta clcklow, esto sirve para convertir la lista de enlaces de 728x15 a 200x90 por ejemplo?

Gracias!
 
epsilo99 dijo:
Hola, una pregunta clcklow, esto sirve para convertir la lista de enlaces de 728x15 a 200x90 por ejemplo?

Gracias!
Hacer clic para expandir...

con los de textos no sabria decirte... es cuestion de ver en la ayuda de adsense a ver que dice
 
Si adsense me dice en las estadisticas que la parte de "multidispositivo" esta baja, esto arregla ese problema y ayuda a mejorar ganancias?
 
Gracias @Enlace eliminado muy buen aporte! Una pena que yo esté oxidada y no entienda ni que es Responsive 😕 Hace rato que tengo abandonados mis sitios justamente por la baja de entrada de dinero... veré de configurar los anuncios desde Adsense todo de nuevo :fatigue: ...
 
Hola! Estoy intentando implementar el código en un sitio. Hay 2 banners creados, el típico 336x280 y luego uno adaptable. Lo único que quiero es que si la pantalla es mayor o igual que 800 muestre el banner de 336x280 y si es de otro tipo quería que mostrara el adaptable (cómo no me salía bien alineado le he dado las medidas 300x250) No se si en este caso inclumplo alguna política o no..

Esto sería correcto?

Insertar CODE, HTML o PHP: 
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxxxxxxxxxx";
if(window.innerWidth >= 800){
 google_ad_width = 336;
 google_ad_height = 280;
 google_ad_format = "336x280_as";
}else{
 google_ad_width = 300;
 google_ad_height = 250;
 google_ad_format = "auto";
}
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Gracias por el tuto!
 
Hola: yo tengo una pregunta un poco tonta. Entonces ¿para qué sirven los anuncios responsive? Entiendo que poniendo este tipo de anuncios Google busca el que mejor se adapta al ancho ¿no? Entonces ¿para qué este hilo del foro?
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Framber tech
Plantilla blogger responsive para nicho de adsense
Respuestas
6
Visitas
680
metrix5
metrix5
djfumon
Usas Adsense responsive?
Respuestas
5
Visitas
392
juan25
juan25
djfumon
Modificación de código Adsense responsive
Respuestas
1
Visitas
270
BotBeta
BotBeta
Dangel Belandia
¿Cómo hacer anuncios de Adsense responsive?
Respuestas
5
Visitas
676
Dangel Belandia
Dangel Belandia
metaldan
¿Es permitido usar código duplo en Adsense?
Respuestas
4
Visitas
321
qarlios
qarlios
Atrás
Arriba