Cómo adaptar anuncios de Adsense

Hoy en día, el incremento de teléfonos móviles es innegable ya que cada día el crecimiento mercado de dispositivos móviles esta creciendo con pasos agigantados. Esto creo que no es nada nuevo, verdad? ? Pero que tiene que ver esto con la web? Muchísimo querido amigo, al existir cada vez más teléfonos móviles, los usuarios cada vez utilizan estos dispositivos para navegar por internet, lo cual tenemos que dar todas las facilidades a los usuarios en cuanto el diseño y desarrollo web.

Por esta razón de crecimiento, Google anuncio un nuevo bloque de anuncios adaptables que permite que el anuncio en Adsense se adapte en función del diseño de la página, independientemente del dispositivo que sea.

En ocasiones este bloque no nos sirve por diferentes razones, para ello existe la opción que más me gusta es la de poder modificar el tamaño del anuncio dependiendo de donde lo queremos publicar mediante CSS. Vamos a ver diferentes formas de editar el tamaño del anuncio dependiendo del tamaño del navegador.

¿Porqué adaptar los anuncios?

Amigo blogger, ¿has notado que tus ganancias han disminuido en el último año?

Una de las razones puede que sea este aumento de tráfico móvil, así que tenemos la «obligación» de adaptar los anuncios de Adsense a dichos dispositivos si no, nuestras ganancias seguirán disminuyendo.

Cómo adaptar los anuncios de Adsense

Especificar un formato general

Si quieres un bloque adaptativo, nos vamos al panel de Google Adsense y creamos un «Nuevo bloque de anuncios» como vemos en la siguiente imagen:

Escribimos el nombre del anuncio, clicamos en «Recomendado» para expandir el menú y seleccionamos la opción «Adaptable»:

Por último seleccionamos el aspecto de los anuncios y clicamos en «Guardar y obtener el código», ya tenemos listo el código del anuncio de Adsense que se adaptará a todos los dispositivos.

Ocultar un bloque de anuncios

En algunas ocasiones puede que queramos que no aparezca el anuncio, normalmente porque los dispositivos son muy pequeños para mostrar el bloque de anuncio o cualquiera otra razón, decirte que si que se puede 😉

Para ocultar este anuncio tendremos que utilizar el siguiente código CSS el que no mostrará el bloque de anuncio para las pantallas menores de 360px en anchura:

<style type=»text/css»>
.bloque_anuncio { display:inline-block; width: 320px; height: 50px; }
@ media(max-width: 360px) { . bloque_anuncio { display: none; } }
@ media(min-width:480px) { . bloque_anuncio { width: 468px; height: 60px; } }
@ media(min-width:720px) { . bloque_anuncio { width: 728px; height: 90px; } }
</style>

<ins class=»adsbygoogle bloque_anuncio»
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>

Definir un tamaño exacto de anchura

También podemos moldear el anuncio para un tamaño de anchura y altura que nosotros queramos con CSS.

En el ejemplo anterior, podemos ver que para las pantallas con un mínimo de 480px, la anchura del bloque de Adsense será de 468px con la siguiente línea:

@ media(min-width:480px) { . bloque_anuncio { width: 468px; height: 60px; } }

Podemos añadir tantas reglas cómo queramos definiendo el tamaño de anchura y altura para diferentes resoluciones de pantalla.

Ahora ya puedes volver a la normalidad en tus ingresos de Adsense gracias al tutorial de cómo crear anuncios adaptables de Google Adsense para tu sitio web.

Cómo recomendación realiza un seguimiento de rendimiento de estos bloques para saber si realmente son necesarios en nuestra web o mejor no, ya que cada portal es un mundo y no hay una regla exacta que defina el rendimiento máximo.

Espero que os ayude este tutorial para recuperar tus ingresos y si no es mucho pedir que compartas este post. ¡Hasta la semana que viene my friend! ?