> ## Documentation Index
> Fetch the complete documentation index at: https://docs.komerza.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Analytics SDK

> Bringen Sie Besucheranalysen zurück in Ihr Komerza-Dashboard mit unserem leichtgewichtigen Analytics-Skript

## Überblick

Das Komerza Analytics SDK ermöglicht es Ihnen, das Besucherverhalten auf Ihrer benutzerdefinierten Website zu verfolgen und die Analysen direkt in Ihrem Komerza-Dashboard anzuzeigen. Mit nur einem einzelnen Script-Tag erhalten Sie umfassende Besuchereinblicke, einschließlich Seitenaufrufe, Benutzersitzungen, Konversionsverfolgung und mehr.

<Card title="Analysen anzeigen" icon="chart-line" href="https://dashboard.komerza.com/">
  Greifen Sie auf Ihre Besucheranalysen im Komerza-Dashboard zu
</Card>

## Funktionen

<CardGroup cols={2}>
  <Card title="DSGVO-konform" icon="shield-check">
    Automatisches Cookie-Consent-Management mit essenziellen/optionalen Cookies
  </Card>

  <Card title="Keine Konfiguration" icon="bolt">
    Fügen Sie einfach das Skript mit Ihrer Shop-ID ein – keine komplexe
    Einrichtung erforderlich
  </Card>

  <Card title="Echtzeit-Analysen" icon="chart-line">
    Sehen Sie Besucherdaten sofort in Ihrem Komerza-Dashboard
  </Card>

  <Card title="Datenschutzfokussiert" icon="eye-slash">
    Respektiert die Privatsphäre der Nutzer mit transparentem Cookie-Consent und Shadow DOM-Isolierung
  </Card>
</CardGroup>

## Schnellstart

### Einzelskript-Integration

Fügen Sie das Analytics-Skript mit Ihrer Shop-ID zu Ihren HTML-Seiten hinzu:

```html theme={null}
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mein Shop</title>
  </head>
  <body>
    <!-- Ihr Website-Inhalt -->
    <h1>Willkommen in meinem Shop</h1>

    <!-- Komerza Analytics - Vor dem schließenden </body>-Tag hinzufügen -->
    <script
      data-store-id="your-store-id"
      src="https://cdn.komerza.com/ka.min.js"
    ></script>
  </body>
</html>
```

<Note>
  Ersetzen Sie `your-store-id` durch Ihre tatsächliche Komerza-Shop-ID aus Ihrem
  Dashboard. Das Analytics-Skript verwaltet die DSGVO-Konformität automatisch,
  indem es Besuchern einen Cookie-Consent-Hinweis anzeigt.
</Note>

## Cookie-Consent-Ablauf

Wenn ein Besucher Ihre Website zum ersten Mal besucht:

1. **Sofortiger Seitenaufruf**: Ein IP-only-Seitenaufruf wird sofort erfasst (DSGVO-konform)
2. **Anzeige des Cookie-Hinweises**: Ein DSGVO-konformer Hinweis erscheint unten rechts
3. **20-Sekunden-Timer**: Ohne Reaktion wird das Tracking „Nur Erforderliche" automatisch aktiviert
4. **Nutzerauswahl**: Der Besucher kann jederzeit „Nur Erforderliche" oder „Alle akzeptieren" wählen
5. **Präferenzspeicherung**: Die Auswahl wird für zukünftige Besuche gespeichert (Cookie-Ablauf nach 1 Stunde)

<Tabs>
  <Tab title="Nur Erforderliche">
    * Zufällige Besucher-ID (kein Fingerprinting)
    * Gerätetyp und Browsername
    * Referrer-Informationen
    * Sitzungsverfolgung (Ablauf nach 1 Stunde)
    * Kein sitzungsübergreifendes Tracking
  </Tab>

  <Tab title="Alle akzeptieren">
    * Browser-Fingerprint für stabile Besucher-ID
    * Vollständiges Analytics-Tracking
    * Erweiterte Einblicke in das Nutzerverhalten
    * Konversions- und Zielverfolgung
    * Detaillierte Leistungsmetriken
    * Sitzungsübergreifendes Tracking
  </Tab>
