Estoy intentando hacer un módulo que pueda configurar las cookies del sitio según solicita la ley.
El problema que nunca e trabajado con cookies y no se como activar/desactivar
la cookies. De momento he creado un modal que cuando abre o bien puedes darle a configurar o tiene un botón de aceptar todas. Si le das a configurar te salen tres opciones.
1)Cookies de funcionamiento. Este no se puede desactivar, ya que se necesita para funcionar bien el sitio.
2)Cookies de estadísticas.
Este solo lleva 3 cookies, _ga
, _gat
, _gid
que son de Analytics.
3)Cookies de Marketing. En este caso no tengo ningúna.
El modal está así:
<div class="modal fade modalCook" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content posiModalCoo">
<img src="{{ asset('images/logo/logo.svg') }}" class="logoCookies">
<div class="modalCookies">
<img src="{{ asset('images/slider/humoStaticoBlanco.png') }}" alt="High As" class="humoEstaModal">
<div class="indexModal">
<div id="principal">
<div class="center">
<h1>Configuración de cookies</h1>
<p>Las cookies son importantes para ti, influyen en tu experiencia de navegación. Usamos cookies analíticas, de personalización y publicitarias (propias y de terceros) para hacer perfiles basados en hábitos de navegación y mostrarte contenido personalizado. Puedes consultar nuestra <a href="{{ route('app.cookies') }}">Política de cookies</a>. Al hacer click en "Aceptar", consientes que todas las cookies se guarden en tu dispositivo o puedes configurarlas o rechazar su uso pulsando en "Configurar".</p>
</div>
<div class="center posBtnCookies">
<a class="btnModalCookie" id="configurar">Configurar</a>
<a href="" class="btnModalCookie aceptaCookie">Aceptar</a>
</div>
</div>
<div id="configuracion" style="display: none;" style="position: relative;">
<span class="closeConfig" id="cerrarConfiguracion"><i class="fas fa-times"></i></span>
<div class="center">
<h1>Panel de configuración de cookies</h1>
<p>Este es el configurador avanzado de cookies propias y de terceros. Aquí puedes modificar parámetros que afectarán directamente a tu experiencia de navegación en esta web.</p>
</div>
<br>
<div class="row">
<div class="col-9">
<h2>Cookies de funcionamiento</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam similique cum eius. Nostrum mollitia laborum consequuntur deserunt vel non explicabo fugiat.</p>
</div>
<div class="col-2 offset-xl-1">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitches">
<label class="switch ">
<input type="checkbox" class="info" name="funcionamiento" checked disabled>
<span class="slider round"></span>
</label>
</div>
</div>
<div class="col-9">
<h2>Cookies de estadísticas</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam similique cum eius. Nostrum mollitia laborum consequuntur deserunt vel non explicabo fugiat.</p>
</div>
<div class="col-2 offset-xl-1">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitches">
<label class="switch ">
<input type="checkbox" class="info" name="estadistica">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="col-9">
<h2>Cookies de Marketing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam similique cum eius. Nostrum mollitia laborum consequuntur deserunt vel non explicabo fugiat.</p>
</div>
<div class="col-2 offset-xl-1">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitches">
<label class="switch ">
<input type="checkbox" class="info" name="marketing">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
<div class="margenBotsConfig">
<a id="permiteTodas" class="permiteTodas">Permitir todas y continuar</a>
<a href="" class="btnModalCookie aceptaCookie pull-right" style="margin: 0px;">Guardar configuración</a>
</div>
</div>
</div>
<img src="{{ asset('images/slider/humoStatico2Blanco.png') }}" alt="High As" class="humoStatico2Modal">
</div>
</div>
</div>
</div>
Si os dais cuenta hay dos apartados en el mismo modal, es el mensaje inicial y el configurar. Lo muestro y oculto del siguiente modo si le dan al configurar o cierran el configurar.
$("#configurar" ).click(function() {
$('#principal').css("display","none");
$('#configuracion').css("display","block");
});
$("#cerrarConfiguracion" ).click(function() {
$('#principal').css("display","block");
$('#configuracion').css("display","none");
});
Pero aquí llega mi problema, realmente solo tengo que poder quitar o poner las cookies de analitica, y si ya a dado a aceptar guardar esto en una cookie, pero no se como proceder, he leido mucho y no comprendo la verdad.
Me podeis guiar? no busco la solución pero si comprender... gracias
Edición
He conseguido con laravel deshabilitar cookies que yo creo de este modo:
Deshabilitar:
Cookie::queue(Cookie::forget('nameCookie'));
Añadir:
Cookie::queue(Cookie::make('cookieName', 'value', $minutes));
Pero no se como habilitar y deshabilitar las de google _ga, _gat, _gid
Luego he encontrado esto:
window['ga-disable-GA_MEASUREMENT_ID'] = true;
Si lo pones en true, Analytics no hace rastreo. Pero com hago que cuando le de a un botón, guarde esa configuración en una cookie?? Y es posible cambiar ese estado con javascript?