Actualización del 20/11/2017: En el código mostraba en esta entrada había un error de razonamiento por el orden de carga. Hablaba de ejecutar la acción wp_footer sólo si no estaba en la administración o no era una previsualización de página.
El problema es que si no se pone la condición dentro de la propia función, antes de ejecutar la acción aún no se sabe en que página se está y no se pueden evaluar las condiciones que queremos, provocando un Notice en el log de PHP y además ejecutando siempre dicha función.
Ya he actualizado el código mostrado al correcto, además he cambiado la condición is_admin por is_admin_bar_showing para no ejecutar el código aunque estemos viendo una página si estamos autenticados y mostrando la barra de administración y se ha añadido una prioridad de 100 a la acción para mostrarlo lo más abajo posible.
Además en el log he visto algunos notices del plugin Crayon Syntax Highlighter que se arreglan modificando dos líneas como se indica aquí.
Como todos sabéis desde hace tiempo, cualquiera que tenga una web y que guarde alguna cookie en el navegador (vamos que casi te diría que el 100% de las webs), está obligado a informar a sus usuarios (* Real Decreto-ley 13/2012) de que estamos guardando esas cookies ya sea para el seguimiento de estadísticas, «recordar» que ha aceptado nuestras cookies, guardar los productos de sus carrito en el WooCommerce, etc.
Para «cumplir» con dicha política hay multitud de plugins en el repositorio de WordPress, pero como una de las funciones de esta web es experimentar, me decidí a probar algo más optimizado.
El problema
El problema con el que me encuentro es que en muchas webs he visto que el propio javascript y/o css del plugin para cookies bloqueaba y en cierta manera ralentizaba la página.
En ocasiones se carga un nuevo archivo javascript y otro css para cumplir con este requisito, que lo más fácil sería que los navegadores lo hiciesen por defecto, ¿no? y no delegar en los autores de cada web.
La solución
He encontrado algún código por ahí como el de esta web que aunque a primera vista parecería oficial, con una rápida consulta al Whois de la ICANN vemos que es de un particular.
Bien, vamos allá, el código me ha servido como base. Comienzo eliminando el div info ya que no lo veo necesario al tener ya otro div.
A continuación un cambio en el id del div principal, adecuación del texto a lo que necesito y adaptación del CSS a mis necesidades.
Pequeñas modificaciones al javascript, cambio del nombre de la cookie a cl_politica_cookies_ok.
Ponemos todo el código en una función para llamarlo en el action hook wp_footer.
Como funciona
Lo primero que he decido es que sea independiente, poner el javascript, html y css en la propia página, sin depender de archivos externos ya que apenas son 40 líneas.
HTML muy sencillo con un solo div para la barra y dentro los dos enlaces de aceptar y más información.
CSS muy sencillo para posicionar la barra, darle color y estilo a los dos enlaces.
Vanilla Javascript sin depender de jQuery u otras librerías.
Vamos allá. Inicialmente la barra de cookies está oculta mediante CSS, al cargarse la página se comprueba si existe cl_politica_cookies_ok y si su valor es distinto de 1.
Si no existe la cookie es porque el usuario aún no ha aceptado nuestra política de cookies o si su valor es distinto de 1 (que no tendría por que serlo).
En este caso cambiamos la visibilidad de la barra a style.display = «block» y fijamos un timer de 30 segundos window.setTimeout( PonerCookieCL, 30000 );
Si el usuario pulsa en aceptar la política de cookies o pasan los 30 segundos que hemos fijado se ejecuta la función PonerCookieCL();
La función PonerCookieCL(); guarda en el navegador del usuario la cookie por 365 días y oculta la barra, nada más, así de sencillo.
Consideraciones a tener en cuenta
Se podrían parametrizar un poco las funciones, pero como es un código muy sencillo es sumamente fácil cambiar cualquier cosa.
En el CSS de #cookie_bar_cl definimos la posición de la barra, color, fuente, etc.
En el CSS de #cookie_bar_cl .ok definimos el estilo del enlace de aceptar.
En el CSS de #cookie_bar_cl .info definimos el estilo del enlace de más información.
En el HTML <div id=»cookie_bar_cl»> definimos el texto de nuestra barra de cookies.
En el javascript podemos modificar el nombre que queremos darle a nuestra cookie, el tiempo de vida de la misma setCookieCL( «cl_politica_cookies_ok», «1», 365 ); , el tiempo que que se aceptará sin que realicemos ninguna acción window.setTimeout( PonerCookieCL, 30000 ); o eliminar esta línea si no queremos que se autoacepte.
Inicialmente dentro la función de PHP encargada de escribir este código a pantalla tenía la condición if ( ! is_admin() && ! is_preview() ) { // Si no estamos en admin ni es preview de página. que comprobaba que no este visible el panel de administración (no que seamos administradores como parece indicar su nombre) ni que fuese una previsualización de página, pero se ejecutaba la función siempre en el action wp_footer (he decidido poner el código al pie de página) y después si se daba alguna de las condiciones no hacía nada.
* Ver Nota Inicial. Ahora lo he cambiado a poner la condición en torno al add_action que solo se ejecutará en caso de cumplirse la condición.
Además en esa misma acción es donde incluyo el código de Google Analytics (con el nuevo código que propone Google en el panel con gtag.js), ya que me gusta incluirlo en mi mu-plugin personalizado.
Para escapar todo el HTML, CSS y Javascript de la función PHP he utilizado Nowdoc. por lo que hay que tener cuidado de no añadir nada antes de EOD; ni espacios, ni tabulaciones.
El Código
<?php
/**
* Inserta el código de Google Analytics con gtag y barra de cookies.
*
* @return $code;
*
* @since 1.3
*/
function cl_google_analytics_cookies() {
$code = <<<'EOD'
<style>
#cookie_bar_cl {display:none;position:fixed;left:0;right:0;bottom:0;padding:10px;width:100%;text-align:center;min-height:40px;background-color: rgba(33, 117, 155, 0.8);color:#fff;font-family:verdana;font-size:0.8em;line-height:1.6em;border-top:1px solid #464646;z-index:99999;}
#cookie_bar_cl .ok {padding:4px;color:#f9ff00;font-weight:900;text-decoration:none;}
#cookie_bar_cl .info {padding-left:5px;text-decoration:none;color:#fff;}
</style>
<div id="cookie_bar_cl">
Solicito tu permiso para obtener datos estadísticos de navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúas navegando considero que te quieres comer nuestras galletitas (cookies). <a href="javascript:void(0);" class="ok" onclick="PonerCookieCL();">De acuerdo</a> | <a href="/politica-de-privacidad" class="info">Más información</a>
</div>
<script>
function getCookieCL( c_name ) {
var c_value = document.cookie;
var c_start = c_value.indexOf( " " + c_name + "=" );
if ( c_start == -1 ) {
c_start = c_value.indexOf( c_name + "=" );
}
if ( c_start == -1 ) {
c_value = null;
} else {
c_start = c_value.indexOf( "=", c_start ) + 1;
var c_end = c_value.indexOf( ";", c_start );
if ( c_end == -1 ) {
c_end = c_value.length;
}
c_value = unescape( c_value.substring( c_start, c_end ) );
}
return c_value;
}
function setCookieCL( c_name, value, exdays ) {
var exdate = new Date();
exdate.setDate( exdate.getDate() + exdays );
var c_value = escape( value ) + ( ( exdays == null ) ? "" : "; expires = " + exdate.toUTCString() );
document.cookie = c_name + "=" + c_value;
}
function PonerCookieCL() {
setCookieCL( "cl_politica_cookies_ok", "1", 365 );
document.getElementById( "cookie_bar_cl" ).style.display = "none";
}
if( getCookieCL( "cl_politica_cookies_ok" ) != "1" ) {
document.getElementById( "cookie_bar_cl" ).style.display = "block";
window.setTimeout( PonerCookieCL, 30000 );
} else {
document.getElementById( "cookie_bar_cl" ).style.display = "none";
}
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11111111-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-11111111-1');
</script>
EOD;
if ( ! is_admin_bar_showing() && ! is_preview() ) { // Si no estamos en admin ni es preview de página.
echo $code;
}
}
add_action( 'wp_footer', 'cl_google_analytics_cookies', 100 ); // Añadimos el código de Google Analytics Universal y barra de Cookies.Conclusiones
Cualquier milisegundo que le ganéis a la generación de vuestra página será beneficioso para futuras optimizaciones y búsqueda de errores.
Si algo se puede hacer fácilmente con unas líneas de código y tenéis la suficiente maña para hacerlo, adelante, bajo vuestra propia responsabilidad, aunque yo creo que podría ser beneficioso.
Si no sabéis que es eso de PHP, javascript, donde poner este código o de que hablo aquí, ni lo intentéis, usad un plugin.
Queréis usar un plugin pero no sabéis cual, yo os recomiendo Machete de Nilo Vélez, que está muy bien optimizado y además os ofrece muchas otras de optimización de vuestro WordPress como eliminar etiquetas de la cabecera que no son necesarias, etc., ayudándoos en el WPO de vuestras instalaciones, si queréis usar un plugin para mejorar el WPO pero sin tener que elegir cosas, marcar opciones, etc., es decir, lo instalo y nada más a mejorar velocidad en las puntuaciones WPO, entonces el vuestro es WPO Tweaks de Fernando Tellado.
P.D.: en todas mis personalizaciones, plugins, etc., utilizo CL (de Carlos Longarela) para evitar colisiones en los nombre de funciones con otros plugins, evidentemente puedes cambiarlo a lo que quieras si lo utilizas.
* Por último, se modifican varios artículos de la Ley 34/2002, de 11 de julio, de servicios de la sociedad de la información y del comercio electrónico, a fin de adecuar su régimen a la nueva redacción dada, por la Directiva 2009/136/CE, a la Directiva 2002/58/CE, del Parlamento Europeo y del Consejo, de 12 de julio de 2002, relativa al tratamiento de los datos personales y a la protección de la intimidad en el sector de las comunicaciones electrónicas, debiéndose destacar la nueva redacción que se da a su artículo 22.2, para exigir el consentimiento del usuario sobre los archivos o programas informáticos (como las llamadas «cookies») que almacenan información en el equipo de usuario y permiten que se acceda a ésta; dispositivos que pueden facilitar la navegación por la red pero con cuyo uso pueden desvelarse aspectos de la esfera privada de los usuarios, por lo que es importante que los usuarios estén adecuadamente informados y dispongan de mecanismos que les permitan preservar su privacidad.
Amigo. Simplemente eres el «fucking amo»!!!
No tienes idea de las horas (literal) que estuve buscando una solución tan; simple, práctica y eficiente como esta!!!
No suelo dejar muchos comentarios pero aquí, sinceramente… ¡Valía la pena!
Muchas gracias.
Hola, Francisco, me alegro de que te haya podido servir de ayuda el código.
Saludos.
Una pequeña «disgreción»:
Resulta que yo, en mi sitio, tengo instalada la versión lite de Google Analityc (ga lite).
Ergo. Si dejo el código como lo tienes tú (ga tag) NO me funciona.
Bueno, en rigor de verdad, lo que hace es; 1) Muestra la barra de cookie peeero… 2) Carga el código de Analityc SIEMPRE (Le diga que «De Acuerdo» o NO le diga Nada).
Si hago lo «lógico», es decir que, modifico el código (cambiando todo lo que dice gtag por galite) directamente NO carga Google Analityc y, por lo tanto, no tengo fucking idea de si entra alguien a mi sitio (O no).
Ergo. Lo que hice – por ahora – es usar un término «intermedio» (glite). De forma tal de que, la «excusa legal» sea algo más o menos así…
…«Bueno. Yo les ofrezco la posibilidad de estar De Acuerdo o ver Más Información»…
Y en caso de que revisen mi código (o me obliguen a mostrarlo) diré que…«yo de código no entiendo nada»… (Lo cual es verdad, je:).
Dicho esto. Me podrías informar si, tienes alguna solución para esto?
Esto es que, NO cargue mi «verdadero» código de Analityc (galite) hasta tanto no le den a «De Acuerdo» y/o naveguen un cierto tiempo en mi sitio.
Desde ya, muchas gracias.
Saludos.
Hola de nuevo, Francisco. Desde luego que se podría modificar dicho código para cargar otra versión diferente del script, pero eso ya sería un desarrollo a medida.
Este script es de hace cuatro años, yo actualmente estoy utilizando otras opciones, como la carga de Analytics desde Rank Math SEO Pro sin cookies.
Saludos.