Anuncios AdSense para Responsive Design

La necesidad de ver bien y rápido una página Web  en los smartphones ha hecho que una parte notable del contenido de Internet se haya adaptado con rapidez al diseño Responsive Design. Pero también hay muchos editores que no han dado el salto porque hay algunos elementos que no son tan sencillos de adaptar a un diseño fluido, como por ejemplo los anuncios de AdSense. El problema no es tecnológico, sino legal, ya que en las políticas de AdSense los editores se comprometen a no manipular el código de los anuncios y Google aún no ha dado una solución técnica, es decir anuncios que se presenten de una u otra forma en función del tamaño de la pantalla. Las buenas noticias es que en AdSense Alemania han confirmado que utilizar anuncios de diferentes tamaños para que nuestro blog o página Web sea 100% Responsive Design es correcto, siempre que no se realice ninguna otra modificación sobre el código.

A continuación, les dejo una traducción del post publicado en el blog oficial de Google AdSense alemán, en el que simplemente daban el visto bueno al código Javascript que había escrito Amit Agarwal en su blog Digital Inspiration. De eso hace ya medio año y el tema ha quedado congelado, ni Google, ni AdSense han dado más novedades y por ejemplo en el blog de AdSense en español ni siquiera se han dado novedades sobre el tema, quedando la duda de si estas técnicas son sólo aplicables a Alemania. Quizás en AdSense estén trabajando en mejorar este aspecto del diseño y antes de Navidades den una solución oficial, pero de momento no han dicho nada al respecto.


En nuestro último blog sobre Responsive Design, nos habló de lo importante que es comprender y optimizar los sitios web para dispositivos móviles. Hoy vamos un paso más allá para describir cómo utilizar los anuncios de AdSense en un sitio Responsive Design de forma efectiva. Primero, sin embargo, nos gustaría reiterar brevemente lo que se entiende por Responsive Design.

Responsive Design es una técnica de diseño Web que se adapta el sitio a las propiedades del dispositivo en el que se muestra. Esto puede ser por ejemplo un ordenador portátil, smartphone o tablet. Un sitio creado con Responsive Design cambia automáticamente su tamaño cuando se muestra en diferentes dispositivos. ¿Qué contenido es lo más importante para el usuario móvil?, usted decide.

Junto con el contenido, también pueden adaptarse a diferentes tamaños de pantalla los anuncios de AdSense mediante un sencillo fragmento de código JavaScript. Para aprovechar las ventajas de Responsive Design, primero se crean varios tamaños de anuncio, por ejemplo, 728 x 90, 468 x 60 y 300 x 250 A continuación, se implementa un fragmento con una condición "if-else", por lo tanto, el tamaño de visualización apropiado está conectado al dispositivo del usuario. Aquí se puede ver un ejemplo de este tipo de código JavaScript:

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if (ventana. innerWidth> = 800) {

google_ad_slot = " 1234567890 ";

google_ad_width = 728;

google_ad_height = 90;

} Else if (window.innerWidth <400) {

google_ad_slot = " 2345678901 ";

google_ad_width = 300;

google_ad_height = 250;

Else {}

google_ad_slot = " 3456789012 ";

google_ad_width = 468;

google_ad_height = 60;

}
</ script>
<script type = "text / javascript"
    src = " http://pagead2.googlesyndication.com/pagead/show_ads.js ">
</ script>

Tenga en cuenta que, de acuerdo con las políticas del programa de AdSense , no se le permite realizar cambios en el código de AdSense. Este es el único cambio recomendado del código de diseño de sitios web sensibles. Cualquier cambio que no cumpla con el código JavaScript anteriormente se considerará una violación de las políticas del programa.

Para más información sobre el diseño de respuesta que se aprende en esta entrada del blog del equipo de Google Webmaster (disponible sólo en Inglés). Y www.startmobile.de obtener la información sobre los beneficios de sitios web para móviles se puede probar y en busca de desarrolladores que pueden ayudarle a crear un sitio Web para móviles optimizados para su sitio Web.

Fuentes: (vía AdSeoK)