Como crear tu cookie consent

Como crear tu cookie consent


Aprovechando el cambio a Ghost basado en Expressjs como mi nueva plataforma de blogging, he decidido hacer uso de Cookies de Google Analytics para mejorar mi blog, por lo que tengo que cumplir la LSSI.

Para entender que es lo que necesitaba he leído varios documentos, aunque creo que con cumplir esta infografía tienes más que suficiente (pero si quieres saber más puedes leerte la guía de uso de cookies de la AGPD).

Como siempre me he puesto en marcha revisando algunas de las soluciones disponibles en internet, como

Finalmente, tras revisar lo que tenía hecho Otogami, me decante por desarrollar un Cookie consent del mismo estilo. Otogami incorpora una notificación del uso de Cookies que es aceptada en el momento en el que el usuario realiza un determinado scroll en la pagina. La única pega es que no se realiza el seguimiento hasta la siguiente recarga de página.

Uso Mtheme como theme de Ghost, que incorpora unas magnificas cabeceras y hace obligado el uso de scroll. El código esta disponible en Mtheme-Build e incorpora Grunt, Bower.

Este theme usa:

Así que solo he tenido que agregar a Bower:

  • Noty, para generar la notificación,
  • jQuery-Cookie, para la gestión de las cookies,

Una vez las dependencias están descargadas (bower install) editamos el fichero config.js de Requirejs y agregamos los paths y shims de Noty y jQuery-Cookie.

require.config({
  ...
  paths: {
      ...
    'jquery-cookie': '../../../components/jquery-cookie/jquery.cookie',
    noty: '../../../components/noty/js/noty/packaged/jquery.noty.packaged',
      ...
  },
  ...
  shim: {
    'jquery-cookie': {
      deps: ['jquery']
    },
    noty: {
      deps: ['jquery']
    },
  }
  ...
});

Creamos el esqueleto de nuestro modulo para gestión de cookies con Requirejs inyectado todas las dependencias.

require(['jquery', 'scrollmagic', 'noty', 'jquery-cookie'], function($, ScrollMagic) {
    // code here
});

Escribimos una función pageview que se encargará de realizar el seguimiento y el evento pageview de Analytics.

var pageview = function() {
    ga('create', 'UA-51664426-1', 'rauldelahoz.com');
    ga('send', 'pageview');
}

En primer lugar validamos si nuestra cookie ha sido creada, usando jQuery-Cookie, para este caso he elegido cookieConsent como clave. Si la clave esta disponible en la cookie ejecutaremos la función pageview.

if (!$.cookie('cookieConsent')) {

}else {
    pageview();
}

En caso contrario abrimos la notificación al usuario con Noty:

var notification = noty({
    text: '<b>Utilizo cookies de terceros para mejorar mi blog. Si continúas navegando, considero que aceptas su uso.</b><br>Siempre podrás revocar tu consentimiento, borrando las cookies de tu navegador.'
});

Enlazamos ScrollMagic a un elemento de alto nivel de la pagina (preferiblemente el contenido) y le agregamos un ScrollScene para gestionar el scroll de la pagina.

controller = new ScrollMagic({
    container: '.screen-content'
});
scene = new ScrollScene().addTo(controller);

Y para finalizar, configuramos el callback para el evento update donde,

  • Comprobamos la posición del scroll en la pagina (event.scrollPos)
  • Creamos la clave cookieConsent en la cookie
  • Cerramos la notificación y eliminamos elScrollScene
  • y ejecutamos la funcion pageview
scene.on('update', function(event) {
  if (event.scrollPos > 72) {
    $.cookie('cookieConsent', true, {
      expires: 365,
      path: '/'
    });
    notification.close();
    scene.remove();
    pageview();
  }
});

Nuestro cookie consent esta terminado solo queda agregarlo al theme. Para el ello agregamos a mtheme.js para que quede enlazado y agregamos el código de seguimiento de google en el fichero default.hbs en el <head> de la pagina.

Aquí os dejo el código completo https://github.com/makensi/mtheme-build/blob/master/assets/src/scripts/mtheme/helpers/cookie.js