Como poner publicidad flotante en páginas web con WordPress

Si he aprendido algo importante sobre publicidad y monetización durante mi etapa administrando distintos proyectos web es que es es mucho más efectivo optimizar  como mostramos la publicidad que la cantidad de la misma.

La importancia de la publicidad flotante

Es por esto este motivo que si dispones de una página web, “activar la publicidad flotante” debiera ser casi obligatorio pues cada día el número de visitas a tu página desde dispositivos móviles supera a las visitas desde equipos de escritorio y por tanto si le muestras una publicidad flotante conseguirás un porcentaje de clicks más elevado y por consiguiente una mayor monetización.

La publicidad debe de ser adaptable

También  y siguiendo esta misma linea, debemos procurar que nuestra publicidad sea adaptable ( responsive ) y que según las distintas resoluciones y dispositivos en las que mostremos nuestra publicidad esta se adapte a los mismos pues no tiene ningún sentido mostrar un anuncio pensado para dispositivos móviles cuando nos están visitando desde un ordenador de sobremesa.

Activando la publicidad flotante de modo Responsive

Esto de lo que os hablo es algo en lo que Google Adsense hasta donde yo lo he estado utilizando esta mejorando mucho, e incluso ya nos ofrece la posibilidad de poner publicidad que se adapta, pero también es cierto de que existe una forma muy práctica de que podamos poner publicidad adaptable de forma manual.

Ejemplo de publicidad Adaptable

Un ejemplo de publicidad adaptable sería utilizar el siguiente código de Adsense el cual hará que muestre distintos tipos de anuncios para resoluciones mayores o iguales de 780, entre 720  y 780 y por supuesto menores de 720.

* ( si copias y pegas alguno de estos script cambia luego las comillas )

<script type=“text/javascript”><!–
google_ad_client = “<TU-ID-DE-GOOGLE>”;
if (window.innerWidth >= 780)  {
google_ad_width = 300;
google_ad_height = 600;
google_ad_format = “300x600_as”;
google_ad_type = “text_image”;
} else if (window.innerWidth < 720)  {
google_ad_width = 320;
google_ad_height = 50;
google_ad_format = “320x50_as”;
google_ad_type = “image”;
} else {
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = “250x250_as”;
google_ad_type = “image”;
}
google_ui_features = “rc:0”;
//–>
</script>
<script type=“text/javascript”
src=“http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Si utilizamos este código en uno de esos famosos widgets laterales de una página de wordpress, conseguiremos que se adapte perfectamente a cada resolución o dispositivo y por tanto aumentaremos la eficacia de la publicidad que mostramos.

Activando la publicidad flotante

Como os comente al principio del post, otro de los trucos que lograrán que nuestra publicidad sea mucho más efectiva es hacer que sea flotante y que por tanto cuando nos visitan desde dispositivos móviles se quede en la parte inferior de forma fija.

Para conseguir esto utilizaremos un pequeño código CSS que insertaremos dentro de WordPress en la sección Apariencia – Editar CSS y que tendrá esta forma :

@media only screen and (min-width: 310px) and (max-width:500px) {
#adBottom {
left: 0;
position: fixed;
text-align: center;
bottom: -28px;
width: 100%;
}
}

Es importante matizar que el valor bottom deberemos aumentarlo o disminuirlo en función de nuestro proyecto para se termine mostrando en la posición que queramos pero que en definitiva lo que hará es que cuando se muestre la publicidad lo haga de forma flotante.

Una vez tengamos este código CSS implementado tan sólo nos quedará hacer que la publicidad adsense adaptable que antes mencionamos la utilice, algo que será tan sencillo como poner una etiqueta <div> en la misma de la siguiente forma :

* ( si copias y pegas alguno de estos script cambia luego las comillas )

<div id=“adBottom”>
<script type=“text/javascript”><!–
google_ad_client = “<TU-ID-DE-GOOGLE>”;
if (window.innerWidth >= 780)  {
google_ad_width = 300;
google_ad_height = 600;
google_ad_format = “300x600_as”;
google_ad_type = “text_image”;
} else if (window.innerWidth < 720)  {
google_ad_width = 320;
google_ad_height = 50;
google_ad_format = “320x50_as”;
google_ad_type = “image”;
} else {
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = “250x250_as”;
google_ad_type = “image”;
}
google_ui_features = “rc:0”;
//–>
</script>
<script type=“text/javascript”
src=“http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>

Una vez guardes los cambios y en caso de que utilices algún tipo de cache la borres, podrás ver como tu proyecto web luce una bonita publicidad que se adapta en tamaño en función de la resolución desde la que hagas la visita ademas de mostrarse de forma flotante en los dispositivos móviles.