Añadir Responsive Google Ads con Ruby On Rails

Ya había escrito sobre la posibilidad que nos da Google Adsense de añadir anuncios que se adapten a cualquier dispositivo. Ahora quisiera exponer una manera de trabajarlos con Ruby On Rails que me ha resultado bastante útil.

Normalmente queremos que sea muy sencillo añadir anuncios a nuestro sitio web o aplicación y, en lo personal, no sabía cómo organizarme para lograr eso. Lo mejor sería montar un buen administrador de anuncios dentro de tu desarrollo usando la API de Google Adsense, pero esto que voy a exponer que es muy básico puede formar parte de un desarrollo posterior más complejo.

Con la ayuda de LESS, un helper y un partial view podemos añadir anuncios responsivos muy fácil. Primero es necesario añadir la gema de LESS a nuestro Gemfile, que nos permitirá organizar mejor nuestros estilos. Luego correr en la terminal un bundle install.

gem less-rails

Luego abrimos el archivo de los helpers principales de nuestra aplicación llamado application_helper.rb y dentro de la clase añadimos un nuevo método que nos permitirá incorporar nuestro anuncio donde queramos en cualquier vista.

def google_ad slot, class
  locals = {
    :slot => slot,
    :classes => classes
  }
  render :partial => 'layouts/ads', :locals => locals
end

Tenemos dos argumentos para este método: el primero es el spot y el segundo la class de CSS que determinará el tamaño del anuncio. Cuando el método reciba ambos argumentos, va a mandarlos a la partial view _ads.erb que aún no hemos creado y se rendeará en la vista donde nosotros lo solicitemos. Es en este partial view donde se economizará el código. El contenido de la _ads.erb será el siguiente:

<div id="ad<%= slot %>}">
 <ins class="adsbygoogle <%= class %>" data-ad-client="ca-pub-1234567890" data-ad-slot="<%= slot %>"></ins>
 <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
</div>

Recuerda que debes añadir en la parte del header del HTML la carga del Javascript que muestra los anuncios:

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Hasta aquí tenemos una bonita forma de organizar nuestros anuncios. En cualquier vista puedes añadir el helpergoogle_ad con el spot y la class que determines. Por ejemplo:

<%= google_ad "1234567890", "ad_336x280" %>

Ahora lo que queremos es que esos anuncios sean responsivos, es decir, que se adapten a nuestro diseño con responsive design. Es muy simple hacerlo. En primer lugar necesitamos crear las classes de todos los anuncios que queramos mostrar:

.adsbygoogle { display:inline-block; }
.ad_336x280 {
  width: 336px;
  height: 280px;
}
.ad_300x250 {
  width: 300px;
  height: 250px;
}
.ad_250x250 {
  width: 250px;
  height: 250px;
}

Luego debemos usar media queries para reemplazar los estilos dependiendo de la resolución con la que visiten el sitio web. Supongamos que queremos mostrar anuncios 336x280px cuando la resolución sea mayor que 979px, pero cuando sea menor, poderlo reemplazar por un anuncio del tamaño de 300x250px y, si la resolución es menor que 767px, poderlo reemplazar por el de 250x250px. Debemos hacer lo siguiente:

@media (max-width: 979px) {
  .ad_336x280 {
    .ad_300x250();
  }
}

@media (max-width: 767px) {
  .ad_336x280 {
    .ad_250x250();
  }
}

De esta manera tendremos anuncios adaptados a la resolución del browser, con un código organizado y muy fácil de actualizar.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *