# Installer FlowConsent sur WooCommerce

Sur WooCommerce, collez l'extrait FlowConsent dans WPCode (Code Snippets → Header & Footer), maîtrisez les pixels des extensions et testez le paiement.

> Canonical: https://www.flowconsent.com/fr/doc/install-woocommerce
> Last updated: 2026-10-01
Une boutique WooCommerce est un site WordPress : l'extrait de code FlowConsent se colle au même endroit, en haut du champ **Header** de l'extension WPCode (**Code Snippets → Header & Footer**) ou dans un thème enfant. Comptez quatre étapes : coller l'extrait, reprendre la main sur les pixels injectés par les extensions marketing de la boutique, régler le cache, puis tester le tunnel de commande. Le piège principal : Google Analytics for WooCommerce, Meta for WooCommerce et les autres extensions de suivi ajoutent leurs propres scripts, souvent au-dessus de la bannière.

## Avant de commencer

- Un compte sur [app.flowconsent.com](https://app.flowconsent.com) (offre Free gratuite, sans carte bancaire, jusqu'à 25 000 sessions par mois).
- Une bannière créée puis déployée : via votre compte Cloudflare sur l'offre Free ([guide Cloudflare](/fr/doc/cloudflare-deployment)), en un clic sur Pro et Enterprise.
- Un accès administrateur à WordPress, et idéalement une copie de préproduction de la boutique pour tester le paiement.

## Étape 1 : coller l'extrait de code dans le head

Copiez l'extrait depuis **Builder → Déploiement → Intégration**, onglet **HTML / No-code** :

```html title="Code Snippets → Header & Footer → Header"
<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://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"></script>
```

Installez l'extension **WPCode** depuis le menu **Extensions**, ouvrez **Code Snippets → Header & Footer** et collez l'extrait tout en haut du champ **Header**, au-dessus de tout autre code, puis enregistrez. Alternative sans extension : un thème enfant qui accroche l'extrait au hook `wp_head` avec la priorité `1`. Les deux méthodes sont détaillées dans le [guide WordPress](/fr/doc/install-wordpress).

L'extrait doit précéder tout script de suivi (Google Analytics, Meta Pixel, Google Tag Manager…) : tout ce qui est placé au-dessus échappe au blocage préalable.

## Étape 2 : reprendre la main sur les extensions marketing

C'est l'étape qui distingue une boutique d'un site vitrine. Chaque extension de suivi injecte son script à sa manière.

**Google Analytics for WooCommerce** (réglages dans **WooCommerce → Settings → Integration → Google Analytics**) charge `gtag` et définit ses propres valeurs par défaut de Consent Mode, qui peuvent prendre le pas sur celles de FlowConsent. Deux options :

- garder l'extension pour ses événements e-commerce, vérifier avec l'assistant d'installation que son `gtag` arrive bien **sous** le stub FlowConsent, et, en cas de conflit de valeurs par défaut, les ajuster avec le filtre `woocommerce_ga_gtag_consent_modes` documenté par WooCommerce ;
- ou retirer l'identifiant de mesure de l'extension et déclarer Google Analytics dans **Builder → Services**, pour que la bannière ne le charge qu'après consentement.

**Meta for WooCommerce** (anciennement Facebook for WooCommerce, réglages dans **Marketing → Facebook**) injecte le Meta Pixel automatiquement. Pour que le pixel ne soit chargé que par la bannière, désactivez celui de l'extension avec le filtre officiel `facebook_for_woocommerce_integration_pixel_enabled` (dans le `functions.php` du thème enfant ou un snippet PHP WPCode), puis déclarez Meta Pixel dans **Builder → Services**.

```php title="functions.php du thème enfant"
add_filter( 'facebook_for_woocommerce_integration_pixel_enabled', '__return_false' );
```

> [!WARNING]
> Meta for WooCommerce active aussi l'**API Conversions** de Meta, qui envoie les événements depuis votre serveur. Aucune bannière, quelle qu'elle soit, ne peut bloquer un envoi serveur à serveur : décidez de son usage avec votre DPO, à part de la bannière.

Même logique pour les autres pixels publicitaires (Google Ads, TikTok, Pinterest…) : retirez l'identifiant des réglages de l'extension et déclarez le service dans **Builder → Services**.

## Étape 3 : cache et minification

WooCommerce demande d'exclure du cache les pages **Panier**, **Commande** et **Mon compte**, et déconseille la minification JavaScript avec certaines extensions de cache. Pour la bannière, excluez aussi des options « différer » ou « retarder le JavaScript » le stub Consent Mode (`FlowConsent Loader`) et le domaine `consent.flowconsent.com`. Videz ensuite tous les caches (extension, hébergeur, CDN).

## Étape 4 : tester le tunnel de paiement

> [!NOTE]
> Les passerelles de paiement chargent leurs propres scripts sur la page de commande. Après l'installation, passez une commande test en ayant **refusé** les cookies, sur une préproduction ou avec le mode test de votre passerelle : le panier, la commande et la confirmation doivent fonctionner normalement, et la bannière ne doit masquer aucun champ de paiement sur mobile.

## Vérifier l'installation

1. En navigation privée, la bannière s'affiche sur l'accueil, une fiche produit et le panier.
2. Dans l'onglet **Réseau**, aucune requête vers Google, Meta ou un autre tiers avant **Accepter**.
3. L'**assistant d'installation** (**Builder → Intégration**) contrôle la page en ligne : loader présent avec votre code de licence, stub Consent Mode présent, stub placé avant chaque tag Google ([guide](/fr/doc/setup-wizard)).
4. Un **scan de refus** depuis l'onglet **Conformité** confirme que rien ne part après un refus ([vérification de conformité](/fr/doc/compliance-verification)).

## Le faire depuis votre agent IA (MCP)

Le serveur MCP officiel de FlowConsent, `https://mcp.flowconsent.com`, fonctionne avec Claude, ChatGPT ou tout client MCP, avec une connexion OAuth 2.0 sur votre compte FlowConsent (pas de clé d'API). Votre agent récupère l'extrait et les instructions de placement (`get_banner_snippet`, `get_setup_instructions`), vérifie l'installation par un vrai scan (`verify_consent_compliance`) et peut poser une surveillance récurrente (`monitor_compliance`), utile pour repérer un pixel réactivé par une mise à jour d'extension. Il ne modifie pas votre boutique : le collage et les réglages d'extensions restent de votre côté.

Exemple de demande : « Donne-moi l'extrait de code de ma bannière pour ma boutique WooCommerce et vérifie qu'il est bien installé sur https://maboutique.fr ».

Voir le [guide du serveur MCP](/fr/doc/mcp-server) et la page [FlowConsent MCP](/fr/mcp).

## Questions fréquentes

### Est-ce que je perds mes données e-commerce en refusant les cookies ?

Les visiteurs qui refusent ne déposent pas de cookies de mesure. Avec Consent Mode v2, les balises Google envoient alors des signaux sans cookies, que Google utilise pour sa modélisation des conversions. Détails dans le [guide Consent Mode](/fr/doc/google-consent-mode).

### Puis-je charger FlowConsent via Google Tag Manager ?

Non : chargée depuis GTM, la bannière arrive trop tard pour le blocage préalable. Placez l'extrait dans le `<head>` au-dessus du conteneur GTM ; les balises non Google demandent les « Paramètres supplémentaires de consentement ».

### Une mise à jour d'extension peut-elle réactiver un pixel ?

Oui, c'est fréquent après un changement de version ou une reconfiguration. Une surveillance récurrente depuis l'onglet **Conformité**, ou via `monitor_compliance` en MCP, le détecte sans attendre un audit manuel.

### Faut-il une configuration différente pour une boutique headless ?

Oui. Si la vitrine est une application React, Vue ou Next.js qui navigue côté client, activez le **mode SPA** dans les réglages de la bannière ([guide Next.js](/fr/doc/nextjs-integration)).