Si quieres conocer más a fondo las ventajas de cada tipo de cookie te invitamos a leer ¿Qué son las cookies de seguimiento, sus tipos y políticas?

VENTAJAS DE IMPLEMENTAR COOKIES EN MI PÁGINA WEB

• Mejorarás la experiencia de navegación de tus usuarios.

• Experiencia personalizada: Para guardar opciones que ha personalizado el usuario o mostrar el contenido que es más probable que le interese.

• Ayuda para comprar: (Si tu sitio web ofrece compras online). Como la encargada de recordar los artículos que se han añadido a la cesta de la compra, permite recomendaciones a cada usuario de artículos relacionados con su historial de compra.

• Idioma: Ofrece una navegación más cómoda al usuario.

• Ahorro de tiempo: Al guardar las preferencias del usuario se evita el tener que configurarlas cada vez que se entra al sitio web.

¿CÓMO IMPLEMENTAR COOKIES EN MI PÁGINA WEB?

Selecciona el tipo de aviso de las cookies:

1. Mensaje informativo
2. Optar por no recibir cookies
3. Optar por las cookies
4. Preferencia del administrador (opción 2 y 3)

Mensaje informativo

• Informa a los usuarios que se utilizarán cookies en el sitio.

• El usuario NO tiene la opción de aceptar o rechazar las cookies.

• El usuario SOLO tiene la opción de cerrar el banner de cookies.

• El banner simplemente informa al usuario del uso de cookies en el sitio web.

• Esta es la opción más sencilla de implementar.

• Recomendado para empresas que requieren un cumplimiento básico.

⚠️ Esta opción NO cumple totalmente con las regulaciones de GDPR.

PASOS

1. Cree su anuncio en Webflow Designer

‍

2. Agregue atributos a los elementos importantes. Para "Mensaje informativo" debemos agregar dos atributos.

a) Un atributo en la barra de cookies (fs-cc=”banner”)

b) Agregar un atributo en el botón "Cerrar" (fs-cc=”close”)

☝🏿 Atributos: Son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

3. Agrega el archivo javascript de Consentimiento de cookies para Webflow a tu página

a) Pega en Configuración del sitio > Código principal.

‍

b) Para el "mensaje informativo", el archivo javascript se puede colocar en cualquier parte del código principal.

<!-- Finsweet Cookie Consent --><script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="informational"></script>
‍Cópialo y pégalo (De Finsweet)

Optar por no recibir cookies

• Carga cookies de forma predeterminada en la primera visita del usuario al sitio.
• El usuario tiene la opción de continuar navegando por el sitio con las cookies o rechazando las cookies.

1. Si el usuario elige la opción de seguir navegando con cookies, no pasa nada. El usuario sigue utilizando cookies.
2. Si el usuario elige rechazar las cookies, eliminamos las cookies de su navegador.
3. Se les permite continuar navegando por el sitio y se deshabilitan todo uso de scripts que emiten cookies no esenciales.
4. Brinda una capa adicional de protección a las leyes de privacidad al permitir que el usuario desactive el uso de cookies y actualice sus preferencias.

⚠️ Tiene los mismos pasos de implementación que la opción 3. La diferencia clave entre la opción 2 y la opción 3 es cuando las cookies se entregan al usuario.

1. La opción 2 proporciona cookies al cargar.
2. La opción 3 otorga cookies con la aceptación del usuario.

🚨 Esta opción NO cumple con el GDPR. Para el cumplimiento completo de GDPR, usa la Opción 3.

PASOS

1. Cree su anuncio en Webflow Designer

2. Agrega atributos a los elementos importantes. Para "Denegar cookies" debemos agregar tres atributos.

• Obligatorio: Un atributo en la barra de cookiesColoque fs-cc="banner" en el div que contiene toda la barra de cookies.

• Obligatorio: Un atributo en el botón "Permitir"Coloque fs-cc="permitir" en el botón/icono/elemento que acepta todas las cookies y cierra la barra de cookies.En la barra de abajo, este es el botón "Aceptar todo"

• Obligatorio: agregue un atributo en el botón "Denegar"Coloque fs-cc="deny" en el botón/icono/elemento que cierra la barra de cookies y rechaza todas las cookies.En la barra de abajo, este es el botón "Denegar".

