El servicio de Google para realizar el aviso de uso de cookies en tu web: Cookiechoices.

Al navegar por múltiples sitios en Internet todos nos hemos encontrado con algún tipo de aviso o alerta que alude al "uso de cookies" en el sitio por el cual estamos navegando.

Este mensaje es fruto de la legislación europea publicada en su directiva 2009/136/CE referente a los derechos de los usuarios y la necesidad de que estos sean informados cuando un sitio web haga uso de las mismas.

¿Qué son las Cookies?

Las cookies (proveniente de galletas en inglés) son pequeños "trozos" de información que un sitio web puede utilizar para almacenar información del navegador que puede ser analizada por un programa para diversos fines.

Por ejemplo, cuando un usuario realiza una búsqueda de un artículo en una determinada tienda virtual, los sistemas publicitarios que puedas albergar en tu web pueden leer de la cookie de dicha tienda virtual qué artículo ha buscado el citado usuario para ofrecerle publicidad referente a ese artículo.

También se pueden utilizar Cookies para estudiar el número de visitas que un sitio web recibe, la localización geográfica de las mismas y diversa información que puede utilizarse para múltiples fines dentro de un sitio web.

¿Porqué hay que informar del uso de Cookies?

Legalmente es natural informar a los usuarios de la utilización de aplicaciones de terceros que pueden leer la información temporal de la navegación de los mismos que realizan por Internet. El usuario tiene el derecho de conocer que sus datos de navegación pueden ser analizados por sistemas ajenos a la propia web que visita, así como saber cuáles son estos para informarse de las políticas de calidad y directrices de calidad de las mismas.

¿Cómo puedo informar al usuario del uso de cookies en mi página web?

Google ha desarrollado la web http://www.cookiechoices.org/ diseñada específicamente para todos los editores web que deseen utilizar un código fuente que ya se ocupa directamente de avisar al usuario como nosotros decidamos.

En Cookiechoices te proporcionan un script mediante el cual puedes avisar al usuario de que utilizas cookies para que éste pueda visualizar información sobre las mismas o cerrar el mensaje porque acepte su utilización.

¿Porqué utilizar las herramientas de Cookiechoices?

En primer lugar por confiabilidad. Aunque existen múltiples herramientas, páginas webs y scripts en Internet para realizar el aviso de uso de cookies a los usuarios, éste sitio está respaldado, diseñado y desarrollado por Google.

En segundo lugar, el script utilizado por cookiechoices, a diferencia de la mayoría existente en Internet, está diseñado para no impactar en el rendimiento web de la página (utiliza llamadas asíncronas según la normativa de Google Pagespeed para evitar bloqueos o ralentizaciones innecesarias).

Por último y lo más importante, no reside en ningún servidor "de terceros". Puedes instalarte el código fuente que utiliza el script de cookichoices en tu propia web sin necesidad de acceder a él por medio de un servidor que no sea el tuyo. Simplificando, el código que utilizas no está en otro sitio que "donde tú digas" y no dependes de una web ajena a la tuya para ofrecer el servicio de aviso a los usuarios.

Adicionalmente, mejora la calidad de tu servicio al cumplir con las normativas y estándares europeos creados a tal efecto.

¿De qué debe componerse un correcto mensaje de aviso de uso de cookies?

Si bien cookiechoices te dota de todas las opciones para poder poner en tu web el mensaje de aviso de cookies es importante conocer la composición de éste:

En Diarios de la nube he implementado el mensaje de aviso de cookies ajustado en la parte superior de la web, justo bajo el menú (está remarcado en rojo en la imagen inferior):

• El mensaje está compuesto de un "cuerpo" con el texto que prefieras para avisar sobre la utilización de cookies en tu web: "Las cookies me permiten ofrecerte mejor mis servicios. Al utilizar estos servicios, aceptas el uso que hago de las cookies"
• Al cuerpo del mensaje siempre le acompañan dos enlaces:
• "Aprender más": donde he creado una página en el Blog para explicar la utilización que hago de las cookies.
• "Cerrar mensaje": enlace que al ser pulsado hará que el mensaje de cookies se cierre y NO VUELVA A SALIR hasta que el usuario limpie sus archivos temporales en el navegador.

¿Cómo utilizo los servicios de cookiechoices de Google en mi web con Joomla, Wordpress, etc...?

1) teclea en la barra de direcciones de tu navegador http://www.cookiechoices.org/ y se te mostrará una pantalla como la que te expongo a continuación:

2) Pulsa en la opción del menú de la página web llamada "Herramientas" tal como te marco en el recuadro rojo de la imagen inferior.

3) En Herramientas te explican las dos opciones disponibles para mostrar el mensaje de aviso a tus usuarios:

• En forma de mensaje de bienvenida, donde como puedes ver en la pantalla inferior, cuando el usuario acceda a la web se le presentará el aviso en una ventanita en el centro de la pantalla (ver ejemplo en pantalla inferior):

