10
 
21/04/2022

Código javascript con licencia MIT para consentimiento de cookies (Cookie Consent) - implementación de código

Código javascript con licencia MIT para consentimiento de cookies (Cookie Consent) - implementación de código¿Cómo implementar un código de consentimiento de cookies en mi sitio web? Muchos al igual que yo, hemos estado buscando un código de fácil aplicación y con la licencia ideal para poner en práctica en nuestro sitio web sin que conlleve a pagos adicionales, y ya lo encontré.

Después de largo tiempo buscando la mejor manera de hacer cumplir con las regulaciones y las leyes que desde Europa se han lanzado en cuanto al tratamiento de las cookies, al fin logré encontrar uno de los mejores que hasta ahora se han puesto a la orden de los desarrolladores de manera libre y con una licencia MIT.

Primero quiero recordar a todos que una licencia MIT del trabajo, la obra, la aplicación, el sistema, el código o lo que sea que esté debajo, significa lo siguiente:

«Una licencia permisiva breve y simple con condiciones que solo requieren la preservación de los avisos de derechos de autor y licencia. Los trabajos con licencia, las modificaciones y los trabajos más grandes pueden distribuirse bajo diferentes términos y sin código fuente».

Así que lo único que tenemos que hacer cuando tomamos un trabajo con esta licencia, es mantener los datos de derechos de autor y el nombre de la licencia en sí, que en este caso es MIT.

Una vez aclarado esto, también es importante que los sitios web que aún no están cumpliendo con estas regulaciones en países de Europa porque entre otras cosas el sitio web no está en alguno de esos países, deben comenzar a trabajar en hacerlo debido a que en un futuro puede que se adopten estas mismas medidas en países distintos donde la privacidad de los datos es fundamental para las leyes.


Sin más preámbulo, vamos a conocer el código que hasta la fecha ha sido el más interesante por su diseño y fácil aplicación.

Puede conocer el funcionamiento de este complemento a través de una demostración en vivo.

Para comprender el código es necesario conocer lo siguiente:

  1. Se requieren conocimientos básicos de JavaScript
  2. Se requieren conocimientos de HTML y CSS

Primero que nada debemos solicitar la versión más reciente del estilo CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.css" />

También debemos solicitar la versión más reciente del código javascript de Orest Bida, el autor original.

Nota: Puede hacerlo desde el HEAD o como explica el autor, desde el BODY. Yo lo he probado desde el HEAD con la etiqueta async.

<script defer src="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.js"></script>

Para que el complemento funcione de manera correcta es necesario configurar ciertos datos que nos permitirán manejar el diseño y las funciones provistas a nuestro gusto.

El código de configuración puede ir dentro de un archivo javascript, que puede nombrar 'cookieconsent-init.js' y llamar desde el BODY después de la llamada a 'cookieconsent.js'. En mi caso lo he llamado desde el HEAD al igual que el anterior con async como se muestra a continuación.

<script async src="/RUTA/SRC/cookieconsent-init.js"></script>
o
<script defer src="/RUTA/SRC/cookieconsent-init.js"></script>

Así es como van las cosas dentro del archivo 'cookieconsent-init.js' a configurar

Puede detallar cada una de las opciones que se establecen para 'cc.run' y cambiar los valores de acuerdo a las especificaciones del código. Tome en cuenta que al establecer el lenguaje a usar en 'current_lang' (establecido a 'en' para el idioma inglés), también puede usar por ejemplo 'es' para español y definir su configuración más abajo en la propiedad 'languages'.

Vea esta demostración con la configuración en español.

// obtain plugin
var cc = initCookieConsent();

// run plugin with your configuration
cc.run({
current_lang: 'en',
autoclear_cookies: true, // default: false
page_scripts: true, // default: false

// mode: 'opt-in' // default: 'opt-in'; value: 'opt-in' or 'opt-out'
// delay: 0, // default: 0
// auto_language: null // default: null; could also be 'browser' or 'document'
// autorun: true, // default: true
// force_consent: false, // default: false
// hide_from_bots: false, // default: false
// remove_cookie_tables: false // default: false
// cookie_name: 'cc_cookie', // default: 'cc_cookie'
// cookie_expiration: 182, // default: 182 (days)
// cookie_necessary_only_expiration: 182 // default: disabled
// cookie_domain: location.hostname, // default: current domain
// cookie_path: '/', // default: root
// cookie_same_site: 'Lax', // default: 'Lax'
// use_rfc_cookie: false, // default: false
// revision: 0, // default: 0

onFirstAction: function(user_preferences, cookie){
// callback triggered only once
},

onAccept: function (cookie) {
// ...
},

onChange: function (cookie, changed_preferences) {
// ...
},

languages: {
'en': {
consent_modal: {
title: 'We use cookies!',
description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
primary_btn: {
text: 'Accept all',
role: 'accept_all' // 'accept_selected' or 'accept_all'
},
secondary_btn: {
text: 'Reject all',
role: 'accept_necessary' // 'settings' or 'accept_necessary'
}
},
settings_modal: {
title: 'Cookie preferences',
save_settings_btn: 'Save settings',
accept_all_btn: 'Accept all',
reject_all_btn: 'Reject all',
close_btn_label: 'Close',
cookie_table_headers: [
{col1: 'Name'},
{col2: 'Domain'},
{col3: 'Expiration'},
{col4: 'Description'}
],
blocks: [
{
title: 'Cookie usage',
description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.'
}, {
title: 'Strictly necessary cookies',
description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
toggle: {
value: 'necessary',
enabled: true,
readonly: true // cookie categories with readonly=true are all treated as "necessary cookies"
}
}, {
title: 'Performance and Analytics cookies',
description: 'These cookies allow the website to remember the choices you have made in the past',
toggle: {
value: 'analytics', // your cookie category
enabled: false,
readonly: false
},
cookie_table: [ // list of all expected cookies
{
col1: '^_ga', // match all cookies starting with "_ga"
col2: 'google.com',
col3: '2 years',
col4: 'description ...',
is_regex: true
},
{
col1: '_gid',
col2: 'google.com',
col3: '1 day',
col4: 'description ...',
}
]
}, {
title: 'Advertisement and Targeting cookies',
description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
toggle: {
value: 'targeting',
enabled: false,
readonly: false
}
}, {
title: 'More information',
description: 'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.',
}
]
}
}
}
});


Ahora debemos elegir los scripts a los cuales debemos o queremos aplicar el complemento de manera individual. Si detallaron en el código de la configuración, se habrán dado cuenta que en 'settings_modal' existe una propiedad 'blocks' que evalúa una matriz de opciones, y en ellas encontraremos las categoría definidas para asignar a cada script de nuestro sitio.

Veamos los siguientes ejemplos:

<script async type="text/plain" data-cookiecategory="necessary" src="/RUTA/SRC/main-script.js"></script>

<script async type="text/plain" data-cookiecategory="necessary">
// Código del script
</script>
Use 'necessary' para los scripts que son estrictamente necesarios para el funcionamiento del sitio.

<script async type="text/plain" data-cookiecategory="analytics" src="/RUTA/SRC/analytics-script.js"></script>

<script async type="text/plain" data-cookiecategory="analytics">
// Código del script
</script>
Use 'analytics' para los scripts que son por ejemplo de Google Analytics.

<script async type="text/plain" data-cookiecategory="targeting" src="/RUTA/SRC/ads-script.js"></script>

<script async type="text/plain" data-cookiecategory="targeting">
// Código del script
</script>
Use 'targeting' para los scripts que son de anuncios.

Nota: Si se omite la asignación de una categoría a un script en particular, el complemento no tendrá acción sobre dicho script y continuará su ejecución independientemente de la elección del usuario.

Para conocer mayores detalles al respecto de la aplicación de este ligero complemento para Cookie Consent puede ingresar al GitHub de Orest Bida.
Consulta Lo+ Top de Lenguajes De Programación
Todos los titulares en un solo lugar...