ES
Empieza gratis

Documentación

Todo lo que necesitas saber para implementar Consentio en minutos

Sitio web personalizado

Implementación avanzada de Consentio para desarrolladores

Implementación básica

Para la implementación básica, simplemente inserta una línea de código:

HTML 
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

El widget se inicializa automáticamente y muestra la barra de cookies en la primera carga de página. Puedes encontrar tu SCRIPT_KEY único en el panel, en Ajustes → Instalación.

Consejo: La identificación del sitio web forma parte de la URL (SCRIPT_KEY), así que no necesitas atributos de datos adicionales. El idioma se detecta automáticamente a partir del atributo lang del elemento <html> o de la cabecera Accept-Language del navegador.

API de JavaScript

Una vez cargado el widget, el objeto global window.Consentio está disponible para control programático.

Métodos disponibles

Método Descripción
show() Muestra el banner de cookies
hide() Oculta el banner de cookies
showPreferences() Muestra la configuración de preferencias
getConsent() Devuelve el estado actual del consentimiento
updateConsent(updates) Actualiza el estado del consentimiento
onConsentChange(callback) Registra un listener para los cambios de consentimiento
getBlockedScripts() Devuelve el número de scripts bloqueados
getBlockedIframes() Devuelve el número de iframes bloqueados

Mostrar el banner

JavaScript 
// Muestra el banner de cookies
Consentio.show()

// Oculta el banner de cookies
Consentio.hide()

// Muestra la configuración de preferencias
Consentio.showPreferences()

Obtener el estado del consentimiento

JavaScript 
// Obtiene el estado actual del consentimiento
const consent = Consentio.getConsent()
// { necessary: true, analytics: false, marketing: false, functionality: false }

// Comprueba una categoría específica
if (consent.analytics) {
  // Ejecuta los scripts de analítica
  loadGoogleAnalytics()
}

if (consent.marketing) {
  // Ejecuta los scripts de marketing
  loadFacebookPixel()
}

Actualizar el consentimiento

JavaScript 
// Actualiza categorías específicas
Consentio.updateConsent({
  analytics: true,
  marketing: false
})

Listeners de eventos

Reacciona a los cambios de consentimiento con listeners de eventos:

JavaScript 
// Opción 1: usando onConsentChange
Consentio.onConsentChange((consent) => {
  console.log('Consent changed:', consent)

  if (consent.analytics) {
    loadGoogleAnalytics()
  }

  if (consent.marketing) {
    loadFacebookPixel()
  }
})

// Opción 2: usando un listener de eventos de window
window.addEventListener('consentio:consent', (event) => {
  const consent = event.detail
  console.log('Consent changed:', consent)
})

Google Consent Mode v2

Consentio es compatible automáticamente con Google Consent Mode v2. Para garantizar el correcto funcionamiento, asegúrate de que el widget se cargue antes que Google Analytics y otros scripts de Google.

HTML 
<!-- 1. Primero Consentio -->
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

<!-- 2. Luego la etiqueta de Google -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Correspondencia de categorías con Consent Mode

Categoría de Consentio Google Consent Mode
necessary functionality_storage, security_storage
analytics analytics_storage
marketing ad_storage, ad_user_data, ad_personalization
functionality personalization_storage

Bloqueo de scripts

Para bloquear scripts antes de que se otorgue el consentimiento, usa el atributo type="text/plain" junto con el atributo de datos data-category:

HTML 
<!-- El script solo se ejecuta tras conceder el consentimiento de analítica -->
<script type="text/plain" data-category="analytics">
  // Código de Google Analytics
  gtag('config', 'G-XXXXXXX');
</script>

<!-- El script solo se ejecuta tras conceder el consentimiento de marketing -->
<script type="text/plain" data-category="marketing">
  // Código de Facebook Pixel
  fbq('init', 'XXXXXXX');
</script>

<!-- El script solo se ejecuta tras conceder el consentimiento de funcionalidad -->
<script type="text/plain" data-category="functionality">
  // Código de personalización
  initPersonalization();
</script>

Categorías disponibles

Categoría Descripción
necessary Cookies necesarias (siempre permitidas)
analytics Cookies de analítica
marketing Cookies de marketing
functionality Cookies funcionales para personalización

Botón para abrir las preferencias

Coloca un botón en tu sitio web para volver a abrir las preferencias de cookies (obligatorio según el RGPD):

HTML 
<!-- En el pie de página del sitio web -->
<a href="#" onclick="Consentio.showPreferences(); return false;">
  Ajustes de cookies
</a>

<!-- O como un botón -->
<button onclick="Consentio.showPreferences()">
  Gestionar preferencias de cookies
</button>
Consejo: El RGPD exige que los usuarios puedan cambiar sus preferencias en cualquier momento. Coloca un enlace en el pie de página o en tu política de privacidad.

Aplicaciones de página única (SPA)

Para React, Vue, Angular y otros frameworks SPA, el widget funciona automáticamente. El widget detecta los cambios de URL y se actualiza según sea necesario.

JavaScript 
// Ejemplo: comprobar el estado del consentimiento al cambiar de ruta (Vue Router)
router.afterEach(() => {
  if (window.Consentio) {
    const consent = Consentio.getConsent()
    if (consent.analytics) {
      // Los scripts de analítica están permitidos
    }
  }
})
ShoptetGoogle Tag Manager