Mostrando entradas con la etiqueta url-rewrite. Mostrar todas las entradas
Mostrando entradas con la etiqueta url-rewrite. Mostrar todas las entradas

sábado, 15 de junio de 2013

Insertar en multiples webs el aviso legal del uso de cookies

Enunciado

Alojas en uno mas servidores sitios web que utilizan Google Analytics (GA) para el seguimiento de visitas.
Dado que GA utiliza cookies para el seguimiento del usuario, estas obligado por el artículo 4 del Real Decreto Ley 13/2012 a visualizar una advertencia del uso estas cookies y permitir su eliminación.
Pero:
  • Son varios sitios web.
  • Algunos no los has desarrollado tú, ni llevas su mantenimiento.
  • Utilizan distintas técnicas de servidor para llamar al código GA.
¿Cómo visualizas el panel con mínimo esfuerzo y perjuicio de los sitios?
Contexto
IIS 7.5 c/ URL-Rewrite module 2.0 instalado.

Prefacio sobre la ley

Antes de presentar mi solución quiero comentar los aspectos legales de este panel. No soy abogado y puedo equivocarme muy facilmente, si tienes dudas asegúrate con expertos.

Sobre la obligatoriedad de visualizar el panel citado existen diversas opiniones,incluso mucha gente opina que no es obligatorio. Al fin y al cabo estas cookies no almacenan información personal.

Pero si consultas la Guia sobre el uso de las cookies que ha publicado la Agencia Española de Protección de Datos en la página 8, en el tipo de Cookie de Análisis (que son la de Google) leeras:

Cookies de análisis: Son aquéllas que permiten al responsable de las mismas, el seguimiento y análisis del comportamiento de los usuarios de los sitios web a los que están vinculadas. La información recogida mediante este tipo de cookies se utiliza en la medición de la actividad de los sitios web, aplicación o plataforma y para la elaboración de perfiles de navegación de los usuarios de dichos sitios, aplicaciones y plataformas, con el fin de introducir mejoras en función del análisis de los datos de uso que hacen los usuarios del servicio.
Respecto al tratamiento de datos recabados a través de las cookies de análisis, el grupo de trabajo del articulo 29 ha manifestado que, a pesar de que no están exentas del deber de obtener un consentimiento informado para su uso, es poco probable que representen un riesgo para la privacidad de los usuarios siempre que se trate de cookies de primera parte, que traten datos agregados con una finalidad estrictamente estadística, que se facilite información sobre sus uso y se incluya la posibilidad de que los usuarios manifiesten su negativa sobre su utilización

Yo interpreto de este texto que es obligatorio un panel que informe del uso de cookies y permita desactivarlas. Otra cosa es que el número de sitios que violen la legalidad sea tan grande y el delito tan pequeño que la mayoría se libren de la sanción.

Otro tema a discutir es el contenido, permanencia y flujo del panel.

En mi caso visualizo el panel al principio de cada sesión, informo y doy la oportunidad de desactivar las cookies. Si pasan a otra página el panel ya no aparece. En cualquier caso el panel les informa de que pueden volver a activar o desactivar las cookies accediendo a la política de privacidad del sitio.

Dos sitios para leer sobre este tema son: Analítica Web o LetsLaw

Solución técnica

Resumiendo lo que vamos a hacer:
La primera vez que un usuario acceda a alguna página de alguno de nuestros sitios web aparecerá en la parte superior un panel informativo que:
  • Informará del uso de cookies analíticas que respentan la privacidad.
  • Permitirá deshabilitar estas cookies.
Por ejemplo:
Uso de cookies: Según la legislación española tiene la posibilidad de desactivar las cookies analíticas. Usamos estas cookies para mejorar nuestros servicios, respetando su privacidad y sin almacenar datos personales. Para recuperar este panel acceda a la política de privacidad del sitio.

Este panel se visualizará solo al visualizar la primera página. El efecto de deshabilitar las cookies será borrarlas  inmediatamente y luego cada vez que se cargue una página del sitio. El borrado será selectivo, respetando las cookies técnicas.

