En mi caso, cuando una visita llega a la web, compruebo si existe una cookie que se llama acceptlgpd con algún valor.
Si se pulsa en «aceptar», se escribe la cookie acceptlgpd con el valor SI y entonces es cuando se mandan datos a Google Analytics; por contra, si se pulsa en «cancelar», se escribe la cookie con valor NO durante 6 meses para indicar que no quiere que se cargue Google Analytics.
En caso de pulsar en «recordar en otro momento», lo único que ocurre es que se oculta la capa en la página en la que estamos.
Vamos a ver como se hace esto…
Configuración en Google Tag Manager
- variables -> cookie de origen (establecemos el nombre de nuestra cookie acceptlgpd)
- activadores -> click todos los elementos : aceptar cookies (click classes contiene grt-cookie-button / no contiene recordar, ni cancelar) [REF: GA-GU]
- activadores -> evento personalizado: leer cookie UE (acceptlgpd= si) [REF: GA-GU]
- activadores -> evento personalizado: no existe cookie (acceptlgpd != si) [REF: GA-GU]
- activadores -> página vista: todas las páginas (acceptlgpd = si / acceptlgpd != no) [REF: GA-GU]
- etiquetas -> Google Analytics: configuración de GA4 (CODIGO QUE NOS PROPORCIONA GA ) GA-GU
<script>
function readCookie(name){
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0){
offset = document.cookie.indexOf(search);
if (offset != -1){
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
function writeCookie(name, value, hours){
var expire="";
if(hours != null){
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire +";secure";
}
function aceptar(){
var d1 = new Date();
var days1 = 365; // 1 año
d1.setTime(d1.getTime() + days1 * 24 * 60 * 60 * 1000);
var expiredate = "expires=" + d1.toUTCString();
document.cookie = "acceptlgpd=si;" + expiredate + ";path=/;secure";
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
function recordar(){
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
function cancelar(){
window["ga-disable-GA-XXXXXXX"] = true;
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
var d1 = new Date();
var days1 = 60; // 2 meses
d1.setTime(d1.getTime() + days1 * 24 * 60 * 60 * 1000);
var expiredate = "expires=" + d1.toUTCString();
document.cookie = "acceptlgpd=no;" + expiredate + ";path=/;secure";
}
if (!(document.cookie.indexOf("acceptlgpd") > -1)) {
if( (readCookie("acceptlgpd").length == 0) || (readCookie("acceptlgpd") == null) ){
console.log("no existe, se muestra mensaje");
document.querySelector(".grt-cookie").classList.add("grt-cookie-active");
}
}
else {
if (readCookie("acceptlgpd") == "no") {
console.log("Recordar cookies canceladas");
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
if (readCookie("acceptlgpd") == "si") {
console.log("Cookies aceptadas");
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
}
</script>
Lo sé, se lee fatal, pero (ahora mismo, me da igual); si te sabes manejar, sabes que esto no es ningún problema, de hecho será el mínimo de los problemas 😀
¿Y si tengo WordPress?
Pues te creas un plugin o lo pones en functions.php de tu tema hijo.
<?php
/*
Plugin Name: estravagancia
Description: Específico para el sitio estoes.estravagancia.com
*/
function poner_aviso(){
if(!is_user_logged_in())
echo '<div class="grt-cookie grt-cookie-active"><div class="grt-cookies-msg"><p>Utilizo cookies para obtener datos anónimos de tu experiencia en mi sitio web. Si aceptas se cargarán las cookies de google ( en concreto una que se llama: _ga ) y podré tener un perfil ANÓNIMO de tu navegación; eso me permitirá ver: donde meto la pata, que puedo corregir, y si en algún caso llego a entender todas las posibilidades que me ofrece la herramienta, y con tiempo, podría hacer una experiencia megasuperpersonalizada basada en estadísticas :D . Bueno, no me enrollo más, asumo que aceptas y entiendes la <a href="/politica-de-privacidad/"> política de privacidad</a> y <a href="/cookies/">cookies</a>.</p>
<span class="grt-cookie-button" onClick="aceptar()">Aceptar</span>
<span class="grt-cookie-button cancelar" onClick="cancelar()">Cancelar</span>
<span class="grt-cookie-button recordar" onClick="recordar()">Recordar en otro momento</span>
</div>
</div>
<script>
function readCookie(name){
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0){
offset = document.cookie.indexOf(search);
if (offset != -1){
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
function writeCookie(name, value, hours){
var expire="";
if(hours != null){
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire +";secure";
}
function aceptar(){
var d1 = new Date();
var days1 = 365; // 1 año
d1.setTime(d1.getTime() + days1 * 24 * 60 * 60 * 1000);
var expiredate = "expires=" + d1.toUTCString();
document.cookie = "acceptlgpd=si;" + expiredate + ";path=/;secure";
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
function recordar(){
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
function cancelar(){
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
var d1 = new Date();
var days1 = 60; // 2 meses
d1.setTime(d1.getTime() + days1 * 24 * 60 * 60 * 1000);
var expiredate = "expires=" + d1.toUTCString();
document.cookie = "acceptlgpd=no;" + expiredate + ";path=/;secure";
}
if (!(document.cookie.indexOf("acceptlgpd") > -1)) {
if( (readCookie("acceptlgpd").length == 0) || (readCookie("acceptlgpd") == null) ){
console.log("no existe, se muestra mensaje");
document.querySelector(".grt-cookie").classList.add("grt-cookie-active");
}
}
else {
if (readCookie("acceptlgpd") == "no") {
console.log("Recordar cookies canceladas");
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
if (readCookie("acceptlgpd") == "si") {
console.log("Cookies aceptadas");
document.querySelector(".grt-cookie").classList.remove("grt-cookie-active");
}
}
</script>
';
}
add_action('wp_footer','poner_aviso',100);