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

# Browser-SDK installieren

> Das Scanova-Tracking-Snippet direkt im HTML oder über den Google Tag Manager einbinden. Funktioniert mit jeder Website, jedem CMS und jedem Frontend-Framework.

Das SDK ist ein einzelnes `<script>`-Tag. Sie binden es einmal im `<head>` Ihrer Website ein, und es lädt asynchron — ohne Auswirkung auf die Performance der Seite.

## Schritt 1: Snippet aus dem Dashboard kopieren

1. Öffnen Sie im Scanova-Dashboard **Analysen → Konversionsverfolgung**
2. Wählen Sie **Conversion-Tracking einrichten**
3. Wählen Sie bei Ihrer Website **Tracking-Einrichtung**, auf dem Tab **Skript einbetten**
4. Aktivieren Sie die gewünschten Auto-Tracking-Schalter
5. Kopieren Sie das erzeugte Snippet

Das Snippet sieht so aus, mit Ihrer bereits eingesetzten `site_id`:

```html theme={null}
<script>
(function(w,d,s,o,f,js,fjs){
  w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
  js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
})(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

scanova('init', 'YOUR_SITE_ID', {
  autoPageview: true,
  autoClicks: true,
  autoForms: true,
  autoScroll: true
});
</script>
```

## Option A: Direkt im HTML einbinden (empfohlen)

Fügen Sie das Snippet im `<head>`-Tag Ihrer Website ein, **vor dem schließenden `</head>`**:

```html theme={null}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Page</title>

  <!-- Scanova Conversion Tracking -->
  <script>
  (function(w,d,s,o,f,js,fjs){
    w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

  scanova('init', 'YOUR_SITE_ID', {
    autoPageview: true,
    autoClicks: true,
    autoForms: true,
    autoScroll: true
  });
  </script>
</head>
<body>
  <!-- your content -->
</body>
</html>
```

**Wo Sie das Snippet auf gängigen Plattformen einfügen:**

| Plattform    | Wo das Snippet eingefügt wird                                     |
| ------------ | ----------------------------------------------------------------- |
| WordPress    | Appearance → Theme Editor → `header.php`, vor `</head>`           |
| Shopify      | Online Store → Themes → Edit Code → `theme.liquid`, vor `</head>` |
| Webflow      | Project Settings → Custom Code → Head Code                        |
| Squarespace  | Settings → Advanced → Code Injection → Header                     |
| Wix          | Settings → Custom Code → Add Code → Head                          |
| Eigenes HTML | Direkt im `<head>` Ihrer HTML-Vorlage                             |

## Option B: Google Tag Manager

Nutzen Sie GTM, wenn Sie alle Tags über die GTM-Konsole verwalten und das HTML Ihrer Website nicht direkt bearbeiten können.

1. Öffnen Sie Ihren GTM-Container
2. Klicken Sie auf **Tags → New**
3. Wählen Sie **Custom HTML** als Tag-Typ
4. Fügen Sie das vollständige Scanova-Snippet ein
5. Setzen Sie den Trigger auf **All Pages**
6. Benennen Sie das Tag (z. B. „Scanova Conversion Tracking") und klicken Sie auf **Save**
7. **Submit** und **Publish** Sie den Container

<Warning>
  Binden Sie das Snippet nicht gleichzeitig direkt im HTML und über GTM auf derselben Seite ein. Das lädt das SDK zweimal und sendet doppelte Ereignisse.
</Warning>

**GTM-Tipps:**

* Lassen Sie das Tag so früh wie möglich auslösen — verwenden Sie die Trigger „DOM Ready" oder „Page View", nicht „Window Loaded"
* Ist Ihre Website eine Single-Page-App (SPA), lesen Sie vor der Konfiguration der GTM-Trigger den [Leitfaden für SPAs und Frameworks](/de/conversion-tracking/browser/spa-frameworks)

## Schritt 2: Installation prüfen

Nach dem Deployment Ihres Snippets:

1. Öffnen Sie Ihre Website in einem Browser
2. Öffnen Sie die DevTools, Tab **Network**
3. Filtern Sie nach `/ct`
4. Laden Sie die Seite neu

Sie sollten eine `POST`-Anfrage an `https://t.scanova.io/ct` mit dem Status `200` sehen.

Eine vollständige Prüfliste finden Sie unter [Prüfen und debuggen](/de/conversion-tracking/browser/verify).

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="SDK-Konfiguration" icon="sliders" href="/de/conversion-tracking/browser/sdk-configuration">
    Alle init-Optionen und was jeder Schalter steuert.
  </Card>

  <Card title="Benutzerdefinierte Ereignisse" icon="sparkles" href="/de/conversion-tracking/browser/custom-events">
    Bestimmte Nutzeraktionen aus Ihrem JavaScript-Code erfassen.
  </Card>

  <Card title="SPA-Frameworks" icon="react" href="/de/conversion-tracking/browser/spa-frameworks">
    Einrichtung für React, Next.js und Vue.
  </Card>

  <Card title="Prüfen und debuggen" icon="bug" href="/de/conversion-tracking/browser/verify">
    Bestätigen, dass Ereignisse korrekt empfangen werden.
  </Card>
</CardGroup>