Lo importante de nuestra solución es que no modificaremos ninguna página directamente,  usaremos el modulo url-Rewrite de IIS7.5  para  inyectar en la página código JavaScript almacenado en un punto común.

Es una solución similar pero independiente a la que mostré en un post anterior Insertar código de seguimiento Google Analytics sin editar todas las páginas, ambas soluciones son compatibles pero no se requieren.

Veamos primero la regla de salida (outbound-rule) del modulo url-rewrite tal como se almacena en el Web.config de cada sitio:

   
       
            
            
      
    
    
        
             
             
        
        

La regla busca la etiqueta </head> y le antepone el siguiente código:
<link href="http://www.miHost.es/LSSI/CookiesPolicy.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript">
<script src="http://www.miHost.es/LSSI/jquery.cookies.2.2.0.min.js" type="text/javascript">
<script src="http://www.miHost.es/LSSI/CookiesPolicy.js" type="text/javascript">

Dado que la etiqueta </head> aparece frecuentemente en código java generado por ASP.net, la regla utiliza una pre-condición (a continuación de la definición) para que se aplique solo al contenido HTML. Esto se consigue con dos requisitos:
  • Exigiendo que el REQUEST-CONTENT-TYPE sea text/html
  • Evitando cargar archivos en cuyo nombre (REQUEST-FILE-NAME) aparezca la extensión .ashx
Según tu entorno es posible que tengas que añadir mas pre-condiciones, vigila la consola de java por si salen errores.

La página reescrita cargará los siguientes archivos externos:
  • Un hoja de estilo que se aplicará al panel.
  • La librería jQuery
  • La librería de gestión de cookies disponible aquí.
  • Una librería en javaScript que constituye el núcleo de la solución que os presento mas abajo.
Antes de continuar observa que:
  • La libreria jQuery se carga del repositorio CDN
  • El CSS y las otras dos librerías se cargan de un sitio central  http://www.miHost.es/LSSI que unifica el mantenimiento.
Ese sitio central debe ser tuyo y deberás editar esta parte de la regla para señala al sitio donde almacenas las librerías.

