Tutorial: AdSense Responsive

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
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:



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.
 
Última edición:
Gracias por el super aporte 🙄
una pregunta eso solo sirve si mi sitio no es responsive?

por que mi sitio es responsive, necesitare hacerle esos a los codigos de adsense?

Saludos
 
Gracias por el super aporte 🙄
una pregunta eso solo sirve si mi sitio no es responsive?

por que mi sitio es responsive, necesitare hacerle esos a los codigos de adsense?

Saludos

los codes estos son para los sitios responsives... XD lo que hace esto es que el banner de 728 te desconfigure el diseño, ya que no se adapta a la pantalla como los de 300x250 y los de 480x60.. es solo si tenes ese tipo de banners.
 
Gracias hombre Enhorabuena!... Vaya actualmente estaba buscando la forma de hacer esto, ya tengo la info y ahora no se como empezar para implementarlo! buscare ayuda ....
 
los codes estos son para los sitios responsives... XD lo que hace esto es que el banner de 728 te desconfigure el diseño, ya que no se adapta a la pantalla como los de 300x250 y los de 480x60.. es solo si tenes ese tipo de banners.

jaaa gracias de nuevo jeje XD
 
Este ya está en el top 5 de los mejores tutoriales del año. Gracias :encouragement:.
 
Justo acabo de instalar un thema adaptable y me mostraba los banners raros al reducir la pantalla.
Yo voy a optar por crear varios anuncios Adsense. Así tengo mayor control sobre quien entra a mi web y enfocar me más en el diseño para esas dimensiones

---------- Post agregado en la hora: 12:17 ---------- Anterior post agregado en la hora: 12:05 ----------

También esta publicado en el blog de webmaster oficial Google http://googlewebmastercentral.blogspot.ie/2012/04/responsive-design-harnessing-power-of.html?m=1

Otra cosa interesante es probarlo para banners de afiliados
 
MUY interesante aporte! Gracias!
 

sisis yo puse la fuente original: Cómo usar AdSense con un diseño adaptable - Dentro de AdSense
desde ya lo que habla el post que pusistes es usar media querys para CSS no para adsense.
 
Es que mi inglés peca por sus fallos. Entre en el enlace que puse. Pero no entendí mucho.
Aunque me pareció interesante destacar que también lo plantean en Google com

A por cierto también se pueden eliminar la publicidad según el tamaño de la pantalla dejando el espacio en blanco
 

pero solo podrias hacerlo con JS o PHP, no puedes hacerlo con CSS ya que estarias ocultando el banner y tmb generarias impresiones invalidas.
 
Muchas gracias, lo pondré en practica
 
Disculpa pero no me queda claro, el codigo php que esta ahi (claro con los datos de mi cuenta) van en lugar de los cuadros de adsense que tengo actualmente.?
 
Adsense no me deja usarlo por tener streaming en la web 🙁
 
Eres fuente de inspiración para muchos de nosotros GRACIAS🙂
 
Disculpa pero no me queda claro, el codigo php que esta ahi (claro con los datos de mi cuenta) van en lugar de los cuadros de adsense que tengo actualmente.?

sisi, eso va en lugar de los cuadros generados desde tu cuenta de adsense.
 
Buen tutorial, aunque yo no tengo sitios responsive, pero quizás algún día lo necesite. La verdad es que no sé si vale pero nada pierdo con probar, a ver si mejoro algo mis ganancias.
 
Ya lo implementé...
 
¿Aguien lo a implementado en blogger?
 

Temas similares