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




24 comentarios:

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

    ResponderEliminar
  2. me ayudas por favor no quiere funcionar.

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

    ResponderEliminar
  4. deben eliminar sus coockies, ya que solo aparece solo una vez

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

    ResponderEliminar
  6. 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>

    ResponderEliminar
  7. 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

    ResponderEliminar
  8. 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!!

    ResponderEliminar
  9. 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

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

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

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

    ResponderEliminar
  13. 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.

    ResponderEliminar
  14. 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.

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

    Un saludo!

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

    ResponderEliminar
  17. 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!

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

    ResponderEliminar
  19. 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; }


    ResponderEliminar
  20. Hola, muchas gracias, funciona muy bien el código, sólo tengo unas dudas, ¿cómo se puede cambiar la imagen para que aparezca en español el texto Sign up en la parte superior izquierda? y a mi no me aparece el cursor para que los suscriptores puedan escribir su email. Me pudiera ayudar, gracias.

    ResponderEliminar
  21. Hola Daniela, gracias a ti por usar una de las herramientas que ofrezco a mis lectores.
    He estado echando un vistazo a tu blog y he podido comprobar que existe algún script en tu página que anula el foco en cualquier campo y no sólo en el widget de suscripción.
    Tendrías que revisar el código para anularlo.

    En todo caso, si quieres que se pueda escribir en el campo email del popup de suscripción, tendrías que añadir antes del cierre del script la siguiente línea:

    document.getElementById("newsletter").getElementsByTagName("input")['email'].onclick = function(){ this.focus(); }

    Lo que aparece en negrita:

    <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;
    });
    document.getElementById("newsletter").getElementsByTagName("input")['email'].onclick = function(){ this.focus(); }
    });
    </script>

    En cuanto a la primera cuestión (texto en inglés) tienes dos opciones:

    1- podrías quitar la imagen con el texto Sign, añadiendo el siguiente código al final del widget:

    <style>
    .newsletter-wrap {
    background: none;
    }
    </style>

    2- puedes diseñar una imagen similar pero con el texto en castellano. Para que tu página la pueda leer, añades las siguientes líneas al final:

    <style>
    .newsletter-wrap {
    background: url(url_de_la_nueva_imagen) no-repeat top left;
    }
    </style>

    dónde deberías reemplazar url_de_la_nueva_imagen por la dirección web dónde se encuentra alojada la imagen.

    Espero no haberte generado más dudas :)
    Un saludo.

    ResponderEliminar
  22. Hola, muchas gracias por tu pronta respuesta, me sirvió de mucho tu ayuda, ya pude resolver el problema del Pop Up para poder suscribirse y también ya pude resolver el problema de los cuadros de texto en el blog, sólo me falta ver como puedo cambiar la imagen que aparece en la esquina superior izquierda (sign up), necesito descargar la imagen y editarla o hacer una nueva, bueno, eso ya es extra. De nuevo muchas gracias por tu ayuda, saludos.

    ResponderEliminar