0

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?

2 respuestas 2

0

Puede que esto te sirva, o al menos es parecido a lo que buscas:

https://stackoverflow.com/questions/10836122/how-to-remove-google-analytics-cookies

0

Creo que encontre una solución.

Si le da al primer botón que pone aceptar realizamos lo siguiente.

//Si acepta todo activamos track que es la que activa analytics y aceptaCookies que es la que guarda que no muestre de nuevo el modal//
$("#AceptaTodo").click(function(){
  document.cookie = "track=1; expires=Thu, 01 Jan 2050 00:00:00 UTC; path=/;";
  document.cookie = "aceptaCookies=1; expires=Thu, 01 Jan 2050 00:00:00 UTC; path=/;";
  $('#nuevaCookies').modal('hide').fadeOut(13000);
})

Si va a configurar existen dos opciones o bien que marque la de estadísticas o no. Pero como luego pueden volver a configurar e hecho lo siguiente:

$("#guardaConfiguracion" ).click(function() {
  if( $('.estadistica').prop('checked') ) {
      document.cookie = "track=1; expires=Thu, 01 Jan 2050 00:00:00 UTC; path=/;";
      document.cookie = "aceptaCookies=1; expires=Thu, 01 Jan 2050 00:00:00 UTC; path=/;";
  }else{
      document.cookie = "aceptaCookies=1; expires=Thu, 01 Jan 2050 00:00:00 UTC; path=/;";
      document.cookie = "track=1; expires=Thu, 01 Jan 1979 00:00:00 UTC; path=/;";
  }
  $('#nuevaCookies').modal('hide').fadeOut(13000);
});

Si le de a si quiere la cookie de analítica, lo guardo en una cookie que se llama tracky guardo otra cookie como que a aceptado las cookies de la web y así no le muestro más el modal. Si por lo contrario dice que no quiere analítica, solo guardo la cookie de que a aceptado las cookies y no muestro más el modal.

Si a dado a que si quiere estadística pero luego lo vuelve a configurar y decide que no quiere, la borro con el else

Después en el layout he configurado un if - else para comprobar si existe la cookie de track dado que si existe, si quiere analítica.

//Check if consent cookie is set
  if(readCookie('track')!="1"){
    window['ga-disable-UA-Id'] = true;
    }
    else  {  
    window['ga-disable-UA-Id'] = false;
    }
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-id');

Y con todo esto lo tengo funcionando bien, si algún compañer@ se le ocurre otro modo, estoy abierto a aprender otros métodos mejores.

Lo único que he tenido que quitar el fade del modal por que si lo queria abrir de nuevo no funcionaba, me gustaría darle algún efecto de entrada y salida al modal pero no se como.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.