Novedades
Música
 
Imagen, foto o portada de La Cura Pa Mi Locura de El Chulo (Letra, Música)
La Cura Pa Mi Locura de El Chulo (Letra, Música)
Imagen, foto o portada de yo sad, tú feliz de Valentina (Letra, Música)
yo sad, tú feliz de Valentina (Letra, Música)
Imagen, foto o portada de Sin Ti de Juandy (Letra, Música)
Sin Ti de Juandy (Letra, Música)
Imagen, foto o portada de X SI VOLVEMOS de Karol G, Romeo Santos (Letra, Música)
X SI VOLVEMOS de Karol G, Romeo Santos (Letra, Música)
Imagen, foto o portada de La Fórmula de Maluma, Marc Anthony (Letra, Música)
La Fórmula de Maluma, Marc Anthony (Letra, Música)
Imagen, foto o portada de Sal Pa La Luz de Bulova, Starmac Publishing (Letra, Música)
Sal Pa La Luz de Bulova, Starmac Publishing (Letra, Música)
Imagen, foto o portada de PERDÓNAME de Naiza (Letra, Música)
PERDÓNAME de Naiza (Letra, Música)
Imagen, foto o portada de Después Del Party de Dalex (Letra, Música)
Después Del Party de Dalex (Letra, Música)
Imagen, foto o portada de 365 de Adso, RoyalLive (Letra, Música)
365 de Adso, RoyalLive (Letra, Música)
Imagen, foto o portada de No Eras Para Tanto de Susana Cala (Letra, Música)
No Eras Para Tanto de Susana Cala (Letra, Música)
Imagen, foto o portada de Quiero Creer de Luck Ra, La T y la M, Rusherking (Letra, Música)
Quiero Creer de Luck Ra, La T y la M, Rusherking (Letra, Música)
Imagen, foto o portada de Big Booty de Hozwal, Young Miko (Letra, Música)
Big Booty de Hozwal, Young Miko (Letra, Música)
Imagen, foto o portada de 3107 de Manira (Letra, Música)
3107 de Manira (Letra, Música)
Imagen, foto o portada de yo pr1mero de Rels B (Letra, Música)
yo pr1mero de Rels B (Letra, Música)
Imagen, foto o portada de Por el Resto de Tu Vida de Christian Nodal, TINI (Letra, Música)
Por el Resto de Tu Vida de Christian Nodal, TINI (Letra, Música)
Imagen, foto o portada de D y R de Pipe Calderón (Letra, Música)
D y R de Pipe Calderón (Letra, Música)
Imagen, foto o portada de Bendita de Las Villa, Llane (Letra, Música)
Bendita de Las Villa, Llane (Letra, Música)
Imagen, foto o portada de LLYLM de ROSALÍA (Letra, Música)
LLYLM de ROSALÍA (Letra, Música)
Imagen, foto o portada de Mi Facha de Cris Mj (Letra, Música)
Mi Facha de Cris Mj (Letra, Música)
Imagen, foto o portada de Casas de Papel (Live) de Cáthia (Letra, Música)
Casas de Papel (Live) de Cáthia (Letra, Música)
Imagen, foto o portada de La apuesta musical de Kalido para 2023 inicia con «Opciones»
La apuesta musical de Kalido para 2023 inicia con «Opciones»
Imagen, foto o portada de Opciones de Kalido, Totoy El Frío, HIT$ MUSIC (Letra, Música)
Opciones de Kalido, Totoy El Frío, HIT$ MUSIC (Letra, Música)
Imagen, foto o portada de PEM de Juan Magan, David Cuello (Letra, Música)
PEM de Juan Magan, David Cuello (Letra, Música)
Imagen, foto o portada de Santorini de Jory Boy, Lenny Tavarez, Sael (Letra, Música)
Santorini de Jory Boy, Lenny Tavarez, Sael (Letra, Música)
Imagen, foto o portada de Sin Perse de Jory Boy, Justin Quiles (Letra, Música)
Sin Perse de Jory Boy, Justin Quiles (Letra, Música)
Imagen, foto o portada de Tanta Lucha de Danny Romero, Kabasaki (Letra, Música)
Tanta Lucha de Danny Romero, Kabasaki (Letra, Música)
Imagen, foto o portada de XNO de Lyanno, Amarion (Letra, Música)
XNO de Lyanno, Amarion (Letra, Música)
Imagen, foto o portada de Entrégame Tu Amor de Don Omar y Randy (Letra, Música)
Entrégame Tu Amor de Don Omar y Randy (Letra, Música)
Imagen, foto o portada de Trap Life de Neutro Shorty (Letra, Música)
Trap Life de Neutro Shorty (Letra, Música)
Imagen, foto o portada de Ella de Jessy Castillo (Letra, Música)
Ella de Jessy Castillo (Letra, Música)
Imagen, foto o portada de Un Clásico de Ana Mena (Letra, Música)
Un Clásico de Ana Mena (Letra, Música)
Imagen, foto o portada de Zelle de Niko La Fábrica, Noreh (Letra, Música)
Zelle de Niko La Fábrica, Noreh (Letra, Música)
Imagen, foto o portada de Tu Foto de Tres Dedos (Letra, Música)
Tu Foto de Tres Dedos (Letra, Música)
Imagen, foto o portada de Como Tú de Jd Pantoja (Letra, Música)
Como Tú de Jd Pantoja (Letra, Música)
Imagen, foto o portada de La Despedida de Pipe Bueno (Letra, Música)
La Despedida de Pipe Bueno (Letra, Música)
Imagen, foto o portada de No Pinto Pajaritos de Andy Rivera (Letra, Música)
No Pinto Pajaritos de Andy Rivera (Letra, Música)
Imagen, foto o portada de Albaricoque de Brray (Letra, Música)
Albaricoque de Brray (Letra, Música)
Imagen, foto o portada de ME CONFUNDÍ de ITZZA PRIMERA (Letra, Música)
ME CONFUNDÍ de ITZZA PRIMERA (Letra, Música)
Imagen, foto o portada de Teikirisi de Ely Blancarte (Letra, Música)
Teikirisi de Ely Blancarte (Letra, Música)
Imagen, foto o portada de Maliante de Omy de Oro, Rochy RD (Letra, Música)
Maliante de Omy de Oro, Rochy RD (Letra, Música)
Imagen, foto o portada de Los Celos Se Te Notan de Olga Tañón (Letra, Música)
Los Celos Se Te Notan de Olga Tañón (Letra, Música)
Imagen, foto o portada de Piscis de Leslie Shaw (Letra, Música)
Piscis de Leslie Shaw (Letra, Música)
Imagen, foto o portada de HAY TETEO de Cauty (Letra, Música)
HAY TETEO de Cauty (Letra, Música)
Imagen, foto o portada de GOTITAS de Cauty (Letra, Música)
GOTITAS de Cauty (Letra, Música)
Imagen, foto o portada de ESNUA de Cauty (Letra, Música)
ESNUA de Cauty (Letra, Música)
Imagen, foto o portada de LOS COPS de Cauty, KEVVO, Gino Mella, Totoy El Frio (Letra, Música)
LOS COPS de Cauty, KEVVO, Gino Mella, Totoy El Frio (Letra, Música)
Imagen, foto o portada de SENOR OFICIAL de Cauty (Letra, Música)
SENOR OFICIAL de Cauty (Letra, Música)
Imagen, foto o portada de Yo Le Llego (feat. Dylan Fuentes) de Kzo Beat, Mozart la Para, Dylan Fuentes (Letra, Música)
Yo Le Llego (feat. Dylan Fuentes) de Kzo Beat, Mozart la Para, Dylan Fuentes (Letra, Música)
Internet
 
Leng. De Program.
 
Listas De Páginas
 
Lo+ Visto
Lenguajes De Programación
  1. Enorable
  2. Lenguajes De Programación
  3. Javascript
 
21/04/2022 |  vistas:

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...