</Tabs>

## Implementierungsbeispiele

### React/SPA-Integration

Für Single-Page-Applications fügen Sie das Skript einmal in Ihre Haupt-HTML-Datei ein:

```html theme={null}
<!-- public/index.html (React) oder Haupt-HTML-Datei -->
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mein React-Shop</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Komerza Analytics -->
    <script
      data-store-id="your-store-id"
      src="https://cdn.komerza.com/ka.min.js"
    ></script>
  </body>
</html>
```

## Manuelles Consent-Management

Wenn Sie den Consent programmatisch steuern möchten (z. B. benutzerdefiniertes Cookie-Banner):

```html theme={null}
<script
  data-store-id="your-store-id"
  src="https://cdn.komerza.com/ka.min.js"
></script>

<script>
  // Nur erforderliches Tracking akzeptieren
  function acceptRequired() {
    window.KomerzaAnalytics.acceptRequired();
  }

  // Vollständiges Analytics-Tracking akzeptieren
  function acceptAll() {
    window.KomerzaAnalytics.acceptOptional();
  }

  document
    .getElementById("accept-required")
    .addEventListener("click", acceptRequired);
  document.getElementById("accept-all").addEventListener("click", acceptAll);
</script>
```

## Datenschutzfunktionen

* **Zufällige Besucher-IDs**: Nur-erforderliches-Tracking verwendet kryptografisch zufällige IDs (kein Fingerprinting)
* **Kurze Ablaufzeit**: Alle Cookies laufen nach 1 Stunde ab
* **Kein domainübergreifendes Tracking**: Cookies sind websitespezifisch
* **IP-Anonymisierung**: Wesentliche Seitenaufrufe sind nur IP, keine Besucher-ID

## Content Security Policy (CSP)

Für Websites mit CSP-Headern fügen Sie Folgendes zu Ihrer CSP-Konfiguration hinzu:

```http theme={null}
Content-Security-Policy:
  script-src 'self' https://cdn.komerza.com;
  connect-src 'self' https://m-api.komerza.com;
```

<Note>
  Das Analytics-Skript benötigt keine CSP-Nonce-Integration, da es von einem
  vertrauenswürdigen CDN geladen wird. Stellen Sie jedoch sicher, dass
  `https://cdn.komerza.com` in Ihrer `script-src`-Direktive und
  `https://m-api.komerza.com` in Ihrer `connect-src`-Direktive enthalten ist.
</Note>

## Ihre Analysen anzeigen

Sobald das Skript installiert ist und Besucher auf Ihre Website kommen:

1. **Dashboard-Anmeldung**: Besuchen Sie [dashboard.komerza.com](https://dashboard.komerza.com)
2. **Zu Besucheranalysen navigieren**: Klicken Sie auf den Abschnitt „Besucher"
3. **Einblicke ansehen**: Sehen Sie Echtzeit- und historische Besucherdaten
4. **Leistung verfolgen**: Überwachen Sie Konversionsraten und Nutzerverhalten

## Ad-Blocker-Kompatibilität

Das Analytics-Skript verwendet den Dateinamen `ka.min.js`, der im Vergleich zu Dateinamen mit „analytics" oder „tracking" weniger wahrscheinlich von Ad-Blockern blockiert wird. Einige aggressive Blocker können Analytics-Anfragen jedoch trotzdem blockieren.

## Support

<CardGroup cols={2}>
  <Card title="Analytics-Dashboard" icon="chart-line" href="https://dashboard.komerza.com/">
    Greifen Sie auf Ihre Besucheranalysen und Berichte zu
  </Card>
</CardGroup>
