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.

​

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

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.

Beispiele fuer CSS-Selektoren:

/* 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

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

​

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

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.

​

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)

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.

​

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

Lead-Generierung

Markieren Sie Formulareinreichungen als Conversions — Kontaktformulare, Angebotsanfragen, Newsletter-Anmeldungen. Dies sind klare Indikatoren dafuer, dass ein Besucher zum Lead geworden ist.

E-Commerce

Markieren Sie In den Warenkorb- oder Kauf abgeschlossen-benutzerdefinierte Ereignisse als Conversions. Verfolgen Sie den gesamten Trichter vom Seitenaufruf bis zum Kauf.

Engagement

Markieren Sie Ueber Preisbereich gescrollt- oder Video abgespielt-Ereignisse als Mikro-Conversions. Diese zeigen starkes Interesse auch ohne Formulareinreichung an.

Anrufe und Chats

Markieren Sie Telefonnummer-Klick- oder Chat-Widget geoeffnet-Ereignisse als Conversions. Diese zeigen die Absicht zur direkten Kontaktaufnahme.

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.

---

​

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

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

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:

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

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

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

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

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.

---

​

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.

Prompt fuer Website-Analyse

# 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]