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

# Ereignisse

> Definieren Sie benutzerdefinierte Tracking-Ereignisse — Klicks, Formulare, Scroll-Trigger, Sichtbarkeit — und legen Sie Conversion-Ziele fest

## Ueberblick

Der Ereignisse-Tab ermoeglicht es Ihnen, Tracking-Ereignisse zu definieren, um bestimmte Besucheraktionen auf Ihrer Website zu erfassen. Verfolgen Sie Schaltflaechenklicks, Formulareinreichungen, Scroll-Meilensteine, Elementsichtbarkeit oder loesen Sie benutzerdefinierte Ereignisse aus Ihrem eigenen Code aus. Jedes Ereignis kann als **Conversion-Ziel** markiert werden, um die Kampagneneffektivitaet zu messen.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/revolai/iNw1SuV7xncLWRFk/images/tracker-events-light.png?fit=max&auto=format&n=iNw1SuV7xncLWRFk&q=85&s=a2ff0a5cbcd29ff22b3471bcca775edd" alt="Ereignisse-Tab" width="2874" height="1558" data-path="images/tracker-events-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/revolai/iNw1SuV7xncLWRFk/images/tracker-events-dark.png?fit=max&auto=format&n=iNw1SuV7xncLWRFk&q=85&s=fdf74d88094e9f6afd40cb31abdf720a" alt="Ereignisse-Tab" width="2873" height="1553" data-path="images/tracker-events-dark.png" />
</Frame>

## Ereignisliste

Die Ereignistabelle zeigt alle definierten Ereignisse mit wichtigen Metriken:

| Spalte           | Beschreibung                                                                      |
| ---------------- | --------------------------------------------------------------------------------- |
| **Name**         | Ereignisname                                                                      |
| **Typ**          | Ereignistyp (Klick, Scroll, Formulareinreichung, Sichtbarkeit, Benutzerdefiniert) |
| **Ausloesungen** | Gesamtanzahl der Ausloesungen dieses Ereignisses                                  |
| **Conversion**   | Ob dieses Ereignis als Conversion-Ziel zaehlt                                     |
| **Status**       | Aktiv oder inaktiv                                                                |
| **Aktionen**     | Ereignis bearbeiten oder loeschen                                                 |

### Filter

Filtern Sie die Ereignisliste nach:

| Filter         | Beschreibung                                  |
| -------------- | --------------------------------------------- |
| **Typ**        | Nur Ereignisse eines bestimmten Typs anzeigen |
| **Conversion** | Nur Conversion-Ziel-Ereignisse anzeigen       |
| **Status**     | Aktive oder inaktive Ereignisse anzeigen      |
| **Suche**      | Ereignisse nach Name suchen                   |

***

## Ein Ereignis erstellen

Klicken Sie auf **Ereignis erstellen**, um ein neues Tracking-Ereignis zu definieren. Jedes Ereignis erfordert:

| Feld                | Erforderlich | Beschreibung                                                                                   |
| ------------------- | ------------ | ---------------------------------------------------------------------------------------------- |
| **Name**            | Ja           | Ereignisname zur Identifizierung (z.B. "CTA-Button-Klick", "Kontaktformular-Einreichung")      |
| **Typ**             | Ja           | Wie das Ereignis ausgeloest wird (siehe Ereignistypen unten)                                   |
| **CSS-Selektor**    | Abhaengig    | CSS-Selektor fuer das Zielelement (erforderlich fuer Klick, Formulareinreichung, Sichtbarkeit) |
| **Seiten-URL**      | Nein         | Das Ereignis nur auf einer bestimmten Seite ausloesen                                          |
| **Conversion-Ziel** | Nein         | Umschalten, um dieses Ereignis als Conversion in der Analyse zu zaehlen                        |

***

## Ereignistypen

Jeder Ereignistyp verfolgt eine andere Art der Besucherinteraktion. Das Tracker-Skript verarbeitet alle automatischen Typen — keine Programmierung erforderlich.

### Klick

Wird ausgeloest, wenn ein Besucher auf ein Element **klickt**, das dem CSS-Selektor entspricht.

| Einstellung      | Beschreibung                                                                |
| ---------------- | --------------------------------------------------------------------------- |
| **CSS-Selektor** | Zielelement-Selektor (z.B. `#cta-button`, `.buy-now`, `a[href="/contact"]`) |
| **Seiten-URL**   | Optional — Tracking auf eine bestimmte Seite beschraenken                   |

**Was erfasst wird:**

* Textinhalt des Elements (erste 100 Zeichen)
* Tag-Name des Elements (`button`, `a`, `div`, usw.)
* Uebereinstimmender CSS-Selektor
* Aktuelle Seiten-URL

<Tip>
  Verwenden Sie die Browser-Entwicklertools, um den richtigen CSS-Selektor zu finden. Klicken Sie mit der rechten Maustaste auf das Element → **Untersuchen** → klicken Sie mit der rechten Maustaste auf das HTML-Tag → **Kopieren** → **Selektor kopieren**.
</Tip>

**Beispiele fuer CSS-Selektoren:**

```css theme={null}
/* Schaltflaeche nach ID */
#buy-now-btn

/* Alle Schaltflaechen mit einer bestimmten Klasse */
.add-to-cart

/* Link zu einer bestimmten Seite */
a[href="/pricing"]

/* Schaltflaeche innerhalb eines bestimmten Abschnitts */
.hero-section .cta-button

/* Jedes Element mit einem Datenattribut */
[data-action="subscribe"]
```

### Scroll (Sichtbarkeit)

Wird ausgeloest, wenn der Besucher an einem bestimmten Element auf der Seite **vorbeiscrollt**. Verwendet einen IntersectionObserver, um zu erkennen, wann das Element in den Viewport eintritt.

| Einstellung              | Beschreibung                                                            |
| ------------------------ | ----------------------------------------------------------------------- |
| **CSS-Selektor**         | Zu beobachtendes Zielelement (z.B. `#pricing-section`, `.testimonials`) |
| **Scroll-Schwellenwert** | Prozentsatz des Elements, der sichtbar sein muss (Standard: 50%)        |

**Anwendungsfaelle:**

* Verfolgen Sie, wie viele Besucher Ihren Preisbereich sehen
* Messen Sie das Engagement mit bestimmten Inhaltsbloecken
* Erkennen Sie, ob Besucher das Ende einer langen Seite erreichen

<Note>
  Jedes Scroll-Ereignis wird **nur einmal** pro Sitzung und Element ausgeloest — auch wenn der Besucher mehrmals daran vorbeiscrollt. Dies verhindert aufgeblaehte Zaehler.
</Note>

### Formulareinreichung

Wird ausgeloest, wenn ein Besucher ein Formular **einreicht**, das dem CSS-Selektor entspricht.

| Einstellung        | Beschreibung                                                                      |
| ------------------ | --------------------------------------------------------------------------------- |
| **CSS-Selektor**   | Zielformularelement (z.B. `#contact-form`, `.signup-form`)                        |
| **Formularfelder** | Optional — Erlaubnisliste von Feldnamen zur Erfassung (z.B. `email, phone, name`) |

**Was erfasst wird:**

* Werte aus `<input>`-, `<select>`- und `<textarea>`-Feldern
* Feldnamen und ihre Werte (bis zu 500 Zeichen pro Feld)
* Passwort- und versteckte Felder werden **automatisch ausgeschlossen**

<Warning>
  Standardmaessig werden alle sichtbaren Formularfelder erfasst. Verwenden Sie die **Formularfelder**-Erlaubnisliste, um die Datenerfassung auf bestimmte Felder zu beschraenken und die Erfassung sensibler Informationen zu vermeiden.
</Warning>

### Elementsichtbarkeit

Wird ausgeloest, wenn ein bestimmtes Element im Browser-Viewport **sichtbar wird**. Aehnlich wie Scroll, aber fokussiert auf die Verfolgung, ob ein bestimmtes UI-Element gesehen wurde.

| Einstellung      | Beschreibung                                         |
| ---------------- | ---------------------------------------------------- |
| **CSS-Selektor** | Zielelement (z.B. `.promo-banner`, `#special-offer`) |

**Anwendungsfaelle:**

* Impressionen von Werbebannern verfolgen
* Sichtbarkeit wichtiger CTAs messen
* Erkennen, ob dynamisch geladene Inhalte gesehen werden (funktioniert mit SPAs)

<Note>
  Der Tracker verwendet einen MutationObserver, um dynamisch hinzugefuegte Elemente zu ueberwachen. Wenn das Zielelement nach dem Seitenladen durch JavaScript gerendert wird (React, Vue usw.), wird es trotzdem erkannt.
</Note>

### Benutzerdefiniert (Manuell)

Wird ausgeloest, wenn Sie die **JavaScript-API** aus Ihrem eigenen Code aufrufen. Dies ist der flexibelste Ereignistyp — Sie steuern genau, wann und mit welchen Daten das Ereignis ausgeloest wird.

| Einstellung | Beschreibung                                                                               |
| ----------- | ------------------------------------------------------------------------------------------ |
| **Name**    | Ereignisname, der mit dem in `RevolTracker.track()` verwendeten Namen uebereinstimmen muss |

Benutzerdefinierte Ereignisse werden im Abschnitt [Benutzerdefinierte Ereignisse API](#custom-events-api) unten im Detail behandelt.

***

## Conversion-Ziel

Jedes Ereignis kann als **Conversion-Ziel** markiert werden, indem Sie den Schalter aktivieren. Wenn aktiviert:

* Das Ereignis wird in der **Conversions**-KPI-Karte auf dem Dashboard gezaehlt
* Es wird zur Berechnung der **Conversion-Rate** in der Kampagnen-Performance-Tabelle verwendet
* Sitzungen mit diesem Ereignis werden in der Sitzungsdetailansicht hervorgehoben
* Das Ereignis erscheint in Conversion-Trichtern und Berichten

### Was ist ein gutes Conversion-Ziel?

<AccordionGroup>
  <Accordion title="Lead-Generierung">
    Markieren Sie **Formulareinreichungen** als Conversions — Kontaktformulare, Angebotsanfragen, Newsletter-Anmeldungen. Dies sind klare Indikatoren dafuer, dass ein Besucher zum Lead geworden ist.
  </Accordion>

  <Accordion title="E-Commerce">
    Markieren Sie **In den Warenkorb**- oder **Kauf abgeschlossen**-benutzerdefinierte Ereignisse als Conversions. Verfolgen Sie den gesamten Trichter vom Seitenaufruf bis zum Kauf.
  </Accordion>

  <Accordion title="Engagement">
    Markieren Sie **Ueber Preisbereich gescrollt**- oder **Video abgespielt**-Ereignisse als Mikro-Conversions. Diese zeigen starkes Interesse auch ohne Formulareinreichung an.
  </Accordion>

  <Accordion title="Anrufe und Chats">
    Markieren Sie **Telefonnummer-Klick**- oder **Chat-Widget geoeffnet**-Ereignisse als Conversions. Diese zeigen die Absicht zur direkten Kontaktaufnahme.
  </Accordion>
</AccordionGroup>

<Tip>
  Sie koennen mehrere Conversion-Ziele gleichzeitig aktiv haben. Die Dashboard-Conversions-KPI zaehlt eindeutige Sitzungen mit **mindestens einem** Conversion-Ereignis — eine Sitzung, die 3 Conversion-Ereignisse ausloest, zaehlt also als 1 Conversion.
</Tip>

***

## Benutzerdefinierte Ereignisse API

Benutzerdefinierte Ereignisse geben Ihnen die volle Kontrolle ueber das Ereignis-Tracking aus Ihrem eigenen JavaScript-Code. Verwenden Sie sie, wenn automatisches Tracking (Klicks, Formulare, Sichtbarkeit) nicht ausreicht — fuer dynamische Interaktionen, mehrstufige Prozesse oder geschaeftsspezifische Aktionen.

### Grundlegende Verwendung

```javascript theme={null}
// Einfaches Ereignis — keine zusaetzlichen Daten
RevolTracker.track('button_clicked');

// Ereignis mit benutzerdefinierten Daten
RevolTracker.track('item_added_to_cart', {
    item_id: 'SKU-12345',
    item_name: 'Running Shoes',
    price: 89.99,
    currency: 'USD'
});
```

### API-Referenz

```javascript theme={null}
RevolTracker.track(eventName, data)
```

| Parameter   | Typ      | Erforderlich | Beschreibung                                                                                                                                   |
| ----------- | -------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `eventName` | `string` | Ja           | Ereignisname — muss mit dem im Ereignisse-Tab definierten Namen uebereinstimmen, wenn Sie es mit einer Ereignisdefinition verknuepfen moechten |
| `data`      | `object` | Nein         | Benutzerdefinierte Nutzlast — beliebige JSON-serialisierbare Daten (Objekte, Arrays, Zeichenketten, Zahlen)                                    |

**Automatisch erfasst** (Sie muessen diese nicht uebergeben):

* Aktuelle Seiten-URL
* Sitzungs-ID
* Zeitstempel
* Unternehmens-ID

### E-Commerce-Beispiele

Verfolgen Sie den gesamten Einkaufstrichter:

```javascript theme={null}
// Produkt angesehen
RevolTracker.track('product_viewed', {
    product_id: 'SKU-12345',
    product_name: 'Running Shoes Pro',
    category: 'Footwear',
    price: 89.99
});

// In den Warenkorb gelegt
RevolTracker.track('add_to_cart', {
    product_id: 'SKU-12345',
    quantity: 1,
    price: 89.99
});

// Checkout gestartet
RevolTracker.track('checkout_started', {
    cart_total: 89.99,
    items_count: 1
});

// Kauf abgeschlossen
RevolTracker.track('purchase_completed', {
    order_id: 'ORD-9876',
    total: 89.99,
    currency: 'USD',
    items: [
        { id: 'SKU-12345', name: 'Running Shoes Pro', qty: 1, price: 89.99 }
    ]
});
```

### In-den-Warenkorb-Integration

Ein vollstaendiges Beispiel fuer die Integration benutzerdefinierter Ereignisse mit einer "In den Warenkorb"-Schaltflaeche:

```html theme={null}
<button class="add-to-cart-btn"
        data-product-id="SKU-12345"
        data-product-name="Running Shoes Pro"
        data-price="89.99">
    Add to Cart
</button>

<script>
document.querySelectorAll('.add-to-cart-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        // Ihre bestehende Warenkorb-Logik
        addItemToCart(this.dataset.productId);

        // Das Ereignis in Revol verfolgen
        RevolTracker.track('add_to_cart', {
            product_id: this.dataset.productId,
            product_name: this.dataset.productName,
            price: parseFloat(this.dataset.price)
        });
    });
});
</script>
```

### Lead-Formular-Beispiel

Formulareinreichungen mit Felddaten verfolgen:

```html theme={null}
<form id="contact-form">
    <input name="name" type="text" placeholder="Your name">
    <input name="email" type="email" placeholder="Email">
    <input name="phone" type="tel" placeholder="Phone">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
    var formData = new FormData(this);

    RevolTracker.track('contact_form_submitted', {
        name: formData.get('name'),
        email: formData.get('email'),
        has_phone: !!formData.get('phone'),
        message_length: (formData.get('message') || '').length
    });
});
</script>
```

### SPA / React-Beispiel

Fuer Single-Page-Anwendungen loesen Sie Ereignisse bei Routenwechseln oder Komponenteninteraktionen aus:

```javascript theme={null}
// React — Seitenaufruf bei Routenwechsel verfolgen
useEffect(() => {
    RevolTracker.track('page_view', {
        page: location.pathname,
        title: document.title
    });
}, [location.pathname]);

// React — Schaltflaechenklick verfolgen
function handlePricingClick(plan) {
    RevolTracker.track('pricing_plan_selected', {
        plan: plan,
        page: '/pricing'
    });
}
```

### Wie Ereignisse gesendet werden

Ereignisse werden zur Leistungsoptimierung **gepuffert und gebuendelt** gesendet:

1. Jeder `RevolTracker.track()`-Aufruf fuegt das Ereignis einem internen Puffer hinzu
2. Alle **5 Sekunden** werden alle gepufferten Ereignisse in einer einzigen Anfrage an den Server gesendet
3. Beim **Verlassen der Seite** werden verbleibende Ereignisse ueber `sendBeacon()` fuer Zuverlaessigkeit gesendet
4. Maximal **50 Ereignisse** pro Batch — ueberschuessige Ereignisse werden verworfen

<Note>
  Sie muessen keine Ereignisdefinition im Dashboard erstellen, damit benutzerdefinierte Ereignisse aufgezeichnet werden. Undefinierte benutzerdefinierte Ereignisse werden trotzdem mit ihren Daten gespeichert — sie haben jedoch keine Ausloesungszahl in der Ereignisliste. Fuer vollstaendiges Tracking erstellen Sie eine passende Ereignisdefinition mit demselben Namen.
</Note>

***

## Analysieren Sie Ihre Website mit Claude Code

Wenn Sie sich nicht sicher sind, welche Elemente Sie verfolgen sollen, koennen Sie **Claude Code** verwenden, um Ihre Website zu analysieren und ein optimales Ereignis-Tracking-Setup vorzuschlagen.

<Accordion title="Prompt fuer Website-Analyse">
  ```text theme={null}
  # Anleitung: CSS-Klassen fuer Website-Event-Tracking generieren

  ## Kontext

  Ich verwende das Revol-Tracking-System, das Benutzeraktionen auf
  Websites ueber CSS-Selektoren verfolgt. Der Tracker wird mit einem
  einzigen Skript eingebettet und hoert automatisch auf Ereignisse bei
  Elementen, die den angegebenen CSS-Selektoren entsprechen. Es ist
  kein zusaetzlicher JS-Code auf der Website noetig (ausser fuer
  AJAX-Formulare, siehe unten).

  ## Wie das Event-Tracking funktioniert

  Das System unterstuetzt 5 Ereignistypen:

  - click — Element-Klick. Verwendet
    document.addEventListener('click') + e.target.closest(css_selector),
    Delegation auf document in der Capture-Phase.
  - form_submit — Formularuebermittlung. Verwendet
    document.addEventListener('submit') + prueft css_selector
    am <form>-Tag.
  - scroll — Scrollen zum Element. IntersectionObserver mit Threshold
    (0-100%), wird einmal pro Sitzung ausgeloest.
  - visibility — Element im Viewport sichtbar. IntersectionObserver,
    einmalig.
  - custom — manueller JS-Aufruf: RevolTracker.track('Name', {data})

  ## Deine Aufgabe

  ### Schritt 1: Alle Website-Seiten analysieren

  Gehe alle HTML/Template-Dateien durch und finde:

  1. Buttons (Buttons/Links) — CTAs, Navigation, Aktionen
  2. Telefonnummern — <a href="tel:...">, Textbloecke mit Nummern
  3. E-Mail-Links — <a href="mailto:...">
  4. Messenger — Telegram, Viber, WhatsApp Links
  5. Formulare — Kontakt, Anfragen, Abonnements, Bestellungen
  6. Klickbare Bloecke — Karten, Banner, Abschnitte mit Links
  7. Konversions-Elemente — Warenkorb, Kasse, Registrierung

  ### Schritt 2: CSS-Klassen fuer Tracking hinzufuegen

  Fuer jedes gefundene Element eine CSS-Klasse mit rv- Praefix:

  Namenskonvention: rv-{typ}-{bereich}-{aktion}
  Typen: btn, link, form, block, scroll

  Beispiele:
  - rv-btn-hero-cta — CTA-Button im Hero-Bereich
  - rv-btn-header-phone — Telefon-Klick im Header
  - rv-btn-footer-phone — Telefon-Klick im Footer
  - rv-btn-pricing-order — Bestell-Button auf Preisseite
  - rv-btn-header-telegram — Telegram-Klick im Header
  - rv-form-contact — Kontaktformular
  - rv-form-callback — Rueckruf-Formular
  - rv-block-services-card — Klick auf Dienstleistungskarte
  - rv-link-nav-about — Navigationslink "Ueber uns"
  - rv-scroll-testimonials — Scrollen zu Bewertungen

  Regeln:
  - rv-* Klasse wird ZUSAETZLICH zu bestehenden Klassen hinzugefuegt
  - Ein Element = eine rv- Klasse
  - Klasse sollte pro Seite eindeutig sein (oder bewusst geteilt
    fuer gleichartige Elemente, z.B. alle Dienstleistungskarten)

  ### Schritt 3: Formular-Regeln

  Die rv-form-* Klasse kommt auf das <form>-Tag, NICHT auf den Submit-Button:

    Richtig:
    <form class="contact-form rv-form-contact" action="/submit">
      <input name="phone" type="tel">
      <button type="submit">Absenden</button>
    </form>

    Falsch:
    <form class="contact-form">
      <button class="rv-form-contact" type="submit">Absenden</button>
    </form>

  AJAX-Formulare (ohne nativen Submit):

  Wenn ein Formular ueber JS (fetch, axios, $.ajax) ohne natives
  Submit-Event gesendet wird, erfasst der Tracker es NICHT. Anzeichen:
  - e.preventDefault() + fetch/axios/$.ajax im Handler
  - Formular ohne action oder mit action="javascript:void(0)"
  - Button hat type="button" statt type="submit"

  Fuer solche Formulare einen manuellen Aufruf neben dem AJAX:
    RevolTracker.track('Kontaktformular', { form: 'contact' });

  In der Ereignistabelle solche als Typ custom statt form_submit
  markieren und angeben, dass ein manueller Aufruf noetig ist.

  ### Schritt 4: Ereignistabelle erstellen

  Ereignisnamen auf Deutsch. Tabellenformat:

  # | Ereignisname | CSS-Selektor | Typ | Konversion? | Seite | Beschreibung

  Beispiel:
  1 | Hero CTA Klick | .rv-btn-hero-cta | click | Ja | Startseite | Haupt-CTA im Hero-Banner
  2 | Telefon Header Klick | .rv-btn-header-phone | click | Ja | Alle | Telefonnummer-Klick im Header
  3 | Telefon Footer Klick | .rv-btn-footer-phone | click | Ja | Alle | Telefonnummer-Klick im Footer
  4 | Telegram Klick | .rv-btn-header-telegram | click | Ja | Alle | Telegram-Link-Klick
  5 | Kontaktformular | .rv-form-contact | form_submit | Ja | Kontakt | Kontaktformular gesendet
  6 | Rueckruf-Formular | .rv-form-callback | form_submit | Ja | Startseite | "Rufen Sie mich an"
  7 | Dienstleistungskarte Klick | .rv-block-services-card | click | Nein | Dienste | Klick auf Karte
  8 | Nav — Ueber uns | .rv-link-nav-about | click | Nein | Alle | Zu "Ueber uns" navigieren
  9 | Scroll zu Bewertungen | .rv-scroll-testimonials | scroll (80%) | Nein | Startseite | Zu Bewertungen gescrollt
  10 | Anfrageformular (AJAX) | — | custom | Ja | Dienste | AJAX, braucht RevolTracker.track()

  ### Was als Konversion zaehlt

  Ja — Konversion:
  - Telefon-Klick (<a href="tel:...">)
  - E-Mail-Klick (<a href="mailto:...">)
  - Messenger-Klicks (Telegram, Viber, WhatsApp)
  - Jede Formularuebermittlung (Anfrage, Bestellung, Kontakt)
  - CTA-Button-Klicks ("Bestellen", "Kaufen", "Buchen")

  Nein — keine Konversion:
  - Navigationslinks
  - Klicks auf Infobloecke/-karten (wenn kein CTA)
  - Scroll/Visibility-Ereignisse
  - Social-Media-Klicks (wenn kein CTA)

  ## Antwortformat

  1. Dateiaenderungen — welche rv-* Klassen hinzufuegen, mit Diff
  2. Ereignistabelle — vollstaendige Liste mit allen Spalten
  3. AJAX-Formulare — separat auflisten, die manuellen
     RevolTracker.track() Aufruf benoetigen, mit fertigem Code

  Meine Website ist: [URL EINFUEGEN]
  Geschaeftstyp: [z.B. E-Commerce, SaaS, Dienstleistungen, Agentur]
  Haupt-Konversionsaktion: [z.B. Formular, Kauf, Buchung]
  ```
</Accordion>