Gadget para aumentar tu número de suscriptores - Blogger

Un newsletter o boletín electrónico es una poderosa herramienta de marketing y comunicación que informa a los usuarios acerca de noticias de interés, promociones y productos o servicios de forma regular y ayuda a construir una relación única con ellos, lo que conocemos como engagement y fidelización de clientes.

En el post anterior hablo de la importancia del Email Marketing en la fidelización de clientes. Échale un vistazo, no tiene desperdicio :)

Técnicamente, un newsletter es un mensaje en formato HTML que se envía por correo electrónico a una lista de suscriptores. Existen numerosas plantillas html gratis y de pago para newsletters pero el propósito de este post es proporcionar el código html necesario para su uso.

Los popups utilizados de forma correcta en tu web site pueden llegar a ser un instrumento muy útil para convertir a tus visitantes en suscriptores o clientes. Atrás quedaron las ventanas emergentes y banners molestos e intrusivos con anuncios o publicidad que nos asaltaban nada más visitar una página web.
En este sentido, debemos tomar en consideración la usabilidad como aspecto fundamental en el diseño.
Personalmente, me incomoda mucho que aparezcan ventanas emergentes de suscripción en todas y cada una de las páginas de un mismo sitio web. Para evitar ésto, contamos con tres posibilidades:

• controlar la ip del visitante de tal forma que sólo nos la ofrezca la primera vez que visitamos la página. Ésto se hace desde el servidor o back-end.
• almacenar la información del visitante en una cookie en la parte cliente o navegador web (front-end).
• almacenar la información en el cliente web a través del método SessionStorage de html5 (lo soportan los navegadores más modernos del mercado).

En el ejemplo que muestro a continuación optaré por las cookies y me comprometo a codificar el resultado en html5 en un artículo posterior.

Éstos son los pasos a seguir:

1. Selecciona la entrada Diseño del panel principal de Blogger.
2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:
   
   
   

   HTML/Javascript
   Añade una característica de un tercero u otro código a tu blog.
   
   
   
   
   
   
4. En la caja Contenido pega el siguiente código:
   
   

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jmacuna/subscription-feedburner@master/style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
   <script>
   idleTime = 0;
   $(document).ready(function(){
    $limit = 5; //seconds
    if ($.cookie('test_status') != '1') {
     function timerIncrement() {
      idleTime = idleTime + 1;
      if (idleTime > $limit) {
       $('html, body').css('overflow', 'hidden');
       $('.subs-popup ').fadeIn('slow');
       idleTime = 0;
      }
     }
     // Increment the idle time counter every second.
     var idleInterval = setInterval(timerIncrement, 1000); // 1 second
     // Zero the idle timer on mouse movement.
     $(this).mousemove(function (e) {
      idleTime = 0;
     });
     $(this).keypress(function (e) {
      idleTime = 0;
     });
     $.cookie('test_status', '1', { expires: 30 });
    }
    $('.email-close').click(function() {
     $('.subs-popup').fadeOut('slow');
     $('html, body').css('overflow', 'auto');
     $limit = 9999;
    });
   });
   </script>
   
   <div class="subs-popup">
    <div id="newsletter">
     <div class="email-close">X</div>
     <div class="newsletter-wrap">
      <h4>Suscríbete y recibe<br/>contenido exclusivo</h4>
      <p>Las últimas novedades del blog<br/>directamente a tu email.<br/><br/></p>
      <form action="http://feedburner.google.com/fb/a/mailverify?loc=es-ES&uri=[FEED_DE_TU_BLOG]" method="post" onsubmit="$('.email-close').click();window.open('about:blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" novalidate="">
       <input name="uri" type="hidden" value="bloggertrix"/>
       <input name="loc" type="hidden" value="en_ES"/>
       <input type="email" value="" name="email" placeholder="Tu e-mail aqui..." required=""/><br/><br/>
       <input type="submit" value="Suscribirme" class="button-popup">
      </form>
     </div>
    </div>
   </div>
   

5. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros que intervienen en el código:

• $limit = 5: tiempo de espera en segundos (desde que se carga la página) para mostrar el popup de suscripción.
• [FEED_DE_TU_BLOG]: feed de suscripción de tu blog.
  Más información en ¿Qué es el feed de un sitio?

Como indicación final, resaltar que la hoja de estilo que utilizo (style.css) así como el formulario son totálmente personalizables.

Puedes visualizar y descargar el ejemplo para integrarlo en tu blog en la siguiente dirección

Widget para Suscripción de Correo Electrónico

Jose Maria Acuña Morgado - Desarrollador Web