• En una barra de aviso en la parte superior de la página web (ver ejemplo en pantalla inferior, he marcado en rojo el aviso tal y como quedaría en cualquier web donde se instalara):

4) Una vez escogido el formato de aviso que prefiramos para nuestra web, sólo tenemos que:

En Wordpress, Joomla o cualquier medio de edición web con permisos para subir archivos:

4.1) Copiar en la raíz de nuestro servidor el archivo descargable desde cookiechoices llamado "cookiechoices.zip" (te lo marco en rojo en la pantalla inferior el enlace del cual puedes descargarlo):

4.2) Copiar el código fuente que se encuentra justo debajo del enlace donde se referencia al javascript de cookiechoices (te lo marco en rojo en la pantalla inferior):

En Blogger:

Tienes dos formas de hacerlo en Blogger: utilizando el código de cookiechoices.js directamente dentro de tu plantilla o empleando Google Drive para subir cookiechoices.js y llamarlo desde tu Blog.

NOTA: antes de hacer cambios en tu plantilla recuerda realizar una copia de seguridad para recuperarla en caso de error.

A) Utilizando el código fuente del contenido de cookiechoices.js directamente en tu plantilla. Bastaría con copiar y pegar el código fuente que a continuación te muestro justo bajo la etiqueta <body> del HTML de tu plantilla:

A.1) Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" :

A.2) Copia y pega el código de cookiechoices.js directamente en tu plantilla bajo la etiqueta <body>. Debido a la extensión, para no hacer más grande el documento te pongo el código para copiar y pegar tras el botón que te muestro a continuación:

<script>

//<![CDATA[

/*

 Copyright 2014 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");

 you may not use this file except in compliance with the License.

 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software

 distributed under the License is distributed on an "AS IS" BASIS,

 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and

 limitations under the License.

 */

(function(window) {

  if (!!window.cookieChoices) {

    return window.cookieChoices;

  }

  var document = window.document;

  // IE8 does not support textContent, so we should fallback to innerText.

  var supportsTextContent = 'textContent' in document.body;

  var cookieChoices = (function() {

    var cookieName = 'displayCookieConsent';

    var cookieConsentId = 'cookieChoiceInfo';

    var dismissLinkId = 'cookieChoiceDismiss';

    function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {

      var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +

          'margin: 63px 0px 63px 0px; left:0; top:0;padding:4px;z-index:1000;text-align:center;';

      var cookieConsentElement = document.createElement('div');

      cookieConsentElement.id = cookieConsentId;

      cookieConsentElement.style.cssText = butterBarStyles;

      cookieConsentElement.appendChild(_createConsentText(cookieText));

      if (!!linkText && !!linkHref) {

        cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));

      }

      cookieConsentElement.appendChild(_createDismissLink(dismissText));

      return cookieConsentElement;

    }

    function _createDialogElement(cookieText, dismissText, linkText, linkHref) {

      var glassStyle = 'position:fixed;width:100%;height:100%;z-index:999;' +

          'top:0;left:0;opacity:0.5;filter:alpha(opacity=50);' +

          'background-color:#ccc;';

      var dialogStyle = 'z-index:1000;position:fixed;left:50%;top:50%';

      var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +

          'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;';

      var cookieConsentElement = document.createElement('div');

      cookieConsentElement.id = cookieConsentId;

      var glassPanel = document.createElement('div');

      glassPanel.style.cssText = glassStyle;

      var content = document.createElement('div');

      content.style.cssText = contentStyle;

      var dialog = document.createElement('div');

      dialog.style.cssText = dialogStyle;

      var dismissLink = _createDismissLink(dismissText);

      dismissLink.style.display = 'block';

      dismissLink.style.textAlign = 'right';

      dismissLink.style.marginTop = '8px';

      content.appendChild(_createConsentText(cookieText));

      if (!!linkText && !!linkHref) {

        content.appendChild(_createInformationLink(linkText, linkHref));

      }

      content.appendChild(dismissLink);

      dialog.appendChild(content);

      cookieConsentElement.appendChild(glassPanel);

      cookieConsentElement.appendChild(dialog);

      return cookieConsentElement;

    }

    function _setElementText(element, text) {

      if (supportsTextContent) {

        element.textContent = text;

      } else {

        element.innerText = text;

      }

    }

    function _createConsentText(cookieText) {

      var consentText = document.createElement('span');

      _setElementText(consentText, cookieText);

      return consentText;

    }

    function _createDismissLink(dismissText) {

      var dismissLink = document.createElement('a');

      _setElementText(dismissLink, dismissText);

      dismissLink.id = dismissLinkId;

      dismissLink.href = '#';

      dismissLink.style.marginLeft = '24px';

      return dismissLink;

    }

    function _createInformationLink(linkText, linkHref) {

      var infoLink = document.createElement('a');

      _setElementText(infoLink, linkText);

      infoLink.href = linkHref;

      infoLink.target = '_blank';

      infoLink.style.marginLeft = '8px';

      return infoLink;

    }

    function _dismissLinkClick() {

      _saveUserPreference();

      _removeCookieConsent();

      return false;

    }

    function _showCookieConsent(cookieText, dismissText, linkText, linkHref, isDialog) {

      if (_shouldDisplayConsent()) {

        _removeCookieConsent();

        var consentElement = (isDialog) ?

            _createDialogElement(cookieText, dismissText, linkText, linkHref) :

            _createHeaderElement(cookieText, dismissText, linkText, linkHref);

        var fragment = document.createDocumentFragment();

        fragment.appendChild(consentElement);

        document.body.appendChild(fragment.cloneNode(true));

        document.getElementById(dismissLinkId).onclick = _dismissLinkClick;

      }

    }

    function showCookieConsentBar(cookieText, dismissText, linkText, linkHref) {

      _showCookieConsent(cookieText, dismissText, linkText, linkHref, false);

    }

    function showCookieConsentDialog(cookieText, dismissText, linkText, linkHref) {

      _showCookieConsent(cookieText, dismissText, linkText, linkHref, true);

    }

    function _removeCookieConsent() {

      var cookieChoiceElement = document.getElementById(cookieConsentId);

      if (cookieChoiceElement != null) {

        cookieChoiceElement.parentNode.removeChild(cookieChoiceElement);

      }

    }

    function _saveUserPreference() {

      // Set the cookie expiry to one year after today.

      var expiryDate = new Date();

      expiryDate.setFullYear(expiryDate.getFullYear() + 1);

      document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString();

    }

    function _shouldDisplayConsent() {

      // Display the header only if the cookie has not been set.

      return !document.cookie.match(new RegExp(cookieName + '=([^;]+)'));

    }

    var exports = {};

    exports.showCookieConsentBar = showCookieConsentBar;

    exports.showCookieConsentDialog = showCookieConsentDialog;

    return exports;

  })();

  window.cookieChoices = cookieChoices;

  return cookieChoices;

})(this);