☝🏿 Opcional: si está utilizando el botón "Preferencias", agregue un atributo en el botón "Preferencias"

‍Coloque fs-cc="open-preferences" en el botón/icono/elemento que abre la interfaz de usuario de preferencias. En la barra de abajo, este es el botón "Preferencias".

Si usa un botón de Preferencias, debe seguir la configuración del "Administrador de preferencias".
‍El botón de preferencias en la barra de cookies inicial no es obligatorio y es opcional para el cumplimiento de las cookies.

3. Opcional: para permitir que el usuario cambie sus preferencias de consentimiento de cookies, siga la configuración del "Administrador de preferencias" en las pestañas anteriores.

• Se requiere el administrador de preferencias para el pleno cumplimiento.

⚠️ Sin embargo, la "Opción 2: Exclusión voluntaria de cookies" no es totalmente compatible, por lo que agregar el Administrador de preferencias no hará que esta implementación sea totalmente compatible.

4. Agrega type type="fs-cc" como atributo a todos los scripts que emiten cookies. Súper importante

☝🏿 ¿POR QUÉ?Evitamos que se ejecuten los scripts.‍

En la Opción 3, no podemos cargar scripts que proporcionen cookies cuando se carga el sitio. Agregar este atributo evitará que estos scripts se carguen en la página hasta que el usuario seleccione específicamente "Permitir" cookies. Esto es necesario para cumplir con las cookies.

En la Opción 2, agregar este atributo nos permitirá evitar que se ejecuten scripts cuando el usuario visite una nueva página en el sitio.

Agregar estos atributos le indicará a la biblioteca qué secuencias de comandos activar y desactivar en función de la selección de consentimiento de cookies del usuario.

5. Agrega el archivo javascript de Consentimiento de cookies para Webflow a su página

• Pegue en Configuración del sitio > Código principal.

⚠️ Para "Excluirse de las cookies", el archivo javascript debe colocarse después del último script de terceros que emite cookies.(Por ejemplo, el Consentimiento de cookies para Webflow se colocaría después de Google Analytics y Facebook.)

<!-- Finsweet Cookie Consent --> <script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="opt-out"></script>
‍Cópialo y pégalo (De Finsweet)

Optar por las cookies

• Requiere que el usuario acepte específicamente el uso de cookies en el sitio antes de que emitamos cookies.

• No se proporcionan cookies al usuario hasta que haga clic en "Aceptar" (o un botón de confirmación similar). Este es el nivel más alto de cumplimiento.

• Si el usuario elige "Aceptar" cookies, ejecutamos todos los scripts que usan cookies. El usuario continúa utilizando el sitio con cookies.

• Si el usuario elige "Denegar" las cookies, le permitimos continuar navegando por el sitio y deshabilitar todo uso de scripts que emiten cookies no esenciales. Nunca reciben cookies y seguirán sin recibirlas durante todo el tiempo que permanezcan en su sitio web.

• Esto es necesario para el pleno cumplimiento. Recomendado para empresas que deben cumplir plenamente con la Ley de cookies de la UE, CCPA, GDPR y otras leyes de privacidad.

• Tiene pasos de implementación similares a los de la opción 2. La diferencia clave entre la opción 2 y la opción 3 es cuando las cookies se entregan al usuario. La opción 2 proporciona cookies al cargar. La opción 3 otorga cookies con la aceptación del usuario.

⚠️ Comprenda que los scripts que usan cookies no se cargan en la página hasta que el usuario acepta específicamente el mensaje de cookies.

PASOS

1. Cree su anuncio en Webflow Designer

2. Agrega atributos a los elementos importantes.

• Para "Aceptar cookies" debemos agregar tres atributos.
• Obligatorio: agregue un atributo en la barra de cookies completaColoque fs-cc="banner" en el div que contiene toda la barra de cookies.

• Obligatorio: agregue un atributo en el botón "Permitir"Coloque fs-cc="permitir" en el botón/icono/elemento que cierra la barra de cookies. En la barra de abajo, este es el botón "Aceptar todo".

• Obligatorio: agregue un atributo en el botón "Denegar"Coloque fs-cc="deny" en el botón/icono/elemento que cierra la barra de cookies. En la barra de abajo, este es el botón "Denegar".

☝🏿 Opcional: si está utilizando el botón "Preferencias", agregue un atributo en el botón "Preferencias"Coloque fs-cc="open-preferences" en el botón/icono/elemento que abre la interfaz de usuario de preferencias. En la barra de abajo, este es el botón "Preferencias". Si usa un botón de Preferencias, debe seguir la configuración del "Administrador de preferencias".El botón de preferencias en la barra de cookies inicial no es obligatorio y es opcional para el cumplimiento de las cookies.

3. Requerido para el cumplimiento total:

• En las pestañas anteriores, siga la configuración del "Administrador de preferencias" para permitir que el usuario cambie sus preferencias de consentimiento de cookies.
• Se requiere el administrador de preferencias para el pleno cumplimiento. Si está utilizando la "Opción 3: Aceptar cookies", se recomienda que agregue un Administrador de preferencias.

4. Agregue type type="fs-cc" como atributo a todos los scripts que emiten cookies. Súper importante

☝🏿 ¿POR QUÉ?
Evitamos que se ejecuten los scripts.‍

-En la Opción 3, no podemos cargar scripts que proporcionen cookies cuando se carga el sitio. Agregar este atributo evitará que estos scripts se carguen en la página hasta que el usuario seleccione específicamente "Permitir" cookies. Esto es necesario para cumplir con las cookies.
- La adición de estos atributos le indicará a la biblioteca qué secuencias de comandos activar y desactivar en función de la selección de consentimiento de cookies del usuario.

5. Agrega el archivo javascript de Consentimiento de cookies para Webflow a su página

• Pegue en Configuración del sitio > Código principal.

⚠️ Para "Excluirse de las cookies", el archivo javascript debe colocarse después del último script de terceros que emite cookies.(Por ejemplo, el Consentimiento de cookies para Webflow se colocaría después de Google Analytics y Facebook.)

<!-- Finsweet Cookie Consent --> <script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="opt-out"></script>Cópialo y pégalo (De Finsweet)

Preferencia del administrador (opción 2 y 3)

PASOS

1. Cree su componente "Administrador"

• Agregue el atributo fs-cc="manager" al contenedor principal.
• Agregue el atributo fs-cc="open-preferences" al ícono. Esto actuará como el destino del clic.

☝🏿 El componente Administrador es un botón que permite al usuario abrir el componente Preferencias para cambiar su preferencia de consentimiento de cookies.

Este botón debe estar siempre visible para el usuario después de que haya realizado su selección inicial en el banner de cookies. Muchos botones de Manager están fijos en la parte inferior izquierda o inferior derecha de la pantalla.

2. Cree su componente Preferencias en Webflow Designer

• Agregue atributos fs-cc a elementos importantes como se ve a continuación.
• Su atributo fs-cc="preferences" debe ir en el padre externo <div> de todo el modal emergente de preferencias. Esto es lo que muestra y oculta cuando un usuario abre preferencias.

3. Agregue atributos de tipo fs-cc-categories="CATEGORY" a todos los scripts que emiten cookies. Esto clasificará un script como Marketing, Personalización o Análisis.

1. fs-cc-categories="marketing"
2. fs-cc-categories="personalización"
3. fs-cc-categories="análisis"
4. Puede aplicar varias categorías a un script separando con comas los nombres de las categorías.Así: fs-cc-categories="analytics, marketing"

☝🏿 ¿POR QUÉ?
‍Agregar estos atributos le dice a la biblioteca qué scripts activar y desactivar cuando el usuario realiza sus selecciones específicas de categoría en el Administrador de preferencias.

Resumen

¿Qué cookies debo implementar en mi página web?

Recordemos que en el artículo sobre las cookies, sus clasificaciones y sus políticas, mencionamos las cookies básicas y necesarias para implementar en tu sitio web y estas eran:

• Cookies exceptuadas
• Cookies propias
• Cookies de sesión
• Cookies de seguridad
• Cookies técnicas

Pero te destacamos que para mejorar la experiencia de usuario en tu sitio web debes tomar en cuenta todos los tipos de cookies y las ventajas que cada una te podía ofrecer.

Bien, en este artículo te enseñamos de manera ejemplificada cómo implementar el aviso de la cookie o cookies que utilizarás y esto depende del tipo que uses, así que te recomendamos que leas  las cookies, sus clasificaciones y sus políticas para que puedas decidir qué tipo de aviso implementarás en tu sitio web.