Introducción
La Directiva Europea de cookies 2009/136/CE y su transposición Artículo 22 del Real Decreto Ley 34/2002 del 11 de julio en España (Ley de Servicios de la Sociedad de Información, LSSI) obliga a que todas las páginas web que utilicen cookies distintas a las de caracter técnico (aquellas que proveen funcionalidades básicas del sitio web) muestren una advertencia al usuario para que sea consciente de cómo afectan estas galletas a su privacidad. De este modo el usuario puede proporcionar su consentimiento para que sean instaladas (o no) en su navegador.
A pesar a que la directiva ha generado estos años bastante controversia, está claro que guste más o menos es un avance importante en la protección de la privacidad del usuario, sobre todo en la concienciación del mismo respecto al uso que se puede hacer de sus datos. Al incumplirla uno se enfrenta a importantes sanciones económicas y/o a que sus ingresos de publicidad se detengan (agencias como Google Adsense obligan a que todos los sitios web y aplicaciones que muestren su publicidad cumplan la ley).
Es importante que, independientemente del país en que hospede su web cumpla con la normativa puesto que es de obligatorio cumplimiento para aquellas personas físicas o jurídicas con sede en España que desarrollen alguna actividad económica a través de sus páginas web. Por ejemplo; este blog (www.ingenieroinformatico.org) es redactado por un ciudadano Español y como utiliza publicidad mediante Google AdSense para su sostenibilidad está obligado a cumplir con la normativa de la LSSI.
La galletas críticas y que son de obligatorio consentimiento por la legislación actual son las utilizadas para proveer publicidad (en el caso de utilizar Google AdSense) o monitorización de la navegación del usuario (Google Analytics, Piwik, etc…). Si su web no utiliza dichos tipos de galletas, le aconsejamos que implemente igualmente la política de cookies aunque no esté obligado por los siguientes motivos:
- No está de más informar al usuario acerca de las galletas que utiliza una web (aunque sólo sean técnicas).
- Si su web crece e introduce publicidad o un servicio de monitorización de usuarios y las visitas tan sólo necesitará actualizar la advertencia y su política de cookies.
- Por más que leemos acerca del tema existen un montón de opiniones distintas, incluso la ley es ambigua en muchos aspectos. Mi recomendación personal es curarse en salud implementándola de todos modos.
Como este blog no tiene por objetivo centrarse en los aspectos legales ni jurídicos, se va a explicar a continuación cómo se implementó la solución concreta para este blog partiendo de la guía que proporciona la AEPD (denominada Guía de cookies) para que os sirva de ayuda en vuestro esfuerzo por cumplir la legislación vigente.
Redacción de la política de cookies
Antes de nada es importante redactar una política de cookies. Muchas páginas web incluyen la política de sus galletas como un apartado de su política de privacidad. Sin embargo, la AEPD desaconseja esta opción y recomienda una sección denominada «Política de cookies» específica para tal propósito y cuyo enlace se encuentre visible en el menú principal de navegación o en el pie de página (footer). Dicha política debe utilizar un lenguaje comprensible según el nivel de conocimientos técnicos del usuario medio que la visite. Como esto es muy relativo, es mejor decantarse por la explicación más sencillla posible para que cualquier usuario independientemente de su nivel la comprenda.
Los apartados que debe tener como mínimo la política de las galletas son:
- Definición y uso de las cookies.
- Tipos de galletas utilizadas.
- Gestión de cookies en el navegador.
Como ejemplo puede utilizarse nuestra política de cookies o la de cualquier otra web. Lo importante es que sea lo más sencilla posible, que utilice ejemplos de los tipos de galletas utilizadas según la web objetivo y que enlace a documentación de gestión de las cookies para los navegadores más utilizados y populares.
Implementación de la advertencia
Existen tres formas de implementar la advertencia a mostrar y su correcto comportamiento en la web:
- Programar una advertencia desde cero.
- Utilizar una implementación existente mediante:
- Una librería JavaScript como The cookiesDirective.js.
- Un plug-in disponible para un CMS como el Spain Cookie Law para WordPress.
Como no todo el mundo sabe programar, vamos a obviar el punto uno así como la utilización de plug-ins puesto que son contraproducentes: Sobrecargan en exceso los gestores de contenidos al involucran más código del necesario haciéndolos bastante pesados. Además muchos de ellos ofrecen un consentimiento explícito de aceptación al usuario que obliga a bloquear la colocación de las galletas en el navegador del usuario hasta que el usuario acepte, procedimiento que no cumplen.
Tampoco todas las librerías JavaScript cumplen con la ley de cookies. Una que sí lo hace (al menos en parte) es The cookiesDirective.js y que presenta las dos posibles opciones de obtener el consentimiento del usuario mediante:
- Consentimiento explícito: Muestra un mensaje para la obtención del consentimiento del usuario, botones de aceptación y no aceptación junto con una casilla (checkbox) de «he entendido las condiciones» y enlace a la política de cookies. Sin embargo, con esta opción sería necesario bloquear las galletas antes de que se coloquen en el navegador y la librería no lo hace. Lo que sí se permite es ampliar la funcionalidad del script para que lo haga, igual utilizando alguna librería de gestión de galletas como js-cookie sería posible obtener dicho funcionamiento, pero no es trivial y conllevaría demasiado esfuerzo.
- Consentimiento implícito: Será el que implementaremos en la solución de ejemplo por ser el más simple y menos engorroso. Simplemente se muestra un mensaje que enlaza a la política de cookies y un botón de «Entendido» o «Acepto». Como el usuario ha sido informado de la política y mediante esta de cómo gestionar las galletas en su navegador (puede eliminarlas) se entiende que si el usuario la lee y continua navegando es que acepta las condiciones. Este tipo de mensaje lo está utilizando Google actualmente en sus páginas de Blogger y es el utilizado para esta web y la presente guía.
Descargar e instalar cookiesDirective.js
Acudir a la web de cookiesDirective.js y descargar la última versión disponible pulsando sobre el botón GET THE SCRIPT. A continuación se descargará un fichero comprimido olliephillips-cookiesdirective.js-ea7e21bd0eec.zip o de nombre similar.
Una vez descargado, descomprimir en el servidor en el directorio deseado. Como esta web utiliza el gestor de contenidos WordPress se ha descomprimido el contenido en el directorio del tema utilizado en el directorio /var/www/wp-content/themes/faq/assets/js/cookiesdirective.
Como cookiesDirective.js requiere jQuery para funcionar la forma más cómoda de incluirlo es a partir de la CDN de Google en la sección head del código HTML e incluimos la carga del script asíncronamente para que minimizar el bloqueo de la carga de la página web en el navegado mediante la inclusión de la ruta al directorio en que se descomprimió la librería:
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="http://www.ingenieroinformatico.org/wp-content/themes/faq/assets/js/cookiesdirective/jquery.cookiesdirective.js" async></script> </head>
Por último hay que invocar al script, y la mejor forma de hacerlo es en el pie de página o footer:
<script type="text/javascript">
$(document).ready(function() {
$.cookiesDirective({
privacyPolicyUri: 'my-privacy-policy.html'
});
});
</script>
Una vez guardados los cambios en los ficheros, visitamos la página web en el navegador y debería aparecer el consentimiento explícito por defecto.
Personalizar el script
Ahora vamos a personalizar el mensaje mostrado mediante una serie de parámetros pasados al script. Dichos parámetros son:
- explicitConsent: false para que el consentimiento no sea explícito.
- position: ‘top’ si se quiere mostrar la advertencia de consentimiento en la parte superior de la web. Nosotros hemos optado por asignarle el valor bottom para que se muestre en la parte inferior.
- duration: 30. Valor en segundos hasta que desaparece la advertencia para que el aviso no sea molesto para el usuario. Por defecto son 15 segundos, lo cual nos pareció insuficiente. Medio minuto parece más adecuado.
- limit: 1: número de veces que es mostrada la advertencia. Con una vez es suficiente para el consentimiento implícito de continuar navegando. Por defecto vale cero.
- message: ‘Mensaje a mostrar’ si se desea mostrar un texto alternativo al de la advertencia por defecto.
- privacyPolicyUri: ‘tu-politica-de-cookies.html’ para indicar la URI que enlaza a la política de privacidad/cookies.
El código de la llamada al cookiesDirective.js queda así:
<script type="text/javascript">
$(document).ready(function() {
$.cookiesDirective({
privacyPolicyUri: 'http://www.ingenieroinformatico.org/politica-de-cookies/',
explicitConsent: false,
fontFamily: 'arial',
linkColor: '#0085BA',
message: 'Esta web utiliza cookies propias y de terceros para ofrecerle nuestros servicios y mostrarle publicidad en base al análisis de sus hábitos de navegación. Si continúa navegando se considera que acepta su uso.',
position: 'bottom',
limit: 1,
duration: 30
});
});
</script>
En caso de que desee consultar todos los parámetros posibles puede hacerlo en http://cookiesdirective.com/.
Por último, pese a indicarle el mensaje a mostrar en castellano, seguirá mostrando el texto del enlace a la política de cookies y del botón de aceptación en inglés. Para corregir esto editamos el fichero jquery.cookiesdirective.js y modificamos las líneas de código relativas al consentimiento implícito. En nuestro caso también fue necesario cambiar el color del texto del botón, ya que en blanco no se leía.
El código JavaScript por defecto era:
// Build the rest of the disclosure for implied and explicit consent
if(settings.explicitConsent) {
// Explicit consent disclosure
html += scriptsDisclosure + 'You may delete and block all cookies from this site, but parts of the site will not work.';
html += 'To find out more about cookies on this website, see our <a style="color:'+ settings.linkColor + ';font-weight:bold;';
html += 'font-family:' + settings.fontFamily + ';font-size:' + settings.fontSize + ';" href="'+ settings.privacyPolicyUri + '">privacy policy</a>.<br/>';
html += '<div id="epdnotick" style="color:#ca0000;display:none;margin:2px;"><span style="background:#cecece;padding:2px;">You must tick the "I accept cookies from this site" box to accept</span></div>';
html += '<div style="margin-top:5px;">I accept cookies from this site <input type="checkbox" name="epdagree" id="epdagree" /> ';
html += '<input type="submit" name="explicitsubmit" id="explicitsubmit" value="Continue"/><br/></div></div>';
} else {
// Implied consent disclosure
html += scriptsDisclosure + ' More details can be found in our <a style="color:'+ settings.linkColor + ';';
html += 'font-weight:bold;font-family:' + settings.fontFamily + ';font-size:' + settings.fontSize + ';" href="'+ settings.privacyPolicyUri + '">privacy policy</a>.';
html += '<div style="margin-top:5px;"><input type="submit" name="impliedsubmit" id="impliedsubmit" value="Do not show this message again"/></div></div>';
}
Y fue modificado de la siguiente manera:
// Build the rest of the disclosure for implied and explicit consent
if(settings.explicitConsent) {
// Explicit consent disclosure
html += scriptsDisclosure + 'You may delete and block all cookies from this site, but parts of the site will not work.';
html += 'To find out more about cookies on this website, see our <a style="color:'+ settings.linkColor + ';font-weight:bold;';
html += 'font-family:' + settings.fontFamily + ';font-size:' + settings.fontSize + ';" href="'+ settings.privacyPolicyUri + '">privacy policy</a>.<br/>';
html += '<div id="epdnotick" style="color:#ca0000;display:none;margin:2px;"><span style="background:#cecece;padding:2px;">You must tick the "I accept cookies from this site" box to accept</span></div>';
html += '<div style="margin-top:5px;">I accept cookies from this site <input type="checkbox" name="epdagree" id="epdagree" /> ';
html += '<input type="submit" name="explicitsubmit" id="explicitsubmit" value="Continue"/><br/></div></div>';
} else {
// Implied consent disclosure
html += scriptsDisclosure + ' Más información en nuesta <a style="color:'+ settings.linkColor + ';';
html += 'font-weight:bold;font-family:' + settings.fontFamily + ';font-size:' + settings.fontSize + ';" href="'+ settings.privacyPolicyUri + '">política de cookies</a>.';
html += '<div style="margin-top:5px; color: black;"><input type="submit" name="impliedsubmit" id="impliedsubmit" value="Entendido"/></div></div>';
}
Finalmente, para verificar el correcto funcionamiento recargamos la página en el navegador tras haber limpiado las galletas y recargamos la pestaña con Ctrl + F5. Aparecerá el anuncio con la política enlazada correctamente, durará el tiempo indicado en segundos, el botón de aceptación con texto visible y todo ello en español.
Referencias web
- Documentación y guías de la Agencia Española de Protección de Datos (AEPD) sobre cookies
- European Commission: Information Providers Guide about cookies
- The cookiesDirective.js
- Spain Cookie Law (plug-in para WordPress)