Vamos a ver la librería nuclear:  "cookiesPolicy.js"
$(document).ready(function () {
    if ($.cookies.test() ) { /*si el navegaro no hacepta cookies para que molestarse*/
        var flagCookies = $.cookies.get("banderaCookies");
        if (flagCookies == null) {  /*hay que mostrar el panel */
            $.cookies.set("banderaCookies", "SI");
            genAvisoCookies();
        } else { /*Borramos las cookies que se han creado hasta el momento */
            if ($.cookies.get("banderaCookies") == "NO") {
                borraCookies();
            }
        }
    }; 
});
function borraCookies() {
    /*Borra las cookies de Google y una mia*/
    var dominio = '.' + /\w*\.\w*$/.exec(window.location.host)[0];
    $.cookies.del("__utma", { path: '/', domain: dominio });
    $.cookies.del("__utmb", { path: '/', domain: dominio });
    $.cookies.del("__utmc", { path: '/', domain: dominio });
    $.cookies.del("__utmz", { path: '/', domain: dominio });
    $.cookies.del("__utmv", { path: '/', domain: dominio });
    $.cookies.del("idCart", { path: '/', domain: null });
}
function genAvisoCookies() 
/*Añade un div centrado justo despues de la etiqueta body*/
{
    $("body").prepend("
" + textoCookies() + "
"); $("#desactivarCookies").click(function (e) { $.cookies.set("banderaCookies", "NO"); borraCookies(); window.location.reload(false); }) } function textoCookies() /*implantación de bi-idioma para el panel */ /*Se considera tanto el idioma del navegador como la posibilidad de un parametro lang en el query string*/ { var lang = navigator.language || navigator.userLanguage var param = QueryString("lang"); var texto if ((param=="en-GB") || ((param==null) && !(/es/.test(lang)))) { texto = "Cookies usage:"; texto += " According to Spanish law you have the option of"; texto += " disable analytical cookies." texto += " We use these cookies to improve our services, respecting your privacy and without storing personal data."; texto += " Access the privacy policy to recover this panel."; } else { texto = "Uso de cookies: "; texto += "Según la legislación española tiene la posibilidad de"; texto += " desactivar las cookies analíticas."; texto += " Usamos estas cookies para mejorar nuestros servicios, respetando su privacidad y sin almacenar datos personales."; texto += " Para recuperar este panel acceda a la política de privacidad del sitio."; } return texto } function QueryString(sParam) { /*Funcion de utilidad para extraer el query string*/ var sPageURL = window.location.search.substring(1); var sURLVariables = sPageURL.split("&"); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split("="); if (sParameterName[0] == sParam) { return sParameterName[1]; }; } } /*Las funciones siguientes se utilizan en enlaces del documento de politica de privacidad Para volver a activar las cookies o desactivarlas independientemente del panel*/ function activaCookies() { $.cookies.set("banderaCookies", "SI"); if (!$('#centradoAC').length) { genAvisoCookies(); } goToByScroll(); } function desactivarCookies() { $.cookies.set("banderaCookies", "NO"); borraCookies(); if (!$('#centradoAC').length) { genAvisoCookies(); } goToByScroll(); } function goToByScroll() { /*efecto de animación para ir a la parte superior donde se visualiza el panel*/ $('html,body').animate({ scrollTop: $('#centradoAC').offset().top }, 'slow'); }
Antes de explicar esto te advierto una cosa, no soy un experto en javaScript ni jQuery, consigo que mi código funcione pero puede optimizarse, ... y explicarse mejor. Comencemos:

Vemos que al principio...
$(document).ready(function () {
    if ($.cookies.test() ) { /*si el navegaro no hacepta cookies para que molestarse*/
        var flagCookies = $.cookies.get("banderaCookies");
        if (flagCookies == null) {  /*hay que mostrar el panel */
            $.cookies.set("banderaCookies", "SI");
            genAvisoCookies();
        } else { /*Borramos las cookies que se han creado hasta el momento */
            if ($.cookies.get("banderaCookies") == "NO") {
                borraCookies();
            }
        }
    }; 
});
... estamos enlazando el evento documento cargado (jquery document ready) a una función que según convenga puede hacer tres cosas:
  • Nada (si el navegador no soporta cookies, ¿para que molestarse?)
  • Visualizar el panel requerido por la ley (si es la primera vez en esta sesión que accede al sitio)
  • Borra las cookies (si durante esta sesión el usuario ha dicho que no quiere cookies de análisis)
Usamos una cookie de sesion "banderaCookies" que puede valer null, 'SI', 'NO'

La siguiente parte del código...
function borraCookies() {
    /*Borra las cookies de Google y una mia*/
    var dominio = '.' + /\w*\.\w*$/.exec(window.location.host)[0];
    $.cookies.del("__utma", { path: '/', domain: dominio });
    $.cookies.del("__utmb", { path: '/', domain: dominio });
    $.cookies.del("__utmc", { path: '/', domain: dominio });
    $.cookies.del("__utmz", { path: '/', domain: dominio });
    $.cookies.del("__utmv", { path: '/', domain: dominio });
    $.cookies.del("idCart", { path: '/', domain: null });
}
...corresponde al borrado de las cookies. En este código borramos las cookies de Google y una propia insertada desde código.
Si tus desarrolladores usan otras cookies deberas incluirlas aquí (cuidado con el dominio y el path, puede darte problemas).

A continuación tenemos la función se ocupa de insertar el panel:
function genAvisoCookies() 
/*Añade un div centrado justo despues de la etiqueta body*/
{
    $("body").prepend("
" + textoCookies() + "
"); $("#desactivarCookies").click(function (e) { $.cookies.set("banderaCookies", "NO"); borraCookies(); window.location.reload(false); }) }
Vemos que tiene dos partes:
  1. Insertar unos marcos (<div>) con el texto del panel
  2. Enlazar una función a un elemento #desactivarCookies que veremos mas adelante
Para el centrado y maquetado del texto se hace referencia a estilos CSS definidas en el archivo: CookiesPolicy.css.
En mi caso bastaron estos:
#centradoAC {width:100%;text-align:center;}
#marcoAC
{
    background-color: white;
    text-align: left;
    width: 920px;
    margin: 0 auto;
    padding-bottom: 10px;
    font-family: Arial;
    color: #999999;
    font-size: 13px;
    font-weight: lighter;
}
#marcoAC strong {font-weight: bold;}
#marcoAC a:link
{
    color: #999999;
    text-decoration: underline;
    font-weight:normal;
}
#marcoAC a:visited
{
    color: #999999;
    text-decoration: underline;
    font-weight:normal;
}
#marcoAC a:link
{
    text-decoration: underline;
    font-weight:normal;
}
#marcoAC a:visited
{
    color: #999999;
    text-decoration: underline;
    font-weight:normal;
}
#marcoAC a:hover
{
    color: #999999;
    text-decoration: underline;
    font-weight:bold;
}
(Nuevamente, no soy un experto en nada, tampoco en CSS)
Según la variedad y modernidad de tus diseñadores webs es posible que tengas que alterar mas o menos estas clases. ¡Suerte!.
En mi caso basta que el panel se vea así:
Con un ancho de 900px que se adapta bien a diseños no adaptativos (valga la redundancia).
Siguiendo con el código javaScript, tenemos la generación del texto dentro del panel en dos idiomas:

function textoCookies()
/*implantación de bi-idioma para el panel */
/*Se considera tanto el idioma del navegador como la posibilidad de un parametro lang en el query string*/
{
var lang = navigator.language || navigator.userLanguage
var param = QueryString("lang");
var texto
if ((param=="en-GB") || ((param==null) && !(/es/.test(lang)))) {
    texto = "Cookies usage:";
    texto += " According to Spanish law you have the option of";
    texto += " disable analytical cookies."
    texto += " We use these cookies to improve our services, respecting your privacy and without storing personal data.";
    texto += " Access the privacy policy to recover this panel.";
 
}
else {
    texto = "Uso de cookies: ";
    texto += "Según la legislación española tiene la posibilidad de";
    texto += " desactivar las cookies analíticas.";
    texto += " Usamos estas cookies para mejorar nuestros servicios, respetando su privacidad y sin almacenar datos personales.";
    texto += " Para recuperar este panel acceda a la política de privacidad del sitio.";
}
    return texto
}

function QueryString(sParam) {
/*Funcion de utilidad para extraer el query string*/
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split("&");
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split("=");
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        };
    }
}
Aquí puedes tener variantes (la mas sencilla visualizarlo siempre en español). En mi caso el idioma en la mayor parte de webs viene especificado por un parámetro "lang" del query string. Por si este parámetro está ausente incluyo también el idioma del navegador.

Hasta aquí la visualización inicial del panel.  Pero tambien es conveniente que la política de privacidad del sitio incluya a su vez opciones para activar o desactivar las cookies de análisis.
Por ejemplo:
Si lo desea puede:


  1. Desactivar las cookies de análisis.
  2. Activar las cookies de análisis.

Los editores wysiwig de los gestores de contenido permiten insertar normalmente estos enlaces con referencia a las funciones javaScript siguientes.
/*Las funciones siguientes se utilizan en enlaces del documento de politica de privacidad
Para volver a activar las cookies o desactivarlas independientemente del panel*/
function activaCookies() {
    $.cookies.set("banderaCookies", "SI");
    if (!$('#centradoAC').length) {
        genAvisoCookies();
    }
    goToByScroll();
}

function desactivarCookies() {
    $.cookies.set("banderaCookies", "NO");
    borraCookies();
    if (!$('#centradoAC').length) {
        genAvisoCookies();
    }
    goToByScroll();

}

function goToByScroll() {
/*efecto de animación para ir a la parte superior donde se visualiza el panel*/
    $('html,body').animate({ scrollTop: $('#centradoAC').offset().top }, 'slow');
}

Al situar

Curiosidades

Es curioso que en el momento de redactar el sitio web del gobierno  utiliza cookies de análisis de GA pero no visualiza el panel. ¡ En cierta medida el gobierno viola la ley que el mismo aprobó!
Actualización:
No violan la ley, ¡se excluyeron de la ley!. Bueno al menos en los últimos tiempos han incluido el aviso de cookies y hacen lo que todos.

Todo este trabajo se habría simplificado si la ley hubiera excluido claramente este tipo de cookies. Esto es lo que ha hecho el gobierno francés en su transposición de la directiva europea.

Por que todo esto cacao lo provoca  la Directiva 2009/136/CE. que endureció la Directiva 2002/58/CE
¿No tienen otra cosa que hacer nuestros burócratas europeos?  Por ejemplo, resolver la crisis económica de la zona Euro.

lunes, 11 de febrero de 2013

Insertar código de seguimiento Google Analytics sin editar todas las páginas

Problema

Tienes un sitio escrito que a lo largo de los años has rellenado con abundantes páginas HTML, ASP, ASPX,....etc.
Ahora quieres incorporarle el código Javascript para el seguimiento con Google Analytics.
Pero no quieres editar todas las páginas del sitio ni modificar todos los desarrollos.
¿Cómo lo haces?
(El sitio se aloja bajo IIS7.5)

Antes que nada

Esta solución es parecida a la propuesta por Ruslan Yakushev en:

Using Outbound Rules to add Web Analytics tracking code


Pero no es la misma y he añadido algún detalle necesario, al final del post detallo los cambios.

Solución

Primer paso

Copia el código de google analytics y salvalo en un archivo accesible de tu sitio web.
A efectos de este ejemplo supondremos que lo guardamos con el nombre google.js en un directorio /scripts
El código lo puedes copiar y pegar de:
Panel Analytics / tu sitio / administrador / Información de seguimiento

Segundo paso

Utiliza el modulo URL Rewrite y crea una regla de salida (outbound Rule)
Le creas una pre-condición con esta información:
  1. Name: "EsHTML"
  2. Using: "Regular Expressions"

Haz clic en "Add" para que tener el cuadro de dialogo  "Add condition"
En el cuadro de dialogo escribe:

  1. Condition input: "{RESPONSE_CONTENT_TYPE}"
  2. Check if input string: "Matches the pattern"
  3. Pattern: "^text/html"

Ahora debes 
  1. El matching scope : Content
  2. The content:  matches the Pattern
  3. Pattern:</head>
Marca la casilla ignorar mayúsculas (Ignore case)
La acción debe ser:

  1. Action type: Rewrite
  2. Value: <script src="/scripts/google.js" type="text/javascript"></script></head>

Explicación

Lo que hacemos es localizar el final de los encabezados de página para insertar el código Java que necesita Google Analytics.
Lo hacemos con una simple búsqueda y reemplazo. Solo procesamos los archivos con HTML que es para los que tiene sentido.

Hay dos diferencias con el articulo de Ruslan Yakushev  mencionado más arriba:
  1. Utilizamos una archivo externo. De hecho si intentamos usar el código Java directamente en el valor de reemplazo tendremos problemas porque los simbolos $ utilizados entran en contradicción con la sintaxis de URL rewriter.
  2. Reemplazamos </head> en lugar </body>. Es mas acorde con las recomendaciones de Google Analytics.

miércoles, 1 de junio de 2011

Error al cargar el marco de trabajo de cliente ASP.NET AJAX y url-Rewrite

Sintoma:
No puedes cargar el modulo de trabajo de ASP.NET AJAX en los clientes.
Ocurre en las páginas que usan ToolScriptManager en lugar del Script manager.
El problema aparece al publicar en el servidor de producción.
Solución
En mi caso:
El servidor de producción utilizaba el modulo url-rewrite module 2.0 y tenía una regla de salida en el raíz sin precondiciones.
Ha bastado con añadirle una precondición del tipo RESPONSE_CONTENT_TYPE text/html para que todo funcione. El problema por lo visto no esta tanto por lo que hace la regla como por la ausencia de precondición.