Ejemplo JavaScript cartel Cookies

Si vas a diseñar una página web donde posiblemente entrarán navegantes europeos, y quieres usar Cookies, no te quedará otra que avisar a tus usuarios si no quieres infringir el artículo 22 de la Ley 34/2002. Es más, deberán darte su consentimiento de ante mano. Para cumplir esta agradable ley habrá que remangarse y programar alguna lógica. Lamentablemente no siempre disponemos de un Back-End (en el caso de disponer de PHP visita mi otro artículo) donde nos apoyemos si es puramente HTML/CSS o JavaScript (VueJS, ReactJS, Angular, vainilla…), lo que nos va a empujar a recurrir al ingenio. O lo que es lo mismo, usar el potencial de JavaScript para guardar la decisión del visitante y evitar que vuelva a mostrarse el cartel o aviso.

He preparado un ejemplo sencillo en JavaScript vainilla, o ES6, totalmente comentado y minimalista con las siguientes características.

Recuerda la opción pulsada.
Oculta el cartel de Cookies si ha sido pulsado.
Ejecuta un código si ha pulsado el botón afirmativo o si ya había confirmado en el pasado.
Es compatible con WordPress, Drupal u otros CMSs.
Solo JavaScript Vainilla, siendo compatible con cualquier Frameworks.

DEMO cookies

HTML

Las etiquetas son maleables a tu diseño, las puedes aumentar o reducir a necesidad. No obstante debes evitar cambiar las clases que usa el script: cookies, cookies__boton--no y cookies__boton--si.

<section class="cookies">
    <h2 class="cookies__titulo">¿Aceptas nuestras Cookies?</h2> 
    <p class="cookies__texto">Usamos cookies para mejorar tu experiencia en la web.</p>
    <div class="cookies__botones">
        <button class="cookies__boton cookies__boton--no">No</button>
        <button class="cookies__boton cookies__boton--si">Si</button>
    </div>
</section>

<!-- No borrar, aquí se generarán todas las etiquetas <script> si acepta el usuario -->
<div id="nuevosScripts"></div>

CSS

Tan solo es un ejemplo. Lo colorea negro, fija en la parte inferior y centra el contenido. Es hackeable.

.cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    color: white;
    font-family: arial;
    text-align: center;
}

.cookies__boton {
    background: initial;
    border: 2px solid white;
    padding: 1rem;
    font-size: 1rem;
    color: white;
    width: 5rem;
    text-align: center;
}

JavaScript

Lo más importante de este código lo encontramos en la sección de configuración, será donde sea integrado las rutas y códigos a ejecutar si el usuario afirma que esta conforme.

Pongamos el caso que quiero utilizar Google Tag Manager. Google me daría un código similar al siguiente.

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-xxxxxxxx-1');
</script>

En mi configuración será despiezado de la siguiente manera.

//-----------------------------------------------------
// Configuración
//-----------------------------------------------------
const urlsScriptsCookies = ['https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1'];

function contenidoScriptsCookies () {
    // Google Tag Manager
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-xxxxxxxx-1');
    // Fin Google Tag Manager
}

Y del resto se ocupará el código.

¿Qué ocurre detrás del decorado? Dependiendo que lo seleccionado por el visitante efectuará diferentes acciones.

Pulsa Si: Crea los <script> con cada ruta indicada en urlsScriptsCookies, lanza todo el código dentro de contenidoScriptsCookies y guarda en un LocalStorage de su selección.
Pulsa No: No genera nada, el usuario esta a salvo de Cookies externas. No obstante guarda, como el caso anterior, la opción marcada en un LocalStorage.

En ambos casos no vuelve a aparecer el cartel a no ser que sea limpiado el LocalStorage, por supuesto.

Cookies LocalStorage

El código completo de JavaScript.

<script defer>
        let cookies = () => {
            //======================================================================
            // COOKIES
            //======================================================================

            //-----------------------------------------------------
            // Configuración
            //-----------------------------------------------------
            const urlsScriptsCookies = ['https://analytics.google.com', 'https://facebook.com'];

            function contenidoScriptsCookies () {
                ////////////  ¿Google Analítics? /////////////
                ////////////  ¿Facebook Pixel? /////////////
                ////////////  ¿Admob? /////////////
                ////////////  etc  /////////////
            }


            //-----------------------------------------------------
            // Variables
            //-----------------------------------------------------
            const seccionCookie = document.querySelector('section.cookies');
            const cookieSi = document.querySelector('.cookies__boton--si');
            const cookieNo = document.querySelector('.cookies__boton--no');
            const nuevosScripts = document.querySelector('#nuevosScripts');

            //-----------------------------------------------------
            // Funciones
            //-----------------------------------------------------

            /**
             * Método que oculta la sección de Cookie para siempre
             */
            function ocultarCookie() {
                // Borra la sección de cookies en el HTML
                seccionCookie.remove();
            }

            /**
             * Método que marca las cookies como aceptadas
             */
            function aceptarCookies() {
                // Oculta el HTML de cookies
                ocultarCookie();
                // Guarda que ha aceptado
                localStorage.setItem('cookie', true);
                // Tu codigo a ejecutar si aceptan las cookies
                ejecutarSiAcepta();
            }

            /**
             * Método que marca las cookies como denegadas
             */
            function denegarCookies() {
                // Oculta el HTML de cookies
                ocultarCookie();
                // Guarda que ha aceptado
                localStorage.setItem('cookie', false);
            }

            /**
             * Método que ejecuta tu código si aceptan las cookies
             */
            function ejecutarSiAcepta() {
                // Crea los <script>
                urlsScriptsCookies.forEach((url) => {
                    const nuevoScript = document.createElement('script');
                    nuevoScript.setAttribute('src', url);
                    nuevosScripts.appendChild(nuevoScript);
                });
                // Lanza los códigos
                contenidoScriptsCookies();
            }

            /**
             * Método que inicia la lógica
             */
            function iniciar() {
                // Comprueba si en el pasado el usuario ha marcado una opción
                if (localStorage.getItem('cookie') !== null) {
                    if(localStorage.getItem('cookie') === 'true') {
                        // Aceptó
                        aceptarCookies();
                    } else {
                        // No aceptó
                        denegarCookies();
                    }
                }
            }

            //-----------------------------------------------------
            // Eventos
            //-----------------------------------------------------
            cookieSi.addEventListener('click',aceptarCookies, false);
            cookieNo.addEventListener('click',denegarCookies, false);

            return {
                iniciar: iniciar
            }
        };

        // Activa el código. Comenta si quieres desactivarlo.
        cookies().iniciar();
</script>

Completo

Todo unido quedaría de la siguiente forma.

<style>
 .cookies {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: black;
     color: white;
     font-family: arial;
     text-align: center;
 }

 .cookies__boton {
     background: initial;
     border: 2px solid white;
     padding: 1rem;
     font-size: 1rem;
     color: white;
     width: 5rem;
     text-align: center;
 }

</style>

<section class="cookies">
    <h2 class="cookies__titulo">¿Aceptas nuestras Cookies?</h2> 
    <p class="cookies__texto">Usamos cookies para mejorar tu experiencia en la web.</p>
    <div class="cookies__botones">
        <button class="cookies__boton cookies__boton--no">No</button>
        <button class="cookies__boton cookies__boton--si">Si</button>
    </div>
</section>

<!-- No borrar, aquí se generarán todas las etiquetas <script> si acepta el usuario -->
<div id="nuevosScripts"></div>

<script defer>
let cookies = () => {
    //======================================================================
    // COOKIES
    //======================================================================

    //-----------------------------------------------------
    // Configuración
    //-----------------------------------------------------
    const urlsScriptsCookies = ['https://analytics.google.com', 'https://facebook.com'];

    function contenidoScriptsCookies () {
        ////////////  ¿Google Analítics? /////////////
        ////////////  ¿Facebook Pixel? /////////////
        ////////////  ¿Admob? /////////////
        ////////////  etc  /////////////
    }


    //-----------------------------------------------------
    // Variables
    //-----------------------------------------------------
    const seccionCookie = document.querySelector('section.cookies');
    const cookieSi = document.querySelector('.cookies__boton--si');
    const cookieNo = document.querySelector('.cookies__boton--no');
    const nuevosScripts = document.querySelector('#nuevosScripts');

    //-----------------------------------------------------
    // Funciones
    //-----------------------------------------------------

    /**
      * Método que oculta la sección de Cookie para siempre
      */
    function ocultarCookie() {
        // Borra la sección de cookies en el HTML
        seccionCookie.remove();
    }

    /**
      * Método que marca las cookies como aceptadas
      */
    function aceptarCookies() {
        // Oculta el HTML de cookies
        ocultarCookie();
        // Guarda que ha aceptado
        localStorage.setItem('cookie', true);
        // Tu codigo a ejecutar si aceptan las cookies
        ejecutarSiAcepta();
    }

    /**
      * Método que marca las cookies como denegadas
      */
    function denegarCookies() {
        // Oculta el HTML de cookies
        ocultarCookie();
        // Guarda que ha aceptado
        localStorage.setItem('cookie', false);
    }

    /**
      * Método que ejecuta tu código si aceptan las cookies
      */
    function ejecutarSiAcepta() {
        // Crea los <script>
        urlsScriptsCookies.forEach((url) => {
            const nuevoScript = document.createElement('script');
            nuevoScript.setAttribute('src', url);
            nuevosScripts.appendChild(nuevoScript);
        });
        // Lanza los códigos
        contenidoScriptsCookies();
    }

    /**
      * Método que inicia la lógica
      */
    function iniciar() {
        // Comprueba si en el pasado el usuario ha marcado una opción
        if (localStorage.getItem('cookie') !== null) {
            if(localStorage.getItem('cookie') === 'true') {
                // Aceptó
                aceptarCookies();
            } else {
                // No aceptó
                denegarCookies();
            }
        }
    }

    //-----------------------------------------------------
    // Eventos
    //-----------------------------------------------------
    cookieSi.addEventListener('click',aceptarCookies, false);
    cookieNo.addEventListener('click',denegarCookies, false);

    return {
        iniciar: iniciar
    }
}

// Activa el código. Comenta si quieres desactivarlo.
cookies().iniciar();

</script>

Javascript

Andros Fenollosa

01/03/2021

Ejemplo JavaScript cartel Cookies

HTML

CSS

JavaScript

Completo

Donación con recompensa

Comentarios

Tal vez también te interese...

Carousel en CSS con Mandatory y diapositivas en bloques de HTML

Aprende a estructurar un test

Cómo suavizar un scroll