Ejemplo jQuery: CookieCuttr para tu mensaje de cookies

Ejemplo de código fuente de un plugin de jQuery llamado CookieCuttr para que podamos cumplir la famosa “ley de cookies” y nos salga el típico mensajito que solemos ver por otras webs de aceptar o declinar las cookies.

Descripción del ejemplo

Lo primero de todo necesitaremos:

• una librería jQuery
• jquery.cookie.js, un plugin jQuery para leer y gestionar las cookies
• el plugin CookieCutrr

Una vez incluídos en la cabecera de nuestra web, podremos configurar el plugin con los siguientes parámetros:

cookieCutter: false, // Para ocultar/desocultar una div/section/span etc. Si queremos ocultar lo ponemos a true.
cookieDisable: '', //Listamos los elementos que queremos ocultar. El parámetro cookieCutter tendrá que estar a true.
cookieCutterDeclineOnly: false, // Activarlo a true si deseas que el parámetro CookieCutter solamente oculte cuando alguien ha clickeado en declined
cookieAnalytics: true, // cuando tienes analítica en tu web, puedes mostrar un mensaje por defecto sin tener que usar un enlace a la política de privacidad. Por defecto está habilitado.
cookieDeclineButton: false, // Para habilitar/deshabilitar el botón de declinar
cookieAcceptButton: true, // Para habilitar/deshabilitar el botón de aceptar
cookieResetButton: false, // Para habilitar/deshabilitar el botón de resetear cookies.
cookieOverlayEnabled: false, // Si quieres una barra de herramientas que ocupe toda la pantalla, lo ponemos a true.
cookiePolicyLink: '/privacy-policy/', // Para poner el link de tu política de privacidad o cookies (el parámetro cookieAnalytics tiene que ser <em>false</em>).
cookieAnalyticsMessage: 'mensaje de la barra de herramientas...', //Aquí pondremos el mensaje que queramos que salga en la barra de herramientas
cookieErrorMessage: "mensaje de error...", //Aquí pondremos el mensaje que se muestra cuando el plugin no funcione correctamente.
cookieWhatAreTheyLink: "http://www.allaboutcookies.org/", //Para poner un link a donde queramos o específicamente a nuestra política de cookies
cookieAcceptButtonText: "ACEPTO", //Para poner el texto del botón de aceptar cookies
cookieDeclineButtonText: "NO ACEPTO", //Para poner el texto del botón de declinar cookies
cookieResetButtonText: "Resetear COOKIES para esta Website", //Para poner el texto del botón de resetear todas las cookies
cookieWhatAreLinkText: "Política de cookies", //Para poner el texto que queramos que salga en el link de los parámetros cookiePolicyLink y cookieWhatAreTheyLink
cookieNotificationLocationBottom: false, // Para poner la barra arriba o abajo. Por defecto es false (arriba). Para ponerla abajo pues lo ponemos a true.
cookieDiscreetLink: false, //Activándolo a true, nos mostrará un link pequeño y discreto en lugar de usar la barra de herramientas.
cookieDiscreetLinkText: "Cookies?", //Texto del parámetro cookieDiscreetLink
cookieDiscreetPosition: "topleft", //Para decirle dónde queremos colocar el link discreto. Opciones: topleft, topright, bottomleft, bottomright
cookieNoMessage: false, // Si lo ponemos a true, ocultaremos el mensaje de todas las páginas además de la página de política de privacidad.
cookieDomain: "" //Para poner tu dominio y eliminar cookies de Google Analytics automáticamente cuando no aceptes el mensaje.

Estos parámetros los colocaremos, según nos convenga en un código de javascript de nuestra Web, donde llamaremos a la función $.cookieCuttr(); como puedes ver en el apartado código

Código.

Código para mostrar la barra con el mensaje

jQuery(document).ready(function () {
jQuery.cookieCuttr({
  cookieDeclineButton: true,
  cookieResetButton: true,
  cookieNotificationLocationBottom: true,
  cookieAnalyticsMessage: "Esta web utiliza 'cookies' propias y de terceros para ofrecerle una mejor experiencia y servicio.",
  cookieAcceptButtonText: "Acepto",
  cookieDeclineButtonText: "No acepto",
  cookieDeclineButtonText: "No acepto",
  cookieResetButtonText: "Resetear cookies",  
  cookieWhatAreLinkText: "Política de Cookies",
  cookieWhatAreTheyLink: "javascript:;"
  
});
});

Código para usar cookies cuando se acepten

if(jQuery.cookie(“cc_cookie_accept”) == “cc_cookie_accept”) {

//Aquí pondremos el código que cargará cuando aceptemos el mensaje (por ejemplo el de Google Analytics)

}

Código para usar cookies hasta que se declinen

if(jQuery.cookie(“cc_cookie_decline”) != “cc_cookie_decline”) {

//Aquí pondremos el código que se cargará hasta que se declinen las cookies

}

Demo del ejemplo.

VER DEMO