Curiosidades Software Tutoriales WordPress

Meerkat: un script para propósitos de Marketing que podemos implementar en WordPress

Plugin Meerkat

Meerkat es un script diseñado por Jarod Taylor íntegramente en JQuery y creado con el propósito de añadir una funcionalidad tipo Marketing a nuestro blog.

Con dicho plugin podemos crear una serie de promociones que se irán visualizando en una ventana tipo Popup, pero que no es molesta para los visitantes, pues ocupa la parte inferior y el ancho de nuestro blog, siendo totalmente customizable.

Tiene otra funcionalidad, tal como usar dicho plugin para crear una ventana tipo splash para presentaciones o bienvenidas.

Dependiendo de las opciones que hayamos activado, podemos hacer que dicha ventana aparezca deslizándose por la pantalla (tipo slide) o que aparezca de forma gradual (fading).

Como he dicho anteriormente, el plugin es configurable y podemos configurarlo para que aparezca en la parte superior y no solo en la parte inferior del blog.

En otras páginas podemos ver ventanas de este tipo, pero a veces, cerrarlas se hace algo engorroso, algo que no sucede con Meerkat, pues permite que el visitante la cierre sin problemas.

¿Cómo implementarlo? Existen varias formas de hacerlo, os dejo las dos más recomendadas y fáciles de comprender por ser las formas más habituales.

  • Enlazando los ficheros necesarios en nuestra plantilla jQuery y Meerkat. Debemos asegurarnos de incluirlos entre las etiquetas <head>. Yo recomiendo pasarlo al footer.php para no ralentizar la carga del blog. Además debemos asegurarnos de que hemos incluido previamente jQuery. Para enlazar los ficheros, debemos emplear el siguiente código, enlazando la ruta adecuada a dichos ficheros:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.meerkat.js"></script>
  • Añadiendo un elemento Div al documento, es decir, con HTML. Para ello debemos asignar el identificar id a meerkat, tal y como vemos en el código. Si nos decidimos por emplear este método, debemos colocar dicho código antes del cierre de la etiqueta body, es decir, antes de </body>.
<div id="meerkat">
Contenido a visualizar aquí...
</div>

Si nos decidimos por emplear este método, debemos tener en cuenta que las opciones serán las que Meerkat tiene por defecto en el fichero que habrás descargado al comienzo de esta entrada (jquery.meerkat.js). Dicho fichero dispone de una función denominada meerkat, tal y como puedes ver en el siguiente código:

function meerkat(options) {     this.settings = {

        showMeerkatOnLoad: 'false',
        close: 'none',
        dontShow: 'none',
        dontShowExpire: 0,
        removeCookie: 'none',
        meerkatPosition: 'bottom',
        animation: 'slide',
        animationSpeed: 'slow',
        height: 'auto',
        background: 'none'
    }

Estas opciones podemos cambiarlas modificando dicho fichero y ajustándolas de forma adecuada a nuestra plantilla.

Descripción de las opciones.

 

  • showMeerkatOnLoad – Acepta dos valores, true (verdadero) o false (falso).

  • close – Acepta cualquier selector “.close” o “#close”. Define mediante CSS el tipo de botón que deseas para cerrar Meerkat.

  • dontShow – Acepta cualquier selector “.dont-show” o “#dont-show”. Cuando un visitante hace clic sobre esta opción, Meerkat no será visible hasta que se vuelva a iniciar el navegador. Debemos tener en cuenta que esta opción funciona mediante el uso de las cookies, si el navegador no las acepta, se ignorará su valor.

  • dontShowExpire – los valores para esta opción permiten tanto números enteros como números decimales entre 0 y 365, por ejemplo: si asignamos el valor 0, Meerkat no se visualizará más hasta que la sesión del navegador haya sido cerrada. Si asignamos el valor 0.5, no se visualizará más hasta que pasen 12 horas, 1 para 24 horas y 7 para siete días. Al igual que dontShow, necesita de cookies para su buen funcionamiento.

  • removeCookie – generalmente, esta opción es empleada para propósitos de desarrollo, pues elimina las cookies creadas por la opción dontShow. Acepta selectores.

  • meekatPosition – Acepta dos valores: top o bottom, es decir, para ubicar la posición de Meerkat en nuestra web, ya sea en la parte superior o inferior del mismo. Por defecto se encuentra en la parte inferior.

  • animation – Acepta dos valores slide o fade. Por defecto se encuentra en slide, aunque yo prefiero el tipo fade ya que es menos agresivo.

  • animationSpeed – Podemos indicar los valres siguientes: slow, normal o fast, aunque también podemos expresar el tiempo en milisegundos, por ejemplo: 1000, para indicar un segundo.

  • height – Esta opción acepta todos los tipos de altura en CSS (px, em, %, auto, etc…)

  • background – un ejemplo: background: ‘#fff url(/urr de la imagen.jpg) no-repeat left top’

      

    Puedes ver una serie de demos con los que podrás opinar y obtener más información sobre ellos. A mi en particular me ha gustado la demo2. ¿Cuál te ha gustado más a ti?

  • 3 Comentarios

    • Hola

      He intentado realizar el script básico de meerkat pero no me funciona !!!!.

      He subido en el servidos los 2 archivos "js"
      He realizado una pagina HTML y en ella he referenciado a los dos archivos necesarios

      dentro del div que he llamado 'meerkat', he referenciado un banner pero no me aparece.
      Deseo que aparezca un banner en el inferior de la pagina, para poder modificarlo con el archivo
      jquery.meerkat.js

      He seguido las instrucciones vuestras.
      Me falta alguna cosa o alguna llamada más !!!!
      Gracias
      pmike

    • @pmike si sigues los pasos indicados, te debería funcionar, de momento eres el único que nos comenta que no te funciona, suponemos que algo mál has realizado.

      Si te fijas, el el código que disponemos, la ruta de los ficheros .js no ha sido especificada, algo que deberías hacer, e indicar la ruta correcta de la ubicación de dichos ficheros en tu servidor.

      Saludos