Ereignisse - Revol

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:

Jeder RevolTracker.track()-Aufruf fuegt das Ereignis einem internen Puffer hinzu
Alle 5 Sekunden werden alle gepufferten Ereignisse in einer einzigen Anfrage an den Server gesendet
Beim Verlassen der Seite werden verbleibende Ereignisse ueber sendBeacon() fuer Zuverlaessigkeit gesendet
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

Analyze the website at [YOUR_WEBSITE_URL] and create a comprehensive
event tracking plan for Revol Tracker. I need you to:

1. Identify all interactive elements on the page:
   - CTA buttons (purchases, signups, demos)
   - Navigation links that indicate intent
   - Forms (contact, subscribe, login)
   - Media elements (video plays, image galleries)
   - Scroll landmarks (pricing section, testimonials, FAQ)

2. For each element, provide:
   - A descriptive event name (snake_case)
   - The event type (click, form_submit, scroll, visibility, custom)
   - The exact CSS selector
   - Whether it should be a conversion goal (and why)
   - Priority (high/medium/low) based on business impact

3. Generate ready-to-use event definitions that I can create
   in the Revol Tracker Events tab.

4. For any elements that need custom JavaScript tracking,
   provide the complete RevolTracker.track() code snippets.

5. Suggest a conversion funnel with 3-5 key stages
   (e.g., Visit → View Pricing → Submit Form → Start Chat).

Format the output as a table with columns:
Event Name | Type | CSS Selector | Conversion | Priority

My website is: [PASTE URL]
My business type is: [e.g., e-commerce, SaaS, service business, agency]
My main conversion action is: [e.g., form submission, purchase, demo request]

Tracker

​Ueberblick

​Ereignisliste

​Filter

​Ein Ereignis erstellen

​Ereignistypen

​Klick

​Scroll (Sichtbarkeit)

​Formulareinreichung

​Elementsichtbarkeit

​Benutzerdefiniert (Manuell)

​Conversion-Ziel

​Was ist ein gutes Conversion-Ziel?

​Benutzerdefinierte Ereignisse API

​Grundlegende Verwendung

​API-Referenz

​E-Commerce-Beispiele

​In-den-Warenkorb-Integration

​Lead-Formular-Beispiel

​SPA / React-Beispiel

​Wie Ereignisse gesendet werden

​Analysieren Sie Ihre Website mit Claude Code

Ueberblick

Ereignisliste

Filter

Ein Ereignis erstellen

Ereignistypen

Klick

Scroll (Sichtbarkeit)

Formulareinreichung

Elementsichtbarkeit

Benutzerdefiniert (Manuell)

Conversion-Ziel

Was ist ein gutes Conversion-Ziel?

Benutzerdefinierte Ereignisse API

Grundlegende Verwendung

API-Referenz

E-Commerce-Beispiele

In-den-Warenkorb-Integration

Lead-Formular-Beispiel

SPA / React-Beispiel

Wie Ereignisse gesendet werden

Analysieren Sie Ihre Website mit Claude Code