Browser-SDK installieren

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

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

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

<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>:

<!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.

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

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.

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

Schritt 2: Installation prüfen

Nach dem Deployment Ihres Snippets:

Öffnen Sie Ihre Website in einem Browser
Öffnen Sie die DevTools, Tab Network
Filtern Sie nach /ct
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.

Nächste Schritte

SDK-Konfiguration

Alle init-Optionen und was jeder Schalter steuert.

Benutzerdefinierte Ereignisse

Bestimmte Nutzeraktionen aus Ihrem JavaScript-Code erfassen.

SPA-Frameworks

Einrichtung für React, Next.js und Vue.

Prüfen und debuggen

Bestätigen, dass Ereignisse korrekt empfangen werden.

Überblick

Browser-SDK

Serverseitig

API-Referenz

Ressourcen

Schritt 1: Snippet aus dem Dashboard kopieren

Option A: Direkt im HTML einbinden (empfohlen)

Option B: Google Tag Manager

Schritt 2: Installation prüfen

Nächste Schritte

SDK-Konfiguration

Benutzerdefinierte Ereignisse

SPA-Frameworks

Prüfen und debuggen

​Schritt 1: Snippet aus dem Dashboard kopieren

​Option A: Direkt im HTML einbinden (empfohlen)

​Option B: Google Tag Manager

​Schritt 2: Installation prüfen

​Nächste Schritte

SDK-Konfiguration

Benutzerdefinierte Ereignisse

SPA-Frameworks

Prüfen und debuggen

Schritt 1: Snippet aus dem Dashboard kopieren

Option A: Direkt im HTML einbinden (empfohlen)

Option B: Google Tag Manager

Schritt 2: Installation prüfen

Nächste Schritte