# Instalar FlowConsent en WooCommerce

En WooCommerce, el fragmento de FlowConsent va en WPCode (Code Snippets → Header & Footer); luego se controlan los píxeles y se prueba el pago.

> Canonical: https://www.flowconsent.com/es/doc/install-woocommerce
> Last updated: 2026-10-01
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](https://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](/es/doc/cloudflare-deployment)), 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**:

```html title="Code Snippets → Header & Footer → Header"
<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](/es/doc/install-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**.

```php title="functions.php del tema hijo"
add_filter( 'facebook_for_woocommerce_integration_pixel_enabled', '__return_false' );
```

> [!WARNING]
> Meta for WooCommerce también activa la **API de conversiones** de Meta, que envía los eventos desde el servidor. Ningún banner, sea cual sea, puede bloquear un envío de servidor a servidor: su uso debe decidirse con el delegado de protección de datos, al margen del banner.

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

> [!NOTE]
> Las pasarelas de pago cargan sus propios scripts en la página de pago. Tras la instalación, conviene hacer un pedido de prueba con las cookies **rechazadas**, en preproducción o en el modo de prueba de la pasarela: carrito, pago y confirmación deben funcionar con normalidad, y el banner no debe tapar ningún campo de pago en el móvil.

## 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](/es/doc/setup-wizard)).
4. Un **escaneo de rechazo** desde la pestaña **Conformidad** confirma que nada se dispara tras un rechazo ([verificación de conformidad](/es/doc/compliance-verification)).

## 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](/es/doc/mcp-server) y la página [FlowConsent MCP](/es/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](/es/doc/google-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](/es/doc/nextjs-integration)).