La nueva Ley de Protección de Datos de carácter personal del 2020, nos obliga a realizar modificaciones en nuestras páginas web. Esto evitará sanciones y denuncias futuras realizadas por los usuarios que naveguen nuestra web.
Antes de poder implementar el código debemos saber porqué necesitamos implementar dichos cambios, por lo que voy a resumir brevemente el contenido de esta.
- Ley de Protección de Datos y Garantía de Derechos Digitales (2/2028)
- Protección de Datos de carácter Personal (12/2020)
Ley de Protección de Datos y Garantía de Derechos de Digitales
La Ley de Protección de Datos y Garantía de Derechos de Digitales (LOPDGDD), siempre debemos implementarla si ofrecemos un servicio en nuestra web, ya sean formularios de contacto, suscripciones, venta de productos, publicidad o incluso si dispones de analíticas. Tan sólo estaremos excluidos si nuestro sitio web es privado o para uso doméstico.
Recuerda que si eres empresa estás usando los datos de la gente y por lo tanto te juegas tu reputación y credibilidad y lo que tienes que tener claro es que cualquier ciudadano podrá reclamar daños y perjuicios relacionados con su identidad.
Para implementar estos cambios en nuestra web, inicialmente obtenemos el consentimiento del usuario y no menos importante le garantizamos el derecho al olvido u oponerse al uso de sus datos personales. Por ello necesitamos actualizar todas las políticas legales de nuestro sitio web (avisos legales, políticas de privacidad y política de cookies). Por otro lado debemos actualizar todos los formularios de nuestro sito web para solicitar el consentimiento al usuario.
No voy a entrar más en detalle, porque no es mi campo ni el objetivo de este post, además disponemos de los enlaces al BOE para obtener más información.
Qué necesitamos saber
Si vas a implementar el código en WordPress u otras plataformas personalizadas recuerda que hay mejores alternativas para ello (plugins), por lo que este código sólo es para usarlo en páginas personalizadas o meramente como documentación para poder crear uno por ti mismo. Para empezar necesitamos hacer uso de las siguientes tecnologías:
- HTML5 para mostrar textos , enlaces y capas que verá el usuario.
- CSS y Bootstrap, para maquetar cómo ve la información el usuario.
- JavaScript, para poder gestionar las cookies y eventos, que nos permiten controlar si el usuario a consentido o no.
- jQuery, porque lo necesita Bootstrap para abrir los popups.
Cómo funciona
He creado un sencillo script, el cual usa 2 cookies; la primera se encarga de mostrar la información al usuario para que pueda gestionar como se va a tratar su información. Mientras que la segunda tan sólo comprueba si el usuario aceptó o denegó el uso de sus datos.
Para ver un ejemplo funcionando podéis hacer clic aquí y para comprobar el código que he usado podéis acceder a mi cuenta en jsfiddle.
Implementación
Para implementarlo, necesitamos incluir las siguientes librerías, empezando con las llamadas a los frameworks de Bootstrap y jQuery y declarando nuestros propios estilos y scripts personalizados.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Bootstrap y JQuery --> <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Custom CSS --> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" /> <!-- Custom Scripts --> <script src="assets/js/lopdgdd.js"></script> |
El siguiente paso es incluir el código HTML que mostraremos al usuario. Por un lado tenemos la capa inicial donde le mostramos información relacionada con la LOPDGDD. También podrá comprobar más información de cómo será usada su información personal. Por otro lado está el Popup, donde podrá aceptar o denegar el uso de su información.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- lopdgdd --> <div id="lopdgddd"> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-12 info"> <p>Utilizamos cookies propias para analizar nuestros servicios y de terceros para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Puedes obtener más información y configurar tus preferencias en "Configuración" y + "Info".</p> </div> <div class="col-md-4 col-sm-12 buttons"> <div class="buttons"> <a href="" class="btn-accept">Aceptar</a> <a href="" class="btn-conf" data-toggle="modal" data-target=".lopdgddd-modal">Configuración</a> <a href="politica-de-privacidad.html" class="btn-info">+info</a> </div> </div> </div> </div> </div> <!-- lopdgdd modal --> <div id="lopdgddd-modal" class="modal fade lopdgddd-modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <button type="button" class="close btn-close" data-dismiss="modal">×</button> <h3>Configuración de cookies</h3> <div class="content"> <p>En <strong>empresa</strong> usamos dos tipos de cookies. Las cookies requeridas y las cookies analíticas.</p> <p>Las <strong>cookies requeridas</strong> facilitan la navegación y la utilización de las diferentes opciones o servicios que ofrece la web como identificar la sesión, permitir el acceso a determinadas áreas, facilitar pedidos, compras, cumplimentación de formularios, inscripciones, seguridad, facilitar funcionalidades (videos, redes sociales…). Por el buen funcionamiento de la web, dichas cookies no se pueden desactivar.</p> <p>Las <strong>cookies analíticas</strong> nos permiten reconocer y contar la cantidad de usuarios en nuestro sitio, ver cómo se mueven dentro de él y registrar los contenidos que los usuarios ven o son de mayor interés. Esto nos ayuda a mejorar el servicio que ofrecemos, asegurando que nuestros usuarios encuentran la información que necesitan.</p> </div> <div class="buttons"> <a href="" class="btn-accept">Permitir Cookies Analíticas</a> <a href="" class="btn-denied">Rechazar Cookies Analíticas</a> </div> </div> </div> </div> |
Puedes crear tus propios estilos o modificar los que he creado he creado por defecto, para que estos sean lo más agradable al usuario.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#lopdgddd { position: fixed; padding: 10px 0 20px; z-index: 1; width: 100%; bottom: 0; margin: 0 auto; background-color: #fdffde; display: none; /* default hide div */ } #lopdgddd .buttons { clear:both; padding: 5px 0; } #lopdgddd .buttons a { padding: 10px; text-decoration: none; } #lopdgddd .btn-accept { background: #219234; color: #fff; } #lopdgddd .btn-conf { background: #4783a7; color: #fff; } #lopdgddd .btn-info { background: #219234; color: #fff; } #lopdgddd-modal .modal-content { padding: 15px; } #lopdgddd-modal .modal-content .content { background: #eee; padding: 10px; margin: 10px 0; } #lopdgddd-modal .modal-content .buttons { clear:both; height:auto; overflow: hidden; padding: 10px 0; } #lopdgddd-modal .modal-content .buttons a { text-decoration: none; } #lopdgddd-modal .modal-content .btn-close { float: right; position: absolute; right: 25px; top: 15px; font-size: 2rem; } #lopdgddd-modal .modal-content .btn-accept { background: #219234; color: #fff; padding: 25px; } #lopdgddd-modal .modal-content .btn-denied { background: #4783a7; color: #fff; padding: 25px; } @media screen and (max-width: 992px) { #lopdgddd { font-size: 1rem; } #lopdgddd .info { font-size: 0.8rem } #lopdgddd .buttons { padding: 0px 0 0 5px; } #lopdgddd-modal .modal-content .buttons a { display: flex; padding: 10px 10px 10px; margin: 0 0 5px; } } |
Por último insertamos el código JavaScript que controla las interacciones del usuario, además de gestionar y almacenar las cookies. Recuerda que siempre hay mejores maneras de escribir el código y siempre se puede mejorar su funcionalidad.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
window.addEventListener('load', () => { // hide lopdgdd bar function hideLopdgdd() { localStorage.setItem("lopdgdd_bar", 0); // denied Cookies lopdgddBar.style.display = "none"; // hide bar lopdgddModal = document.querySelector("#lopdgddd-modal") if (lopdgddModal) { if (lopdgddModal.classList.contains("show")) { console.log("existe") document.querySelector("#lopdgddd-modal").style.display = "none" // hide modal document.querySelector(".modal-backdrop").classList.remove('show') // hide backdrop bootstrap } } } // debug mode for show cookies values function debug() { localStorage.setItem("lopdgdd_bar", 1); // denied Cookies console.log("lopdgdd bar: "+localStorage.getItem("lopdgdd_bar")) console.log("lopdgdd cookies: "+localStorage.getItem("lopdgdd_cookies")) } //debug() let lopdgddBar = document.querySelector("#lopdgddd"); (localStorage.getItem("lopdgdd_bar") == 0) ? lopdgddBar.style.display = "none" : lopdgddBar.style.display = "block"; // Accept Btn let lopdgdddAccept = document.querySelector('#lopdgddd .btn-accept'); lopdgdddAccept.addEventListener('click', (evt) => { evt.preventDefault(); localStorage.setItem("lopdgdd_cookies", 1); // accept Cookies lopdgddBar.style.display = "none"; // hide bar hideLopdgdd() }) // Accept Modal Btn let lopdgdddModalAccept = document.querySelector('#lopdgddd-modal .btn-accept'); lopdgdddModalAccept.addEventListener('click', (evt) => { evt.preventDefault(); localStorage.setItem("lopdgdd_cookies", 1); // accept Cookies hideLopdgdd() }) // Denied Button let lopdgddDenied = document.querySelector('#lopdgddd-modal .btn-denied') lopdgddDenied.addEventListener('click', (event) => { event.preventDefault() localStorage.setItem("lopdgdd_cookies", 0); // denied Cookies hideLopdgdd() }) // Conf Btn btn_conf = document.querySelector('.btn-conf'); btn_conf.addEventListener('click', (event) => { event.preventDefault() }) }) |
Es importante saber que no sólo basta con esto, ya que para cumplir la ley debemos incluir en los códigos donde almacenamos información de los usuarios, una comprobación o lectura de la cookie que hemos creado, para comprobar si el usuario permite o no el uso de su información. De esta forma el usuario podrá navegar de forma invisible y por lo tanto no tendremos el control sobre sus datos (ip, registros, accesos, etc …)
|
1 2 3 4 5 6 |
<script type="text/javascript"> cookies_value = localStorage.getItem("lopdgdd_cookies") if (cookies_value == 1 || cookies_value == null) { // codigo de analytics } </script> |
A continuación todo el código y una previa de cómo se vería.
