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:
- Un stub de Consent Mode inline que registra valores por defecto
deniedpara todas las señales de Google. - El cargador de FlowConsent, que muestra el banner y aplica la elección del visitante.
<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>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.tsxque 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.
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.
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.
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:
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 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_….
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.