//]]>

  document.addEventListener(&#39;DOMContentLoaded&#39;, function(event) {

    cookieChoices.showCookieConsentBar(&#39;AQUI_TU_MENSAJE_DE_AVISO&#39;,

      &#39;cerrar mensaje&#39;, &#39;Aprende más&#39;, &#39;AQUÍ_DIRECCIÓN_PARA_EXPLICAR_TUS_COOKIES&#39;);

  });

</script>

Recuerda modificar a tu gusto el mensaje de aviso y de establecer la URL a la que redireccionarás para explicar las cookies que utilizas en tu web si pulsan "más información".

B) Utilizando Google Drive para servir el archivo cookiechoices.js en tu Blog: 

Puedes subir el archivo a Google Drive y luego llamarlo desde tu plantilla:

Descarga el archivo cookiechoices.zip y descomprímelo en tu disco duro. En el interior del .zip verás que se encuentra el .js (el javascript de cookiechoices) y el archivo license (la licencia de uso).

• B.1- Conéctate a Drive https://drive.google.com/ y una vez dentro pulsa el botón de la flecha roja que hay a la derecha del botón "crear" en el menú izquierdo. Te he marcado el botón con un recuadro azul en la imagen inferior de Drive:

• B.2- Ahora sube los dos archivos (cookiechoices.js y license) con el botón de la flecha.

• B.3- Cuando subas los archivos asegúrate que están compartidos como Público. Si no la compartes, no se podrá ver en Internet. Deberás seleccionar "Publico en la web" en la sección "Opciones de visibilidad" tal como te muestro en pantalla.

• B.4- Al finalizar de compartir debes copiarte el código que te he marcado en rojo en la ventana inferior. Es el código identificativo único que Drive asignará a tu carpeta para que puedas utilizarla en tu Blog:

• B.5- Escribe el código fuente de cookiechoices del tipo de aviso que quieres utilizar (si el de ventana de bienvenida o el de barra horizontal) en el código fuente de tu plantilla bajo la etiqueta <Body>:

<script src="DIRECCIÓN_DE_DRIVE"></script>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    cookieChoices.showCookieConsentDialog('tu mensaje de aviso.',
        'cerrar mensaje', 'Aprender más', 'dirección para explicar uso');
  });
</script>

 un ejemplo con Drive sería:

<script src="https://googledrive.com/host/LA_CLAVE_DE_DRIVE/"></script>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    cookieChoices.showCookieConsentDialog('tu mensaje de aviso.',
        'cerrar mensaje', 'Aprender más', 'dirección para explicar uso');
  });
</script>

• B.6- introduce el mensaje de aviso que prefieras y para cuando tus usuarios pulsen en "aprender más" escribe a la URL donde deseas que sean redireccionados para la explicación de las cookies que utilizas en tu web.

¡Eso es todo!, elige la forma en que deseas mostrar tu aviso de cookies, personaliza tu mensaje, ponlo en tu web y listo para cumplir con la normativa actual.