Barra para aviso de cookies que graba una cookie | Oloblogger Lo de poner un aviso para general conocimiento sobre que en el sitio de uno se usan cookies , es algo que tenía en la cabeza desde hace much...

22 de enero de 2015

Barra para aviso de cookies que graba una cookie

Lo de poner un aviso para general conocimiento sobre que en el sitio de uno se usan cookies, es algo que tenía en la cabeza desde hace mucho tiempo, más o menos desde que salieron una serie de leyes y directivas que afectaban a todas las webs cuyos administradores residen en España o incluso -decían- a todas las webs que se pudieran visualizar en España.

Hay algún que otro debate sobre la interpretación de estas normas en cuanto a si hay que avisar de que se van a instalar cookies ANTES de que se instale ninguna (cosa harto difícil en muchos casos), que si el consentimiento tiene que ser expreso (no tácito: "si continúa entenderemos que sí acepta"), que sólo afecta a las webs comerciales pero que el simple hecho de tener publicidad ya supone que se obtiene un beneficio, etc. etc. etc.

Pero llegó el día en que ni tengo tiempo de estar comprobando bien todas esas disposiciones legales, ni las iba a entender del todo, ni tampoco quiero calentarme más la cabeza, así que como es una cosa muy fácil de solucionar se pone el dichoso aviso y listo. Hace unas pocas semanas que lo hice y un peligro menos.

Cookies: Ese terrible monstruo
Imagen: yahyanikrushdi

Lo que es la barra con el aviso y un enlace al lugar dónde se explica bien el tema de las cookies (al parecer otro requisito) es muy fácil de hacer, pues con un div y un position:fixed ya lo tenemos prácticamente hecho.

Pero ¿que tal si no somos cansinos y en lugar de estar mostrando tooooodos los días el aviso en toooodas las páginas, lo hacemos sólo una vez con cada usuario distinto?

Bueno, realmente será con cada ordenador distinto porque, de momento, las cookies no hilan tan fino como para saber quién está sentado al teclado. Todo se andará (que se lo pregunten a Google o a Facebook), pero de momento va a ser que no.

Pues eso, que para que a cada usuario sólo le salga una vez el aviso, le vamos a grabar precisamente una cookie para que quede constancia de que ya lo vio y no darle más el tostón en el futuro. El sistema de gestión de cookies será precisamente este que vimos en una ocasión anterior y que ya expliqué con más detalle en su momento.

Hay otros servicios que se pueden encontrar por la Red y que nos proporcionan algo parecido, pero la ventaja es que este código funciona de manera autónoma y no tenemos que depender de nadie. Lo presento listo para copiar y pegar en un gadget tipo HTML/JavaScript. Luego lo comento un poco.

<div id="barracookies">
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
<br/>
Si continúa navegando consideramos que acepta su uso. <a href="javascript:void(0);" onclick="var expiration = new Date(); expiration.setTime(expiration.getTime() + (60000*60*24*365)); setCookie('avisocookies','1',expiration,'/');document.getElementById('barracookies').style.display='none';"><b>OK</b></a> <a href="http://www.google.com/intl/es-419/policies/technologies/types/" target="_blank" >Más información</a> | <a href="http://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf" target="_blank" >Y más</a>
</div>
<!-- Estilo barra CSS -->
<style>#barracookies {display: none;z-index: 99999;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;padding:5px;background: #333333;color:#d7c712;line-height:20px;font-family:verdana;font-size:12px;text-align:center;box-sizing:border-box;} #barracookies a:nth-child(2) {padding:4px;background:#4682B4;border-radius:5px;text-decoration:none;} #barracookies a {color: #fff;text-decoration: none;}</style>
<!-- Gestión de cookies-->
<script type='text/javascript'>function setCookie(name,value,expires,path,domain,secure){document.cookie=name+"="+escape(value)+((expires==null)?"":"; expires="+expires.toGMTString())+((path==null)?"":"; path="+path)+((domain==null)?"":"; domain="+domain)+((secure==null)?"":"; secure")}function getCookie(name){var cname=name+"=";var dc=document.cookie;if(dc.length>0){begin=dc.indexOf(cname);if(begin!=-1){begin+=cname.length;end=dc.indexOf(";",begin);if(end==-1)end=dc.length;return unescape(dc.substring(begin,end))}}return null}function delCookie(name,path,domain){if(getCookie(name)){document.cookie=name+"="+((path==null)?"":"; path="+path)+((domain==null)?"":"; domain="+domain)+"; expires=Thu, 01-Jan-70 00:00:01 GMT"}}</script>
<!-- Gestión barra aviso cookies -->
<script type='text/javascript'>
var comprobar = getCookie("avisocookies");
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + (60000*60*24*365));
setCookie("avisocookies","1",expiration);
document.getElementById("barracookies").style.display="block"; }
</script>

Como podéis observar, la primera parte hasta el primer comentario es la parte HTML, la que forma el texto, el botón de OK y los enlaces. Ese texto lo podéis poner como os plazca, así como el destino del enlace. Por cierto que yo he puesto dos genéricos en el ejemplo, pero lo mejor es que el primero vaya a una página específica de vuestro sitio dónde se desarrolle el tema de las cookies. Con ese de hecho creo que es suficiente. El segundo podría apuntar a dónde yo apunté el primero o directamnte suprimirlo.

Después de eso está el estilo de la barra. Evidentemente, cambiando propiedades y valores podéis cambiar ese CSS para que tenga otro aspecto.

El tercer bloque es el JavaScript que gestiona cookies en general y que ya vimos en el pasado. Si por casualidad ya lo tenéis en vuestra plantilla, podéis eliminar ese trozo por ser innecesario ponerlo una segunda vez.

En último lugar se encuentra la pequeña rutina que comprueba cada vez que se carga una página de vuestro sitio, si la cookie ya está grabada (ya se ha estado anteriormente) o no. En este último caso y sólo en este, se muestra la barra con el aviso. Por cierto que esa multiplicación 60000*60*24*365 es para que la cookie dure un año. Pasado ese tiempo volverá a saltar. Podéis ajustar esa cifra como prefiráis.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

58 comentarios :

  1. Me ha sido de gran utilidad el presente post. Ya tengo la barra de cookies en mi web: www.javierfuentesabril.es muchas gracias

    ResponderEliminar
    Respuestas
    1. Pues que tú precisamente no la tuvieras todavía... :)

      Eliminar
  2. Muy bueno. Gracias. Me funcionó de primera. Ahora, mi pregunta es otra: ¿es de aplicación obligatoria? ¿Es más una cuestión 'ética'? No entiendo bien ese punto. ¿Aplica solo para España (soy de Argentina)?

    ResponderEliminar
    Respuestas
    1. En España es obligatoria y lo que no está claro para mí (para otros sí) es si hace falta también para los sitios que se "utilizan" en España... Europa más bien. De todas formas pienso que el aviso es poco invasivo y no está mal en cualquier caso que tengas ese detalle con tus lectores.

      Eliminar
  3. Muchas gracias, ya lo he implementado en mi blog. Funcionando perfectamente y con las espaldas cubiertas, por si un casual. 8-)))

    ResponderEliminar
    Respuestas
    1. Eso último que dices es lo que finalmente me decidió a mí a ponerla

      Eliminar
  4. Jolin, que maravilla que hayas compartido esta entrada, con el cague que me da tocar la plantilla me ha venido de cine , esto de copiar y pegar en un html hasta ahí llego está genial..muchísimas gracias
    Con tu permiso lo voy a compartir

    ResponderEliminar
    Respuestas
    1. Para ese tipo de cosas no hay que pedir permiso Macu ;)

      Eliminar
  5. Mil gracias, llevaba tiempo dándole vueltas y así es facilísimo : )

    ResponderEliminar
  6. muchas gracias esta muy bien ;)

    ResponderEliminar
  7. Puede que sea así Félix, porque Blogger añade ciertas cookies por su cuenta que tú no puedes gestionar. Pero por ejemplo, cuando tú como administrador añades Analytics a tu blog, o cualquier otro gadget que las genere ¿es cosa de Blogger o tuya? Esta es otra de esas cosas que no me queda clara y como reza el dicho: En caso de duda, la más cojonuda ;)

    ResponderEliminar
  8. Alguna vez leí -no recuerdo dónde- que la responsabilidad de poner o no el aviso de las cookies recae sobre el dueño del servidor en el que el blog está alojado y no sobre el dueño del blog. Si eso es cierto, la responsabilidad sería de Google y no nuestra.

    Saludos.

    ResponderEliminar
  9. Google incluye un aviso de cookies en la NavBar, pero la mayoría la desactivamos. Así las cosas ¿quién es el responsable de que no salga?
    No quiero decir que no sea lo que tu dices, sino ejemplificar que existen cosas muy dudosas... por lo que vuelvo al refrán de antes ;)

    ResponderEliminar
  10. Lo acabo de poner en el blog, por la duda mas que nada, asi que gracias ;)

    ResponderEliminar
  11. Muchas gracias por la info de gran utilidad y muy fácil de instalar.
    Mi pregunta es:
    ¿Será necesario poner este código en cada una de las páginas o solo en la de incio?

    ResponderEliminar
    Respuestas
    1. Si lo pones en un gadget sin hacer nada más, te saldrá en todas las páginas y m opinión es que debería salir en todas, pues nunca sabes cual va a ser la primera página que visite un nuevo visitante.
      No debería ser problema porque gracias a la cookie el aviso desaparece cuando el lector pincha en el correspondiente botón.

      Eliminar
  12. Muy buen post te felicito, solo tengo una duda con respecto al script, la cookie generada por el script se graba desde el momento que habres la pagina no es necesacio darle a OK en el mensaje. no se si sera un error o lo codificaste para que funcionara de esa manera.

    ResponderEliminar
    Respuestas
    1. Se activa en ambos casos Ddraig; tanto tras visitar por primera vez la página como tras darle al OK. En este segundo caso además se oculta para la barra para que no moleste. No me pareció que el hecho de pinchar en OK sirviera como aceptación de nada, así que su única utilidad es esconder la barra en la página actual. Total no guardamos en ninguna base de datos el log de quién hizo OK y quién no...

      Eliminar
  13. Hola!
    Gracias por esta valiosa info.
    Te confieso que no soy un friky con HTML, podrias echarme una mano diciendome donde pego este codigo? despues de < head > ?

    Saludos!

    ResponderEliminar
    Respuestas
    1. Todos los días me toca "reñir" a alguien y hoy ese alguien eres tú: ¿Leiste la entrada? Ahí es dónde suelo explicar las cosas:
      "Lo presento listo para copiar y pegar en un gadget tipo HTML/JavaScript."

      Eliminar
  14. Fantástico, como siempre. Gracias.

    ResponderEliminar
  15. Hola. ¿Esto de las cookies es para cualquier página? ¿Se puede poner en el footer de una web, o solo es para blogs?

    ResponderEliminar
    Respuestas
    1. Sí Luis, sirve para cualquier página web, sea blog o sea otra cosa.

      Eliminar
    2. Ok. Lo de "lo presento para copiar en un gadget" me hizo dudar... ¡Gracias!.

      Eliminar
    3. Esto es más bien para usuarios de Blogger y por eso a veces me expreso en su argot, pero si no ves la etiqueta "Blogger" en el post, normalmente es porque el código será válido para cualquier plataforma.

      Eliminar
  16. Hola Oloman, me gustaría implementar tu aviso, pero no consigo incluirlo también en la versión móvil ¿Qué código he de incluir además del anterior?

    ResponderEliminar
    Respuestas
    1. Si usas las plantillas móviles que vienen de serie con Blogger, sólo se verán unos determinados gadgets. Al principio de este post tienes el detalle y alguna información más por si te es de utilidad.
      Lo mejor en mi opinión es usar una plantilla RWD o probar con la opción "Personalizada", pero esta segunda requiere normalmente que tu plantilla incluya algunos ajustes para que se vea bien.

      Eliminar
  17. :-) ... muy buenas.

    En ninguno de mis Blogs No sale el Aviso de Cookies que esta implantando Blogger por defecto. ( ahora mismo en muchos blogs que implantaron código propio, esta saliendo duplicado con el añadido de blogger )

    Se te ocurre que puede ser o si tengo que hacer algo ???

    - Gracias.

    ResponderEliminar
    Respuestas
    1. ... sigo el tema en el nuevo articulo que publicas hoy.

      http://www.oloblogger.com/2015/07/blogger-aviso-cookies-modificar-anular.html

      Gracias.

      Eliminar
  18. Excelente y Muchas Gracias estimado. Saludos

    ResponderEliminar
  19. Hola Oloman, Google ha añadido finalmente el aviso de cookies en todos los blogs, el tuyo incluido, para los que somos profanos seguro que agradecemos que nos expliques este cambio y tal como te incluyo en el enlace como desactivarlo o acomodarlo a nuestro blog. Un saludo.
    https://support.google.com/blogger/answer/6253244?p=eu_cookies_notice&hl=es&rd=1

    ResponderEliminar
  20. Hola me llego un aviso de Google pero la verdad no se nada del tema y lo cerre, ahora no aparece ese aviso que según google pone en mi blogger, que hagoo, estoy preocupada

    ResponderEliminar
  21. hola, puse ese código que enviaste y me sale la pantalla blanca, nada más, quisiera saber si ya tengo el aviso de cookies activado porque seguramente me sancionará si sigo publicando sin esto. gracias!

    ResponderEliminar
  22. hola, puse ese código que enviaste y me sale la pantalla blanca, nada más, quisiera saber si ya tengo el aviso de cookies activado porque seguramente me sancionará si sigo publicando sin esto. gracias!

    ResponderEliminar
  23. Me puedes decir que hago para ponerlo como barra superior.

    ResponderEliminar
  24. Todos los que comentasteis a partir del 28 de Julio 2015, mejor pasaros por esta otra entrada: http://www.oloblogger.com/2015/07/blogger-aviso-cookies-modificar-anular.html.

    Allí está la información sobre el aviso de cookies más actualizada

    ResponderEliminar
  25. Yo tenía un script instalado en mi blog que había reformulado a partir de código hecho por alguien que como tu, nos da una mano para cumplir con la legislación española o europea. Mi blog no tiene ninguna vinculación o atractivos para Europa. Pero Google me mandó un correo algo imperativo, exigiéndome que agregara algo mas sobre cookies que lo que ellos proporcionaban en forma automática. No tuve mas remedio que agregar algo y me dejaron tranquilo. Pero lo que había puesto molestaba mucho. Algo me había quedado mal. Estoy probando tu código y parece que no es tan "invasivo" como el que tenía. Agradezco tu colaboración. Mi blog es para Sudamérica, pero por si acaso ... Muchas gracias.

    ResponderEliminar
    Respuestas
    1. "Por si acaso" no Hjmelgar. Si tu blog se puede ver en Europa (que seguro que sí), entonces está afecto por las leyes de la Unión Europea. Sólo podrías quitar el aviso si de alguna manera bloquearas su visualización por aquí... pero eso no creo que interese a nadie ;)

      Eliminar
  26. ERES EL P. AMO!!
    Muchas gracias. Lo intenté en otras páginas y era un caos, y me estaba volviendo loco con este tema tan absurdo. GRACIAS! :)

    ResponderEliminar
  27. Eres un gran tipo, gente como tú hace crecer el conocimiento para beneficio del bien común, enhorabuena por ser así y GRACIAS

    ResponderEliminar
  28. Muchas gracias Oloman Oloman, copie el 100% el escript suyo. Gracias

    ResponderEliminar
  29. Gracias Oloman ! justo lo que necesitaba .

    ResponderEliminar
  30. Mucho cuidado con esta práctica, ya que es ilegal. El código funciona a la perfección, pero el hecho es que instala la cookie en el navegador del visitante sin su consentimiento. Con este script, en cuanto alguien entra en la web, instantaneamente se le graba la cookie, incluso antes de que pueda leer el aviso y dale a "Aceptar". Esto incumple la ley y es motivo de multa. La cookie no debe ser instalada hasta que el usuario no pulse el botón de "Aceptar". No quiero desmerecer, ni mucho menos, el trabajo y la información aportada en este artículo, que siempre es de agradecer, pero creo que es importante que la gente sepa las posibles consecuencias. También es cierto que nadie se preocupa por ver qué cookies son instaladas en su navegador cuando entra en cualquier web, y mucho menos si se trata de sitios o blogs pequeños, pero ya han habido casos de multas bastante importantes por culpa de las dichosas cookies. Un saludo.

    ResponderEliminar
    Respuestas
    1. Precisamente comentaba al principio del post que había dudas sobre eso, David.
      Seguramente tengas razón, pero con quitar la penúltima línea (setCookie("avisocookies","1",expiration);), creo que se solucionaría el problema. Gracias.

      Eliminar
  31. Es justo lo que buscaba!

    ResponderEliminar
  32. Hola. tengo un problema y seguro que debe ser cosa mía. Al hacer "ok" en el aviso de los cookies desaparece pero al refrescar la página me vuelve a aparecer. Creo que no debería aparecer hasta que no se cierra la sesión o el navegador, ¿no?.
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Jordi. Pues sí, probablemente es cosa de la configuración de tu navegador. Es posible que tengas marcada alguna opción en la que indiques al navegador que no almacene cookies y si es así, es lógico que no guarde en ningún sitio que tú ya diste al OK.

      Lo puedes comprobar accediendo a tu blog desde el ordenador de otra persona y comprobando qué pasa.

      Saludos

      Eliminar
  33. Hola Oloman. Me pasa una cosa muy extraña: cuando cambio la resolución de la pantalla el aviso desaparece, si vuelvo a maximizar me aparece de nuevo. Esto es un problema porque las visitas desde móviles no ven la barra. He revisado el CSS y no veo nada que explique este comportamiento, ¿se te ocurre por qué puede pasar?

    ResponderEliminar
    Respuestas
    1. Hola Lore.

      Por lo que dices, lo más probable es que sí sea cosa del CSS, pero sin saber la dirección de tu blog no puedo ver nada para confirmarlo. Si me la pasas echo un vistazo.

      Eliminar
  34. al fin algo que sirve yo habia intentado con el cookie scrip pero el aviso no saliò nunca ,gracias

    ResponderEliminar
  35. Oye, muchas gracias...
    Una pregunta, ¿Cómo pongo ese anuncio, pero estático?
    Me explico: Quiero poner el aviso, pero que por más veces que el usuario acceda al blog, el aviso siempre aparezca, y con presionar "OK", se quite. Pero al volver a cargar la página, que vuelva a aparecer.
    ¿Como lo hago?

    ResponderEliminar
    Respuestas
    1. Hola Michael.
      Pues como cosa fácil, simplemente cambia el tiempo de expiración de cookie. Este es el que verás expresado como 60000*60*24*365. En lugar de eso pon por ejemplo sólo 1000 (= 1 segundo) y listo.

      Eliminar
  36. Mis felicitaciones Oloman.
    Cosas del destino te vuelvo a encontrar y vuelves a solucionar con este post algo que me traía de cabeza.
    De nuevo gracias.
    Un saludo.
    Cocodrolo

    ResponderEliminar
  37. En primer lugar muchas gracias por facilitar el código. El comportamiento de la barra no es el esperado. La barra carga y si refrescas la página sin haber presionado OK desaparece. Dentro del último else hay que borrar este código:

    var expiration = new Date();
    expiration.setTime(expiration.getTime() + (60000*60*24*365));
    setCookie("avisocookies","1",expiration);

    ResponderEliminar