# FlowConsent auf WooCommerce installieren

Auf WooCommerce fügen Sie den FlowConsent-Code in WPCode ein (Code Snippets → Header & Footer), steuern die Pixel der Erweiterungen und testen den Checkout.

> Canonical: https://www.flowconsent.com/de/doc/install-woocommerce
> Last updated: 2026-10-01
Ein WooCommerce-Shop ist eine WordPress-Website: Der FlowConsent-Code gehört an dieselbe Stelle, ganz oben in das Feld **Header** des Plugins WPCode (**Code Snippets → Header & Footer**) oder in ein Child-Theme. Rechnen Sie mit vier Schritten: Code einfügen, die Kontrolle über die Pixel der Marketing-Erweiterungen zurückgewinnen, Cache konfigurieren und den Checkout testen. Die häufigste Falle: Google Analytics for WooCommerce, Meta for WooCommerce und andere Tracking-Erweiterungen fügen eigene Scripts ein, oft oberhalb des Banners.

## Bevor Sie beginnen

- Ein Konto auf [app.flowconsent.com](https://app.flowconsent.com) (Tarif Free kostenlos, ohne Kreditkarte, bis zu 25.000 Sitzungen pro Monat).
- Ein erstelltes und bereitgestelltes Banner: im Tarif Free über Ihr eigenes Cloudflare-Konto ([Cloudflare-Anleitung](/de/doc/cloudflare-deployment)), in Pro und Enterprise mit einem Klick.
- Administratorzugang zu WordPress und idealerweise eine Staging-Kopie des Shops, um Zahlungen zu testen.

## Schritt 1: Code in den Head einfügen

Kopieren Sie den Code aus **Builder → Deployment → Integration**, Tab **HTML / No-code**:

```html title="Code Snippets → Header & Footer → Header"
<script>
// FlowConsent Loader - VOR jedem anderen Script im <head> platzieren
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://IHR-LIZENZCODE.consent.flowconsent.com/cookie-manager.js?code=IHR_LIZENZCODE"></script>
```

Installieren Sie das Plugin **WPCode** über das Menü **Plugins**, öffnen Sie **Code Snippets → Header & Footer**, fügen Sie den Code ganz oben in das Feld **Header** ein, über allem anderen Code, und speichern Sie. Alternative ohne Plugin: ein Child-Theme, das den Code mit Priorität `1` an den Hook `wp_head` hängt. Beide Methoden beschreibt die [WordPress-Anleitung](/de/doc/install-wordpress).

Der Code muss vor jedem Tracking-Script stehen (Google Analytics, Meta Pixel, Google Tag Manager…): Alles, was darüber steht, entgeht der vorherigen Blockierung.

## Schritt 2: Marketing-Erweiterungen unter Kontrolle bringen

Hier unterscheidet sich ein Shop von einer reinen Unternehmenswebsite. Jede Tracking-Erweiterung fügt ihr Script auf eigene Weise ein.

**Google Analytics for WooCommerce** (Einstellungen unter **WooCommerce → Settings → Integration → Google Analytics**) lädt `gtag` und setzt eigene Consent-Mode-Standardwerte, die Vorrang vor denen von FlowConsent haben können. Zwei Optionen:

- die Erweiterung für ihre E-Commerce-Ereignisse behalten, mit dem Installationsassistenten prüfen, dass ihr `gtag` **unterhalb** des FlowConsent-Stubs landet, und bei kollidierenden Standardwerten den von WooCommerce dokumentierten Filter `woocommerce_ga_gtag_consent_modes` anpassen;
- oder die Mess-ID aus der Erweiterung entfernen und Google Analytics unter **Builder → Services** deklarieren, damit das Banner es erst nach der Einwilligung lädt.

**Meta for WooCommerce** (früher Facebook for WooCommerce, Einstellungen unter **Marketing → Facebook**) fügt das Meta Pixel automatisch ein. Damit das Pixel nur über das Banner geladen wird, deaktivieren Sie das Pixel der Erweiterung mit dem offiziellen Filter `facebook_for_woocommerce_integration_pixel_enabled` (in der `functions.php` des Child-Themes oder als PHP-Snippet in WPCode) und deklarieren Meta Pixel unter **Builder → Services**.

```php title="functions.php des Child-Themes"
add_filter( 'facebook_for_woocommerce_integration_pixel_enabled', '__return_false' );
```

> [!WARNING]
> Meta for WooCommerce aktiviert außerdem die **Conversions API** von Meta, die Ereignisse von Ihrem Server sendet. Kein Banner kann eine Server-zu-Server-Übertragung blockieren: Klären Sie deren Einsatz mit Ihrem Datenschutzbeauftragten, getrennt vom Banner.

Für andere Werbepixel (Google Ads, TikTok, Pinterest…) gilt dasselbe: ID aus den Einstellungen der Erweiterung entfernen und den Dienst unter **Builder → Services** deklarieren.

## Schritt 3: Cache und Minifizierung

WooCommerce verlangt, die Seiten **Warenkorb**, **Kasse** und **Mein Konto** vom Caching auszunehmen, und rät bei manchen Cache-Plugins von JavaScript-Minifizierung ab. Für das Banner nehmen Sie zusätzlich den Consent-Mode-Stub (`FlowConsent Loader`) und die Domain `consent.flowconsent.com` von Optionen wie „JavaScript aufschieben“ oder „verzögern“ aus. Leeren Sie danach alle Caches (Plugin, Hoster, CDN).

## Schritt 4: Checkout testen

> [!NOTE]
> Zahlungsanbieter laden auf der Kassenseite eigene Scripts. Geben Sie nach der Installation eine Testbestellung mit **abgelehnten** Cookies auf, im Staging oder im Testmodus Ihres Zahlungsanbieters: Warenkorb, Kasse und Bestätigung müssen normal funktionieren, und das Banner darf auf dem Smartphone kein Zahlungsfeld verdecken.

## Installation prüfen

1. In einem privaten Fenster erscheint das Banner auf der Startseite, einer Produktseite und im Warenkorb.
2. Im Tab **Netzwerk** keine Anfrage an Google, Meta oder andere Dritte vor **Akzeptieren**.
3. Der **Installationsassistent** (**Builder → Integration**) prüft die Live-Seite: Loader mit Ihrem Lizenzcode vorhanden, Consent-Mode-Stub vorhanden, Stub vor jedem Google-Tag ([Anleitung](/de/doc/setup-wizard)).
4. Ein **Ablehnungs-Scan** aus dem Tab **Compliance** bestätigt, dass nach einer Ablehnung nichts feuert ([Compliance-Prüfung](/de/doc/compliance-verification)).

## Mit Ihrem KI-Agenten erledigen (MCP)

Der offizielle MCP-Server von FlowConsent, `https://mcp.flowconsent.com`, funktioniert mit Claude, ChatGPT oder jedem MCP-Client, verbunden per OAuth 2.0 mit Ihrem FlowConsent-Konto (kein API-Schlüssel). Ihr Agent ruft den Code und die Platzierungsanweisungen ab (`get_banner_snippet`, `get_setup_instructions`), prüft die Installation mit einem echten Scan (`verify_consent_compliance`) und kann eine wiederkehrende Überwachung einrichten (`monitor_compliance`), praktisch, um ein durch ein Erweiterungs-Update reaktiviertes Pixel zu erkennen. Ihren Shop ändert er nicht: Einfügen und Erweiterungseinstellungen bleiben Ihre Aufgabe.

Beispielanfrage: „Gib mir den Code meines Banners für meinen WooCommerce-Shop und prüfe, ob er auf https://meinshop.de korrekt installiert ist.“

Siehe [MCP-Server-Anleitung](/de/doc/mcp-server) und die Seite [FlowConsent MCP](/de/mcp).

## Häufige Fragen

### Verliere ich E-Commerce-Daten, wenn Besucher Cookies ablehnen?

Besucher, die ablehnen, erhalten keine Mess-Cookies. Mit Consent Mode v2 senden Google-Tags dann cookielose Signale, die Google für die Conversion-Modellierung nutzt. Details in der [Consent-Mode-Anleitung](/de/doc/google-consent-mode).

### Kann ich FlowConsent über Google Tag Manager laden?

Nein: Über GTM geladen, kommt das Banner für die vorherige Blockierung zu spät. Platzieren Sie den Code im `<head>` oberhalb des GTM-Containers; Nicht-Google-Tags benötigen die „Zusätzlichen Einwilligungseinstellungen“.

### Kann ein Erweiterungs-Update ein Pixel wieder aktivieren?

Ja, das passiert häufig nach einem Versionswechsel oder einer Neukonfiguration. Eine wiederkehrende Überwachung aus dem Tab **Compliance** oder per `monitor_compliance` über MCP erkennt es, ohne auf ein manuelles Audit zu warten.

### Braucht ein Headless-Shop eine andere Konfiguration?

Ja. Ist Ihre Storefront eine React-, Vue- oder Next.js-App mit clientseitiger Navigation, aktivieren Sie den **SPA-Modus** in den Banner-Einstellungen ([Next.js-Anleitung](/de/doc/nextjs-integration)).