Instalar FlowConsent en WooCommerce

Una tienda WooCommerce es un sitio WordPress: el fragmento de código de FlowConsent va en el mismo lugar, al principio del campo Header del plugin WPCode (Code Snippets → Header & Footer) o en un tema hijo. Son cuatro pasos: pegar el fragmento, recuperar el control de los píxeles que inyectan las extensiones de marketing de la tienda, configurar la caché y probar el proceso de compra. La trampa principal: Google Analytics for WooCommerce, Meta for WooCommerce y otras extensiones de seguimiento añaden sus propios scripts, a menudo por encima del banner.

Antes de empezar

• Una cuenta en app.flowconsent.com (plan Free gratuito, sin tarjeta de crédito, hasta 25.000 sesiones al mes).
• Un banner creado y desplegado: a través de la propia cuenta de Cloudflare en el plan Free (guía de Cloudflare), con un clic en Pro y Enterprise.
• Acceso de administrador a WordPress e, idealmente, una copia de preproducción de la tienda para probar los pagos.

Paso 1: pegar el fragmento de código en el head

El fragmento se copia desde Builder → Despliegue → Integración, pestaña HTML / No-code:

<script>
// FlowConsent Loader - COLOCAR 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>

Instalar el plugin WPCode desde el menú Plugins, abrir Code Snippets → Header & Footer, pegar el fragmento al principio del campo Header, por encima de cualquier otro código, y guardar. Alternativa sin plugin: un tema hijo que engancha el fragmento a wp_head con prioridad 1. Ambos métodos se explican en la guía de WordPress.

El fragmento debe ir antes de cualquier script de seguimiento (Google Analytics, Meta Pixel, Google Tag Manager…): todo lo que quede por encima escapa al bloqueo previo.

Paso 2: controlar las extensiones de marketing

Cada extensión de seguimiento inyecta su script a su manera.

Google Analytics for WooCommerce (ajustes en WooCommerce → Settings → Integration → Google Analytics) carga gtag y define sus propios valores por defecto de Consent Mode, que pueden prevalecer sobre los de FlowConsent. Dos opciones:

• conservar la extensión por sus eventos de comercio electrónico, comprobar con el asistente de instalación que su gtag queda debajo del stub de FlowConsent y, si los valores por defecto chocan, ajustarlos con el filtro woocommerce_ga_gtag_consent_modes documentado por WooCommerce;
• o quitar el ID de medición de la extensión y declarar Google Analytics en Builder → Servicios, para que el banner solo lo cargue tras el consentimiento.

Meta for WooCommerce (antes Facebook for WooCommerce, ajustes en Marketing → Facebook) inyecta el Meta Pixel automáticamente. Para que el píxel solo lo cargue el banner, se desactiva el de la extensión con el filtro oficial facebook_for_woocommerce_integration_pixel_enabled (en el functions.php del tema hijo o en un snippet PHP de WPCode) y se declara Meta Pixel en Builder → Servicios.

add_filter( 'facebook_for_woocommerce_integration_pixel_enabled', '__return_false' );

La misma lógica vale para otros píxeles publicitarios (Google Ads, TikTok, Pinterest…): quitar el ID de los ajustes de la extensión y declarar el servicio en Builder → Servicios.

Paso 3: caché y minificación

WooCommerce pide excluir de la caché las páginas Carrito, Finalizar compra y Mi cuenta, y desaconseja la minificación de JavaScript con algunos plugins de caché. Para el banner, hay que excluir además el stub de Consent Mode (FlowConsent Loader) y el dominio consent.flowconsent.com de las opciones «diferir» o «retrasar JavaScript». Después, vaciar todas las cachés (plugin, alojamiento, CDN).

Paso 4: probar el proceso de pago

Verificar la instalación

1. En una ventana privada, el banner aparece en la portada, en una ficha de producto y en el carrito.
2. En la pestaña Red, ninguna petición a Google, Meta u otros terceros antes de Aceptar.
3. El asistente de instalación (Builder → Integración) comprueba la página publicada: loader presente con el código de licencia correcto, stub de Consent Mode presente, stub antes de cada etiqueta de Google (guía).
4. Un escaneo de rechazo desde la pestaña Conformidad confirma que nada se dispara tras un rechazo (verificación de conformidad).

Hacerlo desde un agente de IA (MCP)

El servidor MCP oficial de FlowConsent, https://mcp.flowconsent.com, funciona con Claude, ChatGPT o cualquier cliente MCP, con conexión OAuth 2.0 a la cuenta de FlowConsent (sin clave de API). El agente obtiene el fragmento y las instrucciones de colocación (get_banner_snippet, get_setup_instructions), verifica la instalación con un escaneo real (verify_consent_compliance) y puede programar una vigilancia periódica (monitor_compliance). No modifica la tienda: pegar el fragmento y cambiar los ajustes de las extensiones sigue siendo manual.

Ejemplo de petición: «Deme el fragmento de código de mi banner para mi tienda WooCommerce y compruebe que está bien instalado en https://mitienda.es».

Ver la guía del servidor MCP y la página FlowConsent MCP.

Preguntas frecuentes

¿Se pierden datos de comercio electrónico cuando se rechazan las cookies?

Los visitantes que rechazan no reciben cookies de medición. Con Consent Mode v2, las etiquetas de Google envían entonces señales sin cookies que Google usa para modelar conversiones. Más detalles en la guía de Consent Mode.

¿Se puede cargar FlowConsent a través de Google Tag Manager?

No: cargado desde GTM, el banner llega demasiado tarde para el bloqueo previo. El fragmento va en el <head>, por encima del contenedor de GTM; las etiquetas que no son de Google requieren la «Configuración de consentimiento adicional».

¿Puede la actualización de una extensión reactivar un píxel?

Sí, ocurre a menudo tras un cambio de versión o una reconfiguración. Una vigilancia periódica desde la pestaña Conformidad, o con monitor_compliance por MCP, lo detecta sin esperar a una auditoría manual.

¿Una tienda headless necesita otra configuración?

Sí. Si la tienda es una aplicación React, Vue o Next.js con navegación en el cliente, hay que activar el modo SPA en los ajustes del banner (guía de Next.js).