Tutorial: Configurar anuncios asíncronos de AdSense

  • Autor Autor thezar
  • Fecha de inicio Fecha de inicio
T

thezar

Eta
SEO
Ya muchos sabrán que existe una nueva clase de anuncios de AdSense llamados asíncronos los cuales cargan mucho más rápido y son totalmente adaptables (bueno es que ese también es su nombre), por lo que podrás configurar a tu gusto el tamaño para cada tipo de pantalla en la que quieres que aparezcan.

Para crear un anuncio primero que nada les recomiendo crear un criterio de seguimiento relacionado, y además si van a colocar uno, pues cambiar todos los que tengan en sus sitios a asíncronos, luego crean el anuncio y seleccionan "Bloque de Anuncios Adaptable" (Beta).

Les arrojará un código como este:

Insertar CODE, HTML o PHP:
<style>
.nombre-de-mi-anuncio { width: 320px; height: 50px; }  [MENTION=16931]medi[/MENTION]a(min-width: 500px) { .nombre-de-mi-anuncio { width: 468px; height: 60px; } }  [MENTION=16931]medi[/MENTION]a(min-width: 800px) { .nombre-de-mi-anuncio { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- nombre-de-mi-anuncio -->
<ins class="adsbygoogle nombre-de-mi-anuncio"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bien, aunque sabemos claramente que está totalmente prohibido hacer modificaciones en los códigos (y aún más con este tipo de anuncio tan nuevo), les comento que investigando me encontré con esto https://support.google.com/adsense/...o&utm_medium=link&utm_campaign=ww-ww-et-asfe_ en donde nos dice que podemos especificar los valores de píxeles fijos para las pantallas y el alto y anchura de los anuncios adaptables siempre que estos existan para AdSense (336x280, 300x250, 728x90, etc.).

Lo que quiere decir es que podemos jugar con los valores 500px y 800px y los valores de tamaños de anuncios según cómo queremos que aparezcan para cada pantalla.

Entonces veamos algunos detalles:

1.- El primer tamaño de anuncio width: 320px; height: 50px es para pantallas sin un mínimo tamaño de pixelación. Ideal para móviles

2.- El segundo tamaño de anuncio width: 468px; height: 60px es para pantallas con un mínimo de 500px. (Lo recomendable aquí es cambiar ese ancho de 500px por 400px). Ideal para móviles/tablets

3.- El tercer anuncio width: 728px; height: 90px es el que usarás para aquellas pantallas con un mínimo de 800px. Ideal para Desktop/PC/Mac o cualquier cosa grande que se te ocurra...

Ahora bien, te preguntas ¿Pero qué tamaños debo usar yo según mi tema?

Recomendado para debajo del título de las entradas:

Insertar CODE, HTML o PHP:
<style>
.nombre-de-mi-anuncio { width: 300px; height: 250px; }   [MENTION=16931]medi[/MENTION]a(min-width: 800px) { .nombre-de-mi-anuncio { width: 336px; height: 280px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- nombre-de-mi-anuncio -->
<ins class="adsbygoogle nombre-de-mi-anuncio"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Recomendado para después del texto de las entradas:

Insertar CODE, HTML o PHP:
<style>
.nombre-de-mi-anuncio { width: 300px; height: 250px; }   [MENTION=16931]medi[/MENTION]a(min-width: 800px) { .nombre-de-mi-anuncio { width: 300px; height: 250px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- nombre-de-mi-anuncio -->
<ins class="adsbygoogle nombre-de-mi-anuncio"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bueno creo que con esas dos recomendaciones es suficiente y con esto pueden darse una idea de cómo configurarlos para el header o los widgets en el sidebar, teniendo en cuenta que cada theme o skin que tengan debe ser diferente y no a todos les servirán los tamaños que yo recomiendo, todo es cuestión de ir jugando con los tamaños hasta encontrar el que se adapte mejor.

Estoy usando anuncios asíncronos desde hoy, así que actualizaré para comentarles como me va.

Las críticas constructivas, correcciones o aportes importantes serán bien recibidas.

Éxito!
 
Última edición:
Buen aporte para plantillas que no tienen versión Resposive :encouragement:
 
Muy buen aporte!
 
Buscare mas informacion sobre de cambiar los tamaños 😱
 
Lo guardo. Gran tutorial, gracias. :encouragement:
 
Buen tutorial, sin duda lo usare
 
Interesante aporte
 
Gran aporte :encouragement:
 
Bueno en vista que mis ingresos son en mayoría por el tráfico móvil y los anuncios de 320x50 son para nada atractivos :grumpy: Continuare usando los bloques de 300x250 que van bastante bien 🙂
 
Gracias por el tremendo aporte. :encouragement:
 
Gracias vamos a probar a que tal
 
Gracias muy bien explicado.
 
Interesante gracias por tu aporte 🙂
 
Excelente explciacion.
 
Otro tutorial que ayuda a aprender cada día, gracias.
 
y cuanto se supone q aumenta la velocidad de un sitio web?
 
Atrás
Arriba