Instala Cookies directamente

Instala Cookies directamente

Agrega el loader como el primer script del <head>, antes de cualquier tag de Google o tag opcional. Usa la versión fija 3.15.0 para que el loader y el SDK principal siempre sean compatibles.

head

<script
  src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.15.0/dist/cookie-loader.js"
  data-site-token="csite_TU_TOKEN"
  data-consent-mode="gtag"
></script>

Para sandbox, agrega data-sandbox="true". En producción omítelo o usa false.

El banner detecta el idioma del navegador y usa español si no encuentra un idioma compatible. Agrega data-locale="es" o data-locale="en" para forzar un idioma.

No agregues async ni defer. El loader pesa menos de 5 KB comprimido y debe ejecutarse antes que cualquier otro script. Así fija las señales de Google en denied antes de que un gtag('config') envíe datos. El banner y el SDK principal se cargan después, sin bloquear la página.

Si el loader detecta un config o event de Google antes de su estado inicial, muestra una advertencia en la consola del navegador.

Señales de Google

El loader configura estas señales antes de importar el SDK principal:

Señal	Estado inicial	Categoría que la habilita
analytics_storage	denied	analytics
ad_storage	denied	marketing
ad_user_data	denied	marketing
ad_personalization	denied	marketing
functionality_storage	denied	functional
personalization_storage	denied	personalize
security_storage	granted	Siempre activa

El valor wait_for_update es 500 ms y no aplica regiones distintas. Soyio actualiza las señales solo después de validar el consentimiento guardado o persistir una decisión nueva.

Lee el estado validado

El loader expone window.SoyioCookieConsent. Su estado es null hasta completar la validación.

const current = window.SoyioCookieConsent?.getState();

const unsubscribe = window.SoyioCookieConsent?.addConsentListener((state) => {
  if (!state) return;

  console.log(state.decision);
  console.log(state.acceptedCategories);
  console.log(state.googleConsent);
});

// Cuando ya no necesites escuchar cambios
unsubscribe?.();

Si agregas el listener después de validar una decisión, recibe el estado actual de inmediato.

Permite cambiar las preferencias

Por defecto, el loader deja un botón flotante después de guardar una decisión. Puedes ubicarlo a la izquierda o derecha, u ocultarlo con Sin botón, desde la apariencia del banner.

Si lo ocultas, agrega un enlace en el footer o en la política de cookies para que cada persona pueda volver a abrir el diálogo.

footer

<button id="cookie-preferences" type="button">
  Preferencias de cookies
</button>

<script>
  document.getElementById('cookie-preferences').addEventListener('click', () => {
    window.SoyioCookieConsent?.showPreferences();
  });
</script>

También puedes sobrescribir la configuración desde la instalación con data-persistence-display="none", o usar data-fob-position="left" para cambiar el lado del botón.

Configura CSP

Ajusta estas fuentes a tu política existente:

Content-Security-Policy

script-src 'self' https://cdn.jsdelivr.net https://www.googletagmanager.com;
connect-src 'self' https://app.soyio.id https://sandbox.soyio.id;
frame-src https://cookies.soyio.id https://sandbox-cookies.soyio.id;

Si usas nonces para scripts inline, conserva el atributo nonce en el script inerte. Soyio lo copia al activarlo.

Sigue con bloqueo y verificación para convertir tus tags opcionales.