Instala Cookies directamente
Instala Cookies directamente
Agrega el loader antes de cualquier tag opcional. Usa la versión fija 3.14.0 para que el loader y el SDK principal siempre sean compatibles.
<script
defer
src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.14.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.
El atributo defer conserva el orden entre scripts diferidos. No dejes tags opcionales normales en el <head>: un script síncrono se ejecutará antes del loader aunque aparezca después.
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 | granted | Siempre activa |
personalization_storage | granted | Siempre activa |
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.
<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:
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.