Tutorial: AdSense Responsive

Cicklow Seguir
Seguidores
14

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

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.
 
Última edición:

JeansReal

Delta
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
26 Dic 2011
Mensajes
667
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
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
968
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.063
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 activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
26 Dic 2011
Mensajes
667
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
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
Desde
4 Nov 2009
Mensajes
5.764
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
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
Sigma
Redactor
Verificación en dos pasos desactivada
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
10.464
MUY interesante aporte! Gracias!
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
968
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
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
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
968
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
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
21 Mar 2012
Mensajes
6.735
Muchas gracias, lo pondré en practica
 

LuisMorales

1
Pi
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
14 Mar 2011
Mensajes
6.250
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

Delta
Verificación en dos pasos desactivada
Desde
1 Ago 2012
Mensajes
523
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Adsense no me deja usarlo por tener streaming en la web :(
 

isaacmartinez

Delta
Diseñador
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Jul 2012
Mensajes
658
Eres fuente de inspiración para muchos de nosotros GRACIAS:)
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
968
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.
 

alf33

Lambda
Redactor
Verificación en dos pasos desactivada
Desde
13 Abr 2010
Mensajes
2.983
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.
 

Googleriano

1
Pi
Verificación en dos pasos activada
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
28 Oct 2010
Mensajes
6.117
Ya lo implementé...
 

anferro

1
Ómicron
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
29 Oct 2011
Mensajes
4.552
¿Aguien lo a implementado en blogger?
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba