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.

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