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

Cómo el asistente de instalación de FlowConsent verifica cada paso en su sitio real: fragmento, escaneo de rechazo, vigilancia semanal y lado 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 su banner. Hace más que darle un fragmento de código: cada paso se **verifica contra su sitio real**. El asistente no dice «pegue este código», descarga su 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ñada el fragmento de código para su plataforma

La tarjeta de integración ofrece el fragmento de código 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 - COLÓCALO ANTES de cualquier otro script en el <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://SU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=SU_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**: pegue el fragmento de código en *Site settings → Custom code → Head code* y publique. Retire cualquier Measurement ID de Google Analytics de *Site settings → Apps & Integrations*: Webflow lo inyecta **por encima** de su 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, active además el modo SPA en la pestaña Settings: consulte la [guía de integración con Next.js](/es/doc/nextjs-integration).

## Paso 2: Verifique su instalación

Introduzca la URL de su página y haga 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 su código de licencia**: si se encuentra un cargador con un código *distinto*, el asistente le indica cuál;
- el **stub de Consent Mode está presente**: si falta, probablemente pegó 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 sus **ajustes de Webflow**, no la combata con código personalizado: retire el Measurement ID de *Site settings → Apps & Integrations* y deje que el banner cargue Google Analytics en su lugar.

## Paso 3: Lance 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 su 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 a 60 segundos) y muestra la misma insignia de veredicto que la página de Conformidad (Conforme, Advertencias 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: Active la vigilancia semanal

El último paso no cierra la instalación, la mantiene probada. Haga clic en **Vigilar esta página cada semana**: el mismo escaneo de rechazo se relanza cada semana y le 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.

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

El asistente genera un fragmento de código `readConsent()` con el **`configHash` actual de su banner ya inyectado**. Un consentimiento dado antes de un cambio del banner es inválido: el hash hace que su 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: 'SU_CONFIG_HASH_ACTUAL',
  })
  if (consent.can('analytics')) {
    // GA4 Measurement Protocol, analítica propia…
  }
  if (consent.can('marketing')) {
    // sincronización CRM, audiencias…
  }
}
```

Consulte 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ñada 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árdelo de inmediato: lo necesitará para verificar la firma de cada entrega.

Después haga clic en **Enviar test firmado**: FlowConsent entrega un evento `consent.test` real y firmado a su endpoint y reporta el resultado, entregado, con el estado HTTP y el tiempo de respuesta, o el detalle del fallo. Su 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)