Saltar al contenido principal

Instala Cookies en tu plataforma

Instala Cookies en tu plataforma

Todas las opciones cargan el mismo banner de Soyio e incluyen Google Consent Mode v2. La diferencia es dónde debes ubicar el loader para que se ejecute antes de los tags opcionales.

Reemplaza csite_TU_TOKEN por el token del sitio. Agrega data-sandbox="true" solo para pruebas en sandbox. Para probar en tu servidor de desarrollo, sigue prueba el banner en local.

Si también usas el SDK web por npm, revisa usa el banner junto al SDK web por npm.

Next.js​

Agrega el loader como un <script> normal dentro del <head> de app/layout.tsx. Next.js lo incluye en el HTML inicial y el navegador lo ejecuta antes que cualquier tag de Google, incluso si lo agregaste inline en el mismo <head>.

app/layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es">
      <head>
        <script
          src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.24.0/dist/cookie-loader.js"
          data-site-token="csite_TU_TOKEN"
          data-consent-mode="gtag"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

No uses next/script para el loader. Con strategy="beforeInteractive", Next.js inserta el script desde su runtime y un tag de Google inline en el <head> puede ejecutarse primero.

Puedes cargar Google Analytics con @next/third-parties/google o con next/script en cualquier estrategia. El loader siempre fija el estado inicial antes.

Si tu app tiene varios root layouts, agrega el loader en cada uno.

React y Vite​

Vite trata el index.html de la raíz como código fuente y como la entrada de la aplicación. Pega el loader como el primer script del <head>.

index.html
<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.24.0/dist/cookie-loader.js"
      data-site-token="csite_TU_TOKEN"
      data-consent-mode="gtag"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

No montes el loader desde un useEffect. En ese punto la aplicación y otros tags ya pueden haberse ejecutado.

Referencia: index.html y la raíz del proyecto en Vite.

Webflow​

  1. Abre Site settings > Custom code
  2. Pega el loader en Head code
  3. Selecciona Save changes
  4. Publica el sitio
Head code
<script
  src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.24.0/dist/cookie-loader.js"
  data-site-token="csite_TU_TOKEN"
  data-consent-mode="gtag"
></script>

Webflow muestra el código personalizado en Preview, pero no lo publica hasta que vuelves a publicar el sitio.

Si configuraste analítica o marketing mediante una integración nativa, quita esa carga duplicada y vuelve a instalarla como un script bloqueado o mediante GTM. El loader no puede detener un tag que ya se ejecutó.

Referencia: código personalizado en head y body de Webflow.

Framer​

  1. Abre Project Settings > Custom Code
  2. Selecciona Add Script
  3. Usa Placement: Start of head
  4. Usa Pages: All y Run: Once
  5. Pega el loader y vuelve a publicar
Custom Code
<script
  src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.24.0/dist/cookie-loader.js"
  data-site-token="csite_TU_TOKEN"
  data-consent-mode="gtag"
></script>

No agregues el mismo loader en Page Settings. Debe existir una sola instalación por página.

Referencias: código personalizado de Framer y configuración de scripts en el inicio de head.

Verifica la instalación​

En cualquier plataforma:

  1. Abre una ventana privada sin consentimiento guardado
  2. Confirma que el banner aparece
  3. Rechaza todo y verifica que no carguen tags opcionales
  4. Acepta analítica o marketing y verifica solo la categoría elegida
  5. Cambia las preferencias y confirma que el estado se actualiza

Sigue con bloqueo y verificación para configurar los tags opcionales.