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

¿Me ayudas?

Comentarios

Tal vez también te interese...

Websocat, cliente de WebSocket para terminal

Levantar Cypress en modo gráfico sobre Docker

Material que necesito antes implementar una Web

Ejemplo JavaScript cartel Cookies

HTML

CSS

JavaScript

Completo

Newsletter 📨

¿Me ayudas?

Comentarios

Tal vez también te interese...

Websocat, cliente de WebSocket para terminal

Levantar Cypress en modo gráfico sobre Docker

Material que necesito antes implementar una Web