Tracking & Events Dokumentation

Alles, was Sie brauchen, um ClearAnalytics auf Ihrer Website zu installieren und Seitenaufrufe, benutzerdefinierte Events, Klickziele und E-Commerce-Transaktionen zu verfolgen.

Übersicht

ClearAnalytics bietet zwei Tracking-Skript-Varianten. Wählen Sie die passende: ein minimales Skript für grundlegende Seitenaufruf-Analytics oder ein umfangreiches Skript für benutzerdefinierte Events, Klickziele und E-Commerce-Tracking.

Light Script (ca.js)

Das leichtestmögliche Tracking-Skript. Perfekt für Blogs, Landingpages und Websites, die nur Seitenaufruf-Analytics benötigen.

ca.js < 1 KB

Automatische Seitenaufruf-Erfassung
Sitzungsdauer und Absprungrate
UTM-Kampagnenparameter erfassen
Unterstützung für Single-Page-Anwendungen

Full Script (ca-events.js)

Alles aus dem Light Script, plus benutzerdefinierte Events, Klickziel-Tracking, GA4 dataLayer-Abfangen und volle E-Commerce-Unterstützung.

ca-events.js < 2 KB

Alles aus dem Light Script
Benutzerdefiniertes Event-Tracking via window.ca()
Klickziel-Tracking via data-ca-goal
GA4 dataLayer-Integration
Vollständiges E-Commerce Event-Tracking

Installation

Fügen Sie ein einzelnes Script-Tag zu Ihrer Website hinzu. Keine npm-Pakete, keine Build-Tools, keine Konfigurationsdateien. Das Skript lädt asynchron und hat keinerlei Auswirkung auf die Seitenleistung.

HTML — Light Script

Fügen Sie dies in den <head> oder ans Ende von <body> auf jeder Seite ein. Erfasst automatisch Seitenaufrufe, Sitzungsdauer und UTM-Parameter.

<script defer src="https://clearanalytics.eu/js/ca.js"></script>

HTML — Full Script

Verwenden Sie diese Variante, wenn Sie benutzerdefinierte Events, Klickziele oder E-Commerce-Tracking benötigen.

<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>

HTML — Full Script mit DataLayer

Fügen Sie das data-ca-datalayer Attribut hinzu, um GA4 dataLayer-Events automatisch abzufangen, einschließlich aller E-Commerce-Events.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

WordPress

Fügen Sie das Script-Tag über die functions.php Ihres Themes hinzu oder verwenden Sie ein Header/Footer-Injektions-Plugin.

// functions.php
add_action('wp_head', function () {
    echo '<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>';
});

React / Next.js

Verwenden Sie die Next.js Script-Komponente für optimales Laden. Das Skript funktioniert mit jedem React-Framework.

// app/layout.tsx  (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://clearanalytics.eu/js/ca-events.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue / Nuxt

Fügen Sie das Skript über Ihre Nuxt-Konfiguration oder direkt in Ihrem HTML-Template für einfache Vue-Apps hinzu.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://clearanalytics.eu/js/ca-events.js',
          defer: true,
        },
      ],
    },
  },
});

Google Tag Manager

Sie können das Skript auch über Google Tag Manager mit einem Custom HTML-Tag bereitstellen.

Tag Type:   Custom HTML
Trigger:    All Pages

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Bei Verwendung von GTM mit dem data-ca-datalayer Attribut erfasst ClearAnalytics automatisch alle dataLayer-Events, die von Ihren bestehenden GTM-Tags gesendet werden.

Benutzerdefinierte Events

Verfolgen Sie jede Benutzerinteraktion, indem Sie benutzerdefinierte Events mit optionalen Metadaten senden. Benutzerdefinierte Events erscheinen in Ihrem Dashboard und können als Zieltrigger verwendet werden.

Erfordert das Full Script (ca-events.js).

API Signature

window.ca(eventName, properties?);

Parameter	Typ	Beschreibung
`eventName`	string	Ein beschreibender Name für das Event (z.B. 'signup', 'file_download').
`properties`	object	Optionales Objekt mit zusätzlichen Metadaten. Wird als JSON serialisiert.

Beispiele

// Eine Anmeldung mit Plan-Info verfolgen

window.ca('signup', { plan: 'pro' });

// Einen Dateidownload verfolgen

window.ca('file_download', {
  file_name: 'whitepaper.pdf',
  file_type: 'pdf',
});

// Eine Videowiedergabe verfolgen

window.ca('video_play', {
  video_title: 'Product Demo',
  duration: 120,
});

// Eine interne Suche verfolgen

window.ca('search', { query: 'privacy analytics' });

Klickziel-Tracking

Verfolgen Sie Button- und Link-Klicks ohne JavaScript zu schreiben. Fügen Sie ein data-ca-goal Attribut zu jedem HTML-Element hinzu und der Klick wird automatisch erfasst.

Erfordert das Full Script (ca-events.js).

Verwendung

Fügen Sie data-ca-goal="goal-name" zu jedem klickbaren Element hinzu. Der Attributwert wird zum Zielbezeichner in Ihrem Dashboard.

<button data-ca-goal="cta-signup">Sign Up</button>

<a href="/pricing" data-ca-goal="pricing-click">View Pricing</a>

<form data-ca-goal="contact-form-submit">
  <!-- The goal fires when any element inside is clicked -->
  <button type="submit">Send</button>
</form>

So funktioniert es

Das Skript verwendet Event-Delegation auf dem Dokument, um Klicks effizient zu erkennen:

Ein Klick-Event wird irgendwo auf der Seite ausgelöst.
Das Skript durchläuft den DOM-Baum vom angeklickten Element aufwärts und sucht nach einem data-ca-goal Attribut.
Wenn gefunden, sendet es ein Klick-Event mit dem Zielnamen als Selektor.

Klickziele anzeigen

Klickziel-Events erscheinen auf der Ziele-Seite in Ihrem Dashboard. Erstellen Sie ein Ziel vom Typ "Klick" und verknüpfen Sie es mit dem data-ca-goal Wert, den Sie in Ihrem HTML verwendet haben.

GA4 DataLayer-Integration

Wenn Ihre Website bereits Events an den Google Analytics dataLayer sendet, kann ClearAnalytics diese Events automatisch abfangen. Dies ist der einfachste Migrationspfad von GA4.

Erfordert das Full Script (ca-events.js).

DataLayer-Abfangen aktivieren

Fügen Sie das data-ca-datalayer Attribut zum Script-Tag hinzu. Dieser Opt-in-Ansatz stellt sicher, dass die Funktion nur aktiviert wird, wenn Sie sie explizit einschalten.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

So funktioniert es

Wenn aktiviert, fängt das Skript alle dataLayer.push() Aufrufe ab:

Erkannte E-Commerce-Events (purchase, add_to_cart usw.) werden als E-Commerce-Events weitergeleitet.
Alle anderen benutzerdefinierten Events werden als generische benutzerdefinierte Events weitergeleitet.
Interne GTM-Events (gtm.js, gtm.dom, gtm.load usw.) werden automatisch herausgefiltert.
Vorhandene dataLayer-Einträge werden beim Laden der Seite verarbeitet; zukünftige Pushes werden in Echtzeit abgefangen.

Beispiel

// These dataLayer pushes are automatically captured
dataLayer.push({
  event: 'form_submit',
  form_id: 'contact',
  form_name: 'Contact Form',
});

dataLayer.push({
  event: 'video_start',
  video_title: 'Product Demo',
  video_duration: 120,
});

Ignorierte Events

Die folgenden internen GTM-Events werden automatisch ignoriert und erscheinen nicht in Ihrem Dashboard:

// These GTM internal events are automatically filtered out:
gtm.js, gtm.dom, gtm.load, gtm.click, gtm.linkClick, gtm.scrollDepth

E-Commerce-Tracking

Verfolgen Sie die gesamte Customer Journey vom Produktbrowsing bis zum Kauf und zur Rückerstattung. ClearAnalytics unterstützt alle 14 standardmäßigen E-Commerce-Events im gleichen dataLayer-Format wie GA4.

Erfordert das Full Script (ca-events.js) mit dem data-ca-datalayer Attribut.

Alle E-Commerce-Events verwenden das GA4-kompatible dataLayer.push() Format. Wenn Sie bereits GA4 E-Commerce-Tracking implementiert haben, erfasst ClearAnalytics diese Events automatisch ohne Codeänderungen.

Event	Beschreibung
`view_item_list`	Benutzer sieht eine Liste von Produkten oder Suchergebnissen.
`select_item`	Benutzer klickt auf ein Produkt in einer Liste.
`view_item`	Benutzer sieht eine Produktdetailseite.
`add_to_cart`	Benutzer fügt ein Produkt zum Warenkorb hinzu.
`remove_from_cart`	Benutzer entfernt ein Produkt aus dem Warenkorb.
`view_cart`	Benutzer sieht den Warenkorb.
`add_to_wishlist`	Benutzer fügt ein Produkt zur Wunschliste hinzu.
`begin_checkout`	Benutzer startet den Bestellvorgang.
`add_shipping_info`	Benutzer gibt Versandinformationen ein.
`add_payment_info`	Benutzer gibt Zahlungsinformationen ein.
`purchase`	Benutzer schließt einen Kauf ab.
`refund`	Eine vollständige oder teilweise Rückerstattung wird verarbeitet.
`view_promotion`	Benutzer sieht ein Werbebanner oder Angebot.
`select_promotion`	Benutzer klickt auf eine Aktion.

view_item_list

Lösen Sie dieses Event aus, wenn Benutzer eine Liste von Produkten sehen, z.B. eine Kategorieseite oder Suchergebnisse.

dataLayer.push({ ecommerce: null }); // Clear previous data
dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 89.99,
        index: 0,
      },
      {
        item_id: 'SKU-002',
        item_name: 'Trail Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 119.99,
        index: 1,
      },
    ],
  },
});

select_item

Lösen Sie dieses Event aus, wenn ein Benutzer auf ein bestimmtes Produkt in einer Liste klickt, um es anzusehen.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_item',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      index: 0,
    }],
  },
});

view_item

Lösen Sie dieses Event aus, wenn ein Benutzer auf einer Produktdetailseite landet.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      item_category: 'Footwear',
      item_variant: 'Blue / Size 42',
      price: 89.99,
      quantity: 1,
    }],
  },
});

add_to_cart

Lösen Sie dieses Event aus, wenn ein Benutzer ein oder mehrere Produkte zum Warenkorb hinzufügt.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      quantity: 1,
    }],
  },
});

remove_from_cart

Lösen Sie dieses Event aus, wenn ein Benutzer ein Produkt aus dem Warenkorb entfernt.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      quantity: 1,
    }],
  },
});

view_cart

Lösen Sie dieses Event aus, wenn ein Benutzer die Warenkorb-Seite aufruft.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_cart',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_to_wishlist

Lösen Sie dieses Event aus, wenn ein Benutzer ein Produkt für später auf der Wunschliste speichert.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_wishlist',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

begin_checkout

Lösen Sie dieses Event aus, wenn ein Benutzer den Bestellvorgang startet.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    coupon: 'SUMMER20',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_shipping_info

Lösen Sie dieses Event aus, wenn ein Benutzer während des Bestellvorgangs Versanddetails auswählt oder eingibt.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_shipping_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    shipping_tier: 'Express',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_payment_info

Lösen Sie dieses Event aus, wenn ein Benutzer während des Bestellvorgangs eine Zahlungsmethode auswählt oder eingibt.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_payment_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    payment_type: 'Credit Card',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

purchase

Lösen Sie dieses Event aus, wenn ein Kauf bestätigt wird. Fügen Sie transaction_id, value, currency, tax, shipping und das vollständige items-Array hinzu.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    affiliation: 'Online Store',
    value: 209.98,
    tax: 36.49,
    shipping: 5.99,
    currency: 'EUR',
    coupon: 'SUMMER20',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        item_variant: 'Blue / Size 42',
        price: 89.99,
        quantity: 1,
        coupon: '',
      },
      {
        item_id: 'SKU-003',
        item_name: 'Sports Watch',
        item_brand: 'FitTech',
        item_category: 'Electronics',
        item_variant: 'Black',
        price: 119.99,
        quantity: 1,
        coupon: '',
      },
    ],
  },
});

refund

Lösen Sie dieses Event aus, wenn eine Rückerstattung verarbeitet wird. Für eine vollständige Rückerstattung ist nur die transaction_id erforderlich. Für teilweise Rückerstattungen geben Sie die spezifischen Artikel an.

// Full refund
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
  },
});

// Partial refund (specific items)
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    items: [{
      item_id: 'SKU-001',
      quantity: 1,
    }],
  },
});

view_promotion

Lösen Sie dieses Event aus, wenn ein Werbebanner, Karussell oder Angebot für den Benutzer sichtbar wird.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      discount: 15.00,
    }],
  },
});

select_promotion

Lösen Sie dieses Event aus, wenn ein Benutzer auf eine Aktion klickt, um mehr zu erfahren oder das Angebot zu nutzen.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

Migration von Google Analytics

ClearAnalytics ist so konzipiert, dass es neben oder als Ersatz für Google Analytics funktioniert. Sie können beide Tools während der Migration parallel ohne Konflikte betreiben.

Beide Skripte parallel ausführen

Fügen Sie das ClearAnalytics-Skript neben Ihrem bestehenden Google Analytics-Tag hinzu. Beide Skripte tracken unabhängig voneinander ohne gegenseitige Beeinflussung.

<!-- Google Analytics (existing) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<!-- ClearAnalytics (add this line) -->
<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Funktionskompatibilität

So verhalten sich ClearAnalytics-Funktionen im Vergleich zu ihren Google Analytics-Entsprechungen:

Funktion	Google Analytics	ClearAnalytics
Seitenaufrufe	`gtag('event', 'page_view')`	Automatisch
Benutzerdefinierte Events	`gtag('event', ...)`	`window.ca('event')`
E-Commerce	`dataLayer.push()`	dataLayer-kompatibel
UTM-Kampagnen	Automatisch	Automatisch
Sitzungen	Cookie-basiert	Ohne Cookies

Migrationsschritte

Fügen Sie das ClearAnalytics-Skript neben Google Analytics zu Ihrer Website hinzu.
Aktivieren Sie die dataLayer-Abfangung mit data-ca-datalayer, um bestehende E-Commerce-Events zu erfassen.
Vergleichen Sie die Daten in beiden Dashboards über 2-4 Wochen, um die Genauigkeit zu überprüfen.
Wenn Sie zufrieden sind, entfernen Sie das Google Analytics-Skript und genießen Sie ein schnelleres, datenschutzorientiertes Setup.

SPA-Unterstützung

ClearAnalytics erkennt automatisch clientseitige Navigation in Single-Page-Anwendungen. Keine zusätzliche Konfiguration oder Router-Integration erforderlich.

So funktioniert es

Das Skript fängt Browser History API-Aufrufe ab, um Seitennavigation zu erkennen:

history.pushState() Aufrufe werden abgefangen und lösen einen neuen Seitenaufruf aus.
history.replaceState() Aufrufe werden abgefangen und lösen einen neuen Seitenaufruf aus.
popstate Events (Browser zurück/vorwärts) lösen einen neuen Seitenaufruf aus.

Kompatible Frameworks

Funktioniert sofort mit jedem Framework, das die History API für das Routing verwendet:

React Next.js Vue.js Nuxt Svelte SvelteKit Angular Remix Astro Inertia.js

Keine Router-Plugins, Lifecycle-Hooks oder manuelle Tracking-Aufrufe erforderlich. Fügen Sie einfach einmal das Script-Tag hinzu und jede Seitennavigation wird automatisch erfasst.

Datenschutz & Compliance

ClearAnalytics ist mit Datenschutz als Kern gebaut. Das Tracking-Skript erfasst nur anonyme, aggregierte Daten. Persönliche Informationen werden niemals gespeichert oder übertragen.

Keine Cookies

Das Skript setzt, liest oder ist nicht auf Browser-Cookies angewiesen. Kein Cookie-Einwilligungsbanner erforderlich.

Kein Fingerprinting

Wir erstellen niemals Browser-Fingerabdrücke. Keine Canvas-, WebGL-, Schriftarten- oder Audio-Fingerprinting-Techniken werden verwendet.

Keine IP-Speicherung

IP-Adressen der Besucher werden nur für anonymisiertes Hashing während der Anfrage verwendet. Sie werden niemals in der Datenbank gespeichert.

DSGVO-konform

Da keine personenbezogenen Daten erhoben werden, fällt ClearAnalytics nicht in den Anwendungsbereich der DSGVO-Einwilligungsanforderungen. Alle Daten verbleiben in der EU.

So anonymisieren wir Besucher

Um eindeutige Besucher zu zählen, ohne personenbezogene Daten zu speichern, verwenden wir einen täglich rotierenden anonymen Hash:

Die IP-Adresse und der User-Agent des Besuchers werden mit einem täglich rotierenden Salt kombiniert.
Diese Kombination wird mit einem Einweg-SHA-256-Algorithmus gehasht.
Das Salt rotiert alle 24 Stunden, was es unmöglich macht, Besucher über Tage hinweg zu verfolgen.
Die ursprüngliche IP-Adresse wird niemals gespeichert oder protokolliert.

Vom Skript erfasste Daten

Die folgenden nicht-personenbezogenen Datenfelder werden mit jedem Seitenaufruf-Event gesendet:

Feld	Zweck
`pathname`	Der URL-Pfad der besuchten Seite.
`referrer`	Die verweisende Seiten-URL, falls vorhanden.
`language`	Die Spracheinstellung des Browsers.
`screen_width / screen_height`	Bildschirmabmessungen zur Geräteklassifizierung.
`utm_*`	Kampagnen-Tracking-Parameter aus der URL.
`duration`	Auf der Seite verbrachte Zeit in Sekunden.

Da ClearAnalytics niemals personenbezogene Daten erfasst, benötigen Sie kein Cookie-Einwilligungsbanner, kein Datenschutz-Popup oder Opt-in-Mechanismus, um unser Tracking-Skript zu verwenden. Es ist sofort konform mit DSGVO, ePrivacy, PECR und CCPA.