Tutorial: Cómo crear anuncios adaptables de Google AdSense para tu sitio Web

iNeedYou · 22 Dic 2014

Querido blogger,

Es muy probable que a causa del aumento del tráfico móvil, tus ganancias se hayan visto reducidas en el último año. Para evitar que esto sucediera, Google incorporó a su plataforma los anuncios adaptables de manera discreta. Vamos, que más de uno/a todavía no conocerá su existencia. Es por ello que en las siguientes líneas te guío en la creación de este tipo de banners, que se adaptan al ancho de cada dispositivo para evitar que tus bloques de AdSense se visualicen mal o no lo hagan directamente, en móviles, tablets... Aunque ojo, únicamente te funcionará si el diseño de tu sitio es responsive (adaptativo).

Quedará tal que así, colocado debajo del título de los posts:

Se ajusta al ancho como podéis ver. A continuación el cómo se hace. :encouragement:

Cómo crear un bloque de anuncios adaptable

Dando por hecho que ya estás frente a tu panel de Google AdSense:

1. Dirígete al apartado "Mis anuncios".

2. Crea un "Nuevo bloque de anuncios".

3. Tras introducir el nombre del anuncio, haz clic sobre "Recomendado" para expandir el menú y poder seleccionar "Adaptable".

4. Selecciona el estilo o aspecto del anuncio. Puedes crear un nuevo estilo o seleccionar uno que ya hayas especificado anteriormente.

5. Elige ahora un criterio de seguimiento de considerarlo oportuno y haz clic en "Guardar y obtener el código". Hecho esto copias el código, corres hacia tu sitio, lo colocas donde quieras, guardas y esperas a que se haya generado, pues verás en principio un espacio en blanco (cosa que ya sabrás si conoces de sobra Google AdSense).

Información adicional

Tras hacer esto es posible que te invada alguna duda como por ejemplo, si es posible esconder alguno de los bloques en tamaños de pantalla concretos. La respuesta es sí y debes modificar el CSS. En este ejemplo que copio literal del FAQ de Google AdSense, no se muestran anuncios si el ancho de pantalla es inferior a 400 píxeles:

HTML:

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
 @ media(max-width: 400px) { .adslot_1 { display: none; } }
 @ media(min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
 @ media(min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   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>

También es recomendable realizar el seguimiento del rendimiento de esos bloques adaptables que has creado, con el fin de saber si realmente te conviene tenerlos o no. Cada Web es un mundo y nadie la puede conocer mejor que tú 😛7:

Sin más que añadir, espero que te haya servido.

Saludos,
iNy :cupcake:

felixreca · 22 Dic 2014

Buen aporte. Yo había oído hablar de los anuncios adaptables, pero nunca los había implementado en mi web. Lo tendré en cuenta.

oiramsomel · 22 Dic 2014

Gracias iNeedYou.

iMissYou · 22 Dic 2014

Muy bueno! Marcho a jugar con el CSS hasta conseguir lo que tengo en mente para la versión móvil :encouragement:

Angel Benites · 22 Dic 2014

Buen aporte Ire :star2:

megabook · 22 Dic 2014

Muy buen tutorial hermano, sinceramente creo que ahora mis anuncios serán mejor de lo que eran, aunque estaban buenos 🙂
Gracias

iNeedYou · 22 Dic 2014

megabook dijo:
Muy buen tutorial hermano, sinceramente creo que ahora mis anuncios serán mejor de lo que eran, aunque estaban buenos 🙂
Gracias

Yeah, hermana en todo caso :encouragement: ¡Un abrazo!

megabook · 22 Dic 2014

iNeedYou dijo:
Yeah, hermana en todo caso :encouragement: ¡Un abrazo!

Perdona pasa que estoy acostumbrado a hablar siempre en masculino que aveces no me doy cuenta.
Mil disculpas por favor hermana 🙂

Graicas

intoroddex · 22 Dic 2014

Wuooo eso es lo que buscaba 😱nthego: voy
Gracias amigo por compartir

iNeedYou · 22 Dic 2014

intoroddex dijo:
Wuooo eso es lo que buscaba 😱nthego: voy
Gracias amigo por compartir

Amiga. De nada. Es un placer para mi compartir cualquier cosa en este foro.

Carlos Arreola · 22 Dic 2014

Gracias por el aporte, ya lo estoy utilizando desde hace tiempo esta opción 🙂

Jorge Reyes · 22 Dic 2014

Excelente aporte, lo pondré en practica 😀

iNeedYou · 22 Dic 2014

Gracias [MENTION=9679]cicklow[/MENTION] por la edición. [MENTION=1]Carlos Arreola[/MENTION] ¿te va bien con ellos?

Cicklow · 22 Dic 2014

iNeedYou dijo:
Gracias [MENTION=9679]cicklow[/MENTION] por la edición. [MENTION=1]Carlos Arreola[/MENTION] ¿te va bien con ellos?

:encouragement: tmb vale aclarar que ahora con estos anuncios podemos usar display:none; para ocultar las publis en determinado tamaño de pantalla, antes no se permitia esto, ahora si!
https://support.google.com/adsense/answer/3543893#adv

HTML:

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@ media (max-width: 400px) { .adslot_1 { display: none; } }
@ media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@ media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   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>

meregistro · 22 Dic 2014

buen aporte compañero aunque ya habia visto este tipo de anuncios en mi cuenta de adsense... voy a empezar a implementarlos a ver que tal me va

RaikND · 23 Dic 2014

cicklow dijo:
:encouragement: tmb vale aclarar que ahora con estos anuncios podemos usar display:none; para ocultar las publis en determinado tamaño de pantalla, antes no se permitia esto, ahora si!
https://support.google.com/adsense/answer/3543893#adv

HTML:

<style type="text/css"> .adslot_1 { display:inline-block; width: 320px; height: 50px; } @ media (max-width: 400px) { .adslot_1 { display: none; } } @ media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } } @ media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } } </style> <ins class="adsbygoogle adslot_1" 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>

jajaja este es el mio que hice hace unos dias:

PHP:

.promoPc, .promoPhone {width: 80%; margin: 0 auto;}
.promoPc p {width: 728px; height: 90px; background: #333; color: #FFF;}
.promoPhone p {display: none;}


/* Responsive Phone */ 
@ media (max-width: 480px) {
	.promoPc p {display: none;}
    .promoPhone p {width: 300px; height: 250px; background: #FFF; color: #000; display: inherit;}
    .promoPhone {width: 95%;}
}

También puedes cambiar los width y height a tu gusto como quieres que salga el anuncio y solo añades el codigo de adsense adaptable y el trabajo ya esta hecho, igual quiero mejorarlo

Jaison Mora · 23 Dic 2014

[MENTION=3486]iNeedYou[/MENTION]

Dejo mi aporte 🙄

Se trata de este otro, es más facil de usar solo ahi que pegar el ca-pub- ### y listo 🙂

HTML:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-AQUI-REEMPLAZAR";
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>

Es editable Y listo solo lo pegan donde desea que se muestre el banner :encouragement:

Saludos buen tuto :welcoming:

RaikND · 23 Dic 2014

doutop15 dijo:

[MENTION=3486]iNeedYou[/MENTION]

Dejo mi aporte 🙄

Se trata de este otro, es más facil de usar solo ahi que pegar el ca-pub- ### y listo 🙂

HTML:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-AQUI-REEMPLAZAR";
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>

Es editable Y listo solo lo pegan donde desea que se muestre el banner :encouragement:

Saludos buen tuto :welcoming:

Sigo prefiriendo CSS xD

Pompinchu · 23 Dic 2014

¿Moderadora desde cuando? 😱

Zentraedi · 23 Dic 2014

Gracias por el tutorial, muy bueno y útil

"write once, run anywhere”

Tutorial: Cómo crear anuncios adaptables de Google AdSense para tu sitio Web

iNeedYou

felixreca

oiramsomel

iMissYou

Angel Benites

megabook

iNeedYou

megabook

intoroddex

iNeedYou

Carlos Arreola

Jorge Reyes

iNeedYou

Cicklow

meregistro

RaikND

Jaison Mora

RaikND

Pompinchu

Zentraedi

Temas similares