12 de enero de 2015

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/JavascriptAñadir
    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.rawgit.com/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




19 comentarios:

javier rey dijo...

Hola saludos y gracias, pero no me quiere funcionar ayuda por favor.

Anónimo dijo...

me ayudas por favor no quiere funcionar.

Jose Maria Acuña Morgado dijo...

Buenos días Javier,
¿me puedes detallar qué es lo que no funciona?

Anónimo dijo...

deben eliminar sus coockies, ya que solo aparece solo una vez

michel heredia dijo...

Hola, no me funciona, cuando cargo la pag de mi blog paraa ver si sale no sale ni siquiera borrando los coockies

Jose Maria Acuña Morgado dijo...

Buenos días Michel, enhorabuena por tu blog!!
He revisado el código que has introducido en el blog y hay errores de sintaxis provocados porque probablemente has hecho copy/paste con un editor que genera retornos de carro.
Utiliza el editor de textos tradicional de Windows (blog de notas).

No te preocupes, vamos a solucionarlo:

Revisa las líneas de tu código y dónde pone:

<script><br />idleTime = 0;<br />$(document).ready(function(){<br /> $limit = 5; //seconds<br /> if ($.cookie('test_status') != '1') {<br /> function timerIncrement() {<br /> idleTime = idleTime + 1;<br /> if (idleTime > $limit) {<br /> $('html, body').css('overflow', 'hidden');<br /> $('.subs-popup ').fadeIn('slow');<br /> idleTime = 0;<br /> }<br /> }<br /> // Increment the idle time counter every second.<br /> var idleInterval = setInterval(timerIncrement, 1000); // 1 second<br /> // Zero the idle timer on mouse movement.<br /> $(this).mousemove(function (e) {<br /> idleTime = 0;<br /> });<br /> $(this).keypress(function (e) {<br /> idleTime = 0;<br /> });<br /> $.cookie('test_status', '1', { expires: 30 });<br /> }<br /> $('.email-close').click(function() {<br /> $('.subs-popup').fadeOut('slow');<br /> $('html, body').css('overflow', 'auto');<br /> $limit = 9999;<br /> });<br />});<br /></script>

- elimina todos los <br />. El código resultante es:

<script>idleTime = 0; $(document).ready(function(){ $limit = 5; if ($.cookie('test_status') != '1') { function timerIncrement() { idleTime = idleTime + 1; if (idleTime > $limit) { $('html, body').css('overflow', 'hidden'); $('.subs-popup ').fadeIn('slow'); idleTime = 0; } } var idleInterval = setInterval(timerIncrement, 1000); $(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>

Jose Aguirregabiria dijo...

hola soy Jose y mi blog es http://trabajarencas.blogspot.com
la verdad que es un estupendo post pero no me funciona y se ven los codigos html
como puedo arreglar lo ,me podrias ayudar , por cierto uso un Mac

Jose Maria Acuña Morgado dijo...

He estado revisando el código de tu página y se produce un conflicto con otras librerías javascript que utilizas en el blog.
Échale un vistazo a esta versión mejorada del artículo e incorpórala a tu blog:
Widget para aumentar tu número de seguidores

Muchas gracias!!

Victor Quesada dijo...

Hola...me gustaria me explicases los cambios que hay que hacer para que aparezca cada vez que me conecte a la pagina de mi blog...aprovecho para anunciarme...www.tupuedes10.com

Sergio Martinez dijo...

Hola me encantaría que me confirmara alguien que está bien introducido el atributo de suscriptores, gracias, mi web es www.consejosdelimpieza.com

Jose Maria Acuña Morgado dijo...

Hola Sergio, no veo que hayas introducido el widget en tu web.

ZERO CRISIS dijo...

Hola el Popup se mezcla con mi slider, y lo deja paralizado y no sale el popup que puedo hacer?

Jose Maria Acuña Morgado dijo...

Hola Zero Crisis,
he accedido a vuestra página web y lo que veo es un popup de suscripción diferente al que expongo en este artículo.
Podrías darme más detalles, gracias.

Jose Quintana dijo...

Muchas Gracias por el aporte. Muy valioso post, ya implementé el código en mi blog y todo funciona a la perfección. Eres todo un Experto José Maria! Por cierto, lo que a la mayoría de la gente le falla es que no saben algo básico de programación, y es que si toman el código directamente de la página va con anexos que solo perturban (que se agregan al copiarlo directamente de la página puesto que esta tiene unas propiedades específicas aparte del código). Para evitar eso (y tener el código limpio y depurado) lo mejor es que copien el código en block de notas y luego de allí lo modifiquen (la parte que hay que modificarle) y lo copien y peguen en el widget. De nuevo, gracias por el aporte.

Jose Maria Acuña Morgado dijo...

Gracias a ti José Quintana,
me alegro mucho de que el artículo te haya sido útil :)

Un saludo!

Cecilia E. Bianciotto dijo...

Hola no me funciona ¿podrías ver por qué? https://comunicarestransformar.blogspot.com.ar/

Jose Maria Acuña Morgado dijo...

Hola Cecilia,
creo que tu problema es que has copiado el código en algún editor que no escapa el contenido y te ha generado un código html erróneo.
Te recomiendo que lo hagas en un blog de notas (notepad de windows). Además, deberás cambiar el parámetro [FEED_DE_TU_BLOG] por el nombre del feed de tu blog.

Gracias por comentar.
Un saludo!

Ana Maria Almendro Oliva dijo...

La pop up me funciona perfectamente pero me gustaría saber exactamente como puedo cambiar el estilo del css. Gracias y un saludo.

Jose Maria Acuña Morgado dijo...

Hola Ana,
tienes dos posibilidades:

1- cambiar la ruta de la hoja de estilos (https://cdn.rawgit.com/jmacuna/subscription-feedburner/master/style.css) para que apunte a una hoja de estilos almacenada en tu servidor.

2- al final del widget puedes introducir el tag <style type="text/css"></style> con las características de diseño que quieras modificar.
Para sobreescribir las que estamos importando, tendrías que añadir la propiedad !important

Por ejemplo:

.email-close { font-size:3em!important; }