# Asistente de instalación: una instalación verificada, paso a paso

Cómo el asistente de instalación de FlowConsent verifica cada paso en real — snippet, escaneo de rechazo, vigilancia semanal, y el recorrido de servidor.

> Canonical: https://www.flowconsent.com/es/doc/setup-wizard
> Last updated: 2026-07-30
El asistente de instalación vive en la pestaña **Deployment** del Builder, una vez desplegado tu banner. Hace más que darte un snippet: cada paso se **verifica contra tu sitio real**. El asistente no dice «pega este código» — descarga tu página y constata que está hecho, después demuestra que el banner se respeta con un escaneo de rechazo, y termina en la vigilancia continua en lugar de en un «ya está».

## Paso 1 — Añade el snippet para tu plataforma

La tarjeta de integración ofrece el snippet en tres variantes: **HTML / No-code**, **Webflow** y **Next.js**. Todas contienen las mismas dos partes, en este orden:

1. Un **stub de Consent Mode** inline que registra valores por defecto `denied` para todas las señales de Google.
2. El **cargador de FlowConsent**, que muestra el banner y aplica la elección del visitante.

```html title="index.html"
<script>
// FlowConsent Loader - PLACER AVANT tout autre script dans le <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
  'ad_storage':'denied',
  'analytics_storage':'denied',
  'ad_user_data':'denied',
  'ad_personalization':'denied',
  'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://TU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=TU_CODIGO_LICENCIA"></script>
```

> [!WARNING]
> El stub debe ir **antes** del cargador — y antes de cualquier otro script. El cargador es asíncrono: una etiqueta de Google inyectada por otro canal (un ajuste del site builder, un plugin) podría ganar la carrera. El stub, en cambio, se ejecuta al parsear el HTML: los valores `denied` quedan registrados antes de cualquier gtag, lo cargue quien lo cargue.

Las particularidades por plataforma, tal como las muestra el asistente:

- **Webflow** — pega el snippet en *Site settings → Custom code → Head code* y publica. Retira cualquier Measurement ID de Google Analytics de *Site settings → Apps & Integrations*: Webflow lo inyecta **por encima** de tu código personalizado, así que su configuración gtag se ejecutaría antes de los valores por defecto de consentimiento y ninguna CMP podría controlarla.
- **Next.js** — el asistente genera una versión `app/layout.tsx` que usa `<Script strategy="beforeInteractive">` para el stub y el cargador. Para la navegación del lado del cliente, activa además el modo SPA en la pestaña Settings — consulta la [guía de integración con Next.js](/es/doc/nextjs-integration).

## Paso 2 — Verifica tu instalación

Introduce la URL de tu página y haz clic en **Verificar**. FlowConsent descarga la página desde sus servidores y comprueba, en el HTML real:

- la página es **accesible** (con el estado HTTP si no lo es);
- el **cargador de FlowConsent está presente con tu código de licencia** — si se encuentra un cargador con un código *distinto*, el asistente te dice cuál;
- el **stub de Consent Mode está presente** — si falta, probablemente pegaste solo el segundo bloque `<script>`;
- si hay una etiqueta de Google en la página, el **stub se ejecuta antes que ella** — de lo contrario sus cookies no pueden controlarse, y el asistente muestra la URL de la etiqueta culpable.

> [!TIP]
> Si la comprobación señala una etiqueta inyectada por tus **ajustes de Webflow**, no la combatas con código personalizado: retira el Measurement ID de *Site settings → Apps & Integrations* y deja que el banner cargue Google Analytics en su lugar.

## Paso 3 — Lanza un escaneo de rechazo

Un banner instalado no prueba nada por sí solo: lo que cuenta es lo que se ejecuta cuando un visitante **rechaza**. Este paso carga tu página en un navegador real con el consentimiento rechazado y lista todo lo que se dispara igualmente. Usa el perfil rápido — un veredicto en unos 30–60 segundos — y muestra la misma insignia de veredicto que la página de Conformidad (Conforme, Avisos o Violaciones), más el número de violaciones.

La auditoría exhaustiva, las sugerencias de páginas y el historial de escaneos viven en la [página de Conformidad](/es/doc/compliance-verification).

## Paso 4 — Activa la vigilancia semanal

El último paso no cierra la instalación — la mantiene probada. Haz clic en **Vigilar esta página cada semana**: el mismo escaneo de rechazo se relanza cada semana y te alerta ante una regresión (una etiqueta añadida por un equipo de marketing, un ajuste del site builder reactivado). En cuanto existe un monitor para la página, el asistente lo muestra como activo.

## Lado servidor (opcional)

La mitad de los tratamientos sujetos a consentimiento ocurre del lado del servidor — GA4 Measurement Protocol, sincronización con el CRM, analítica propia. El asistente cubre también ese recorrido.

### Lee el contrato de consentimiento con el SDK de servidor

El asistente genera un snippet `readConsent()` con el **`configHash` actual de tu banner ya inyectado**. Un consentimiento dado antes de un cambio del banner es inválido — el hash hace que tu servidor lo trate como pendiente de re-consentimiento:

```js title="handler.js"
import { readConsent } from '@flowconsent/server-sdk'

export async function handler(request) {
  const consent = readConsent(request, {
    // Hash de la config publicada: una elección anterior a un
    // cambio del banner es inválida (re-consentimiento).
    expectedConfigHash: 'TU_CONFIG_HASH_ACTUAL',
  })
  if (consent.can('analytics')) {
    // GA4 Measurement Protocol, analítica propia…
  }
  if (consent.can('marketing')) {
    // sincronización CRM, audiencias…
  }
}
```

Consulta la [guía del SDK de servidor](/es/doc/server-sdk) para la API completa.

### Webhook de consentimiento, probado con un evento firmado real

Añade la URL de un endpoint y el asistente crea un **webhook de consentimiento** con un secreto de firma en formato `whsec_…`.

> [!IMPORTANT]
> El secreto de firma se muestra **una sola vez**, al crearlo. Guárdalo de inmediato — lo necesitarás para verificar la firma de cada entrega.

Después haz clic en **Enviar test firmado**: FlowConsent entrega un evento `consent.test` real y firmado a tu endpoint y reporta el resultado — entregado, con el estado HTTP y el tiempo de respuesta, o el detalle del fallo. Tu integración queda confirmada por una entrega real, no por una marca verde de buena fe.

## Próximos pasos

- [Verificar la conformidad en continuo](/es/doc/compliance-verification)
- [Personalizar el banner](/es/doc/banner-customization)
- [Instalación rápida desde cero](/es/doc/quick-install)
