English
Español
Este proyecto implementa un banner de consentimiento de cookies personalizable utilizando HTML, CSS y JavaScript vanilla. A continuación, se detallan las principales funciones de JavaScript y cómo utilizarlas.
- 🚀 Uso
- ⚙️ Funciones Principales
- Abrir y Cerrar el Banner
- Gestión de Preferencias
- Manejo de Eventos
- Inicialización
Para implementar este banner de consentimiento de cookies en tu sitio web:
- Incluye los archivos HTML, CSS y JavaScript en tu proyecto.
- Asegúrate de que el script se cargue de forma asíncrona en el
<head>de tu HTML:<script src="script.js" async></script>
- Modifica los arrays
policyLinksycookieInfoen el archivo JavaScript según tus necesidades. - Personaliza el contenido y estilos adicionales según sea necesario para que se ajusten a tu sitio web.
Esta implementación proporciona una solución rápida, flexible y fácilmente personalizable para gestionar el consentimiento de cookies, cumpliendo con las regulaciones de privacidad y ofreciendo a los usuarios control sobre sus preferencias de cookies desde el momento en que cargan la página.
La función openBanner() se utiliza para mostrar el banner de consentimiento:
function openBanner() {
cookieBanner.style.display = 'block';
consentTab.style.display = 'none';
setTimeout(() => {
cookieBanner.classList.remove('hidden');
}, 50);
}Esta función:
- Hace visible el banner de cookies.
- Oculta la pestaña de consentimiento.
- Utiliza un pequeño retraso para asegurar una transición suave.
La función closeBanner() se utiliza para ocultar el banner de consentimiento:
function closeBanner() {
cookieBanner.classList.add('hidden');
setTimeout(() => {
cookieBanner.style.display = 'none';
consentTab.style.display = 'flex';
}, 300);
}Esta función:
- Añade la clase 'hidden' para iniciar la animación de cierre.
- Después de un retraso (que coincide con la duración de la animación CSS), oculta completamente el banner.
- Muestra la pestaña de consentimiento para permitir al usuario reabrir el banner si lo desea.
La función loadPreferences() carga las preferencias guardadas del usuario:
function loadPreferences() {
const savedPreferences = localStorage.getItem('cookiePreferences');
if (savedPreferences) {
cookiePreferences = JSON.parse(savedPreferences);
analyticsSwitch.checked = cookiePreferences.analytics;
marketingSwitch.checked = cookiePreferences.marketing;
}
}Esta función:
- Recupera las preferencias guardadas del localStorage.
- Si existen preferencias guardadas, actualiza el estado de los interruptores en la interfaz de usuario.
La función savePreferences() guarda las preferencias del usuario:
function savePreferences() {
localStorage.setItem('cookiePreferences', JSON.stringify(cookiePreferences));
localStorage.setItem('cookiesAccepted', 'true');
}Esta función:
- Guarda las preferencias actuales en el localStorage.
- Marca que el usuario ha aceptado las cookies.
El script configura varios event listeners para manejar las interacciones del usuario:
acceptAllButton.addEventListener('click', () => {
cookiePreferences = { necessary: true, analytics: true, marketing: true };
savePreferences();
closeBanner();
});
acceptNecessaryButton.addEventListener('click', () => {
cookiePreferences = { necessary: true, analytics: false, marketing: false };
savePreferences();
closeBanner();
});
showPreferencesButton.addEventListener('click', togglePreferencesDialog);
consentTab.addEventListener('click', openBanner);
savePreferencesButton.addEventListener('click', () => {
cookiePreferences.analytics = analyticsSwitch.checked;
cookiePreferences.marketing = marketingSwitch.checked;
savePreferences();
togglePreferencesDialog();
closeBanner();
});Estos event listeners manejan:
- Aceptación de todas las cookies
- Aceptación solo de cookies necesarias
- Mostrar el diálogo de preferencias
- Reabrir el banner desde la pestaña de consentimiento
- Guardar las preferencias personalizadas
El script se ejecuta inmediatamente después de cargarse:
// Ejecutar la inicialización inmediatamente
init();La función init() se encarga de:
- Obtener referencias a los elementos del DOM necesarios.
- Configurar los event listeners.
- Cargar las preferencias guardadas.
- Generar los enlaces de políticas y las tablas de información de cookies.
- Determinar si se debe mostrar el banner o la pestaña de consentimiento.
El script se carga de forma asíncrona para no bloquear el renderizado de la página:
<script src="script.js" async></script>Esta técnica permite que el script comience a cargarse inmediatamente sin esperar a que se analice el HTML completo.
Para evitar errores en caso de que el script se ejecute antes de que algunos elementos del DOM estén disponibles, se utiliza una función de ayuda:
function getElement(id) {
return document.getElementById(id) || { style: {}, classList: { add: () => {}, remove: () => {} } };
}Esta función devuelve el elemento si existe, o un objeto con métodos vacíos si no existe, evitando errores y permitiendo que el script continúe ejecutándose.