Tutorial: AdSense Responsive

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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.

El diseño adaptable es una técnica de diseño de sitios web que te permite crear un sitio individual que se adaptará al dispositivo desde el que se visualiza: portátil, smartphone o tablet. Un sitio con diseño adaptable cambia automáticamente su tamaño para los distintos dispositivos, pero eres tú quien debe decidir qué contenido importa más al usuario de móvil.
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:

JeansReal

Delta
Social Media
Verificación en dos pasos desactivada
Desde
26 Dic 2011
Mensajes
658
Edad
24
Crédito(s)
0
Puntos
2
Gracias por el super aporte :rolleyes:
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
 

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
Gracias por el super aporte :rolleyes:
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.
 

Mandrake

Dseda
Verificación en dos pasos desactivada
Desde
11 Jul 2011
Mensajes
1.064
Crédito(s)
0
Puntos
0
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 ....
 

JeansReal

Delta
Social Media
Verificación en dos pasos desactivada
Desde
26 Dic 2011
Mensajes
658
Edad
24
Crédito(s)
0
Puntos
2
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
 

César Arévalo

1
Pi
Marketing
Verificado con documento
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Nov 2009
Mensajes
5.492
Crédito(s)
0
Puntos
490
Este ya está en el top 5 de los mejores tutoriales del año. Gracias :encouragement:.
 

Tarrioin

Dseda
Verificación en dos pasos desactivada
Desde
28 Jul 2011
Mensajes
1.124
Crédito(s)
0
Puntos
1.169
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
 

vicarlone

1
Pi
Redactor
Verificación en dos pasos desactivada
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
10.487
Crédito(s)
0
Puntos
480
MUY interesante aporte! Gracias!
 

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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 Official Google Webmaster Central Blog: Responsive design – harnessing the power of media queries

Otra cosa interesante es probarlo para banners de afiliados
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.
 

Tarrioin

Dseda
Verificación en dos pasos desactivada
Desde
28 Jul 2011
Mensajes
1.124
Crédito(s)
0
Puntos
1.169
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
 

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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.
 

EliJ

1
Pi
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
21 Mar 2012
Mensajes
5.801
Crédito(s)
0
Puntos
1.758
Muchas gracias, lo pondré en practica
 

TecnoMex

1
Pi
Redactor
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Mar 2011
Mensajes
5.452
Crédito(s)
4
Puntos
171
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.?
 

FutbolFree

Baneado
Delta
Verificación en dos pasos desactivada
Desde
1 Ago 2012
Mensajes
523
Edad
29
Crédito(s)
1
Puntos
243
Adsense no me deja usarlo por tener streaming en la web :(
 

isaacmartinez

Delta
Diseñador
Verificación en dos pasos desactivada
Desde
8 Jul 2012
Mensajes
658
Crédito(s)
0
Puntos
6
Eres fuente de inspiración para muchos de nosotros GRACIAS:)
 

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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.
 

NENE

Eta
Redactor
Verificación en dos pasos desactivada
Desde
23 Nov 2009
Mensajes
1.429
Edad
38
Crédito(s)
0
Puntos
266
¡excelente aporte! Gracias.
 

alf33

Lambda
Redactor
Verificación en dos pasos desactivada
Desde
13 Abr 2010
Mensajes
2.992
Edad
31
Crédito(s)
0
Puntos
166
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.
 

anferro

Xi
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
29 Oct 2011
Mensajes
4.455
Crédito(s)
0
Puntos
63
¿Aguien lo a implementado en blogger?
 

Arriba