Custom Events - bchic analytics

Nachdem das Basis-Skript läuft, ist der nächste Schritt das “Tagging”. Damit erfasst du Benutzerinteraktionen wie Button-Klicks, Formular-Absendungen oder Käufe, die nicht automatisch getrackt werden können.

Grundregeln

Zeichenlimit: Event-Namen sind auf 50 Zeichen begrenzt.
Name erforderlich: Events können nicht ohne Namen gesendet werden.

Event-Typen verstehen

Wir unterscheiden zwei Arten von Events:

Property-Type Events

Einfaches Tracking. Sendet nur den Namen der Aktion.Beispiel: “Button geklickt”, “Menü geöffnet”.

Payload Events

Erweitertes Tracking. Sendet den Namen plus zusätzliche Daten (Kontext).Beispiel: “Produkt in Warenkorb” (inkl. Produktname, Preis, Kategorie).

Kritischer Datenschutz-Hinweis bchic ist so konzipiert, dass es komplett ohne personenbezogene Daten (PII) funktioniert.Verwende niemals folgende Daten in deinen Events:

E-Mail-Adressen
Namen oder Benutzernamen
Telefonnummern
IP-Adressen
User-IDs (in Klarschrift)

Erlaubt sind: Produkt-IDs, Kategorien, Preise, generische Status-Meldungen (z.B. “Plan: Pro”).

Methode 1: HTML-Attribute (No-Code)

Dies ist die einfachste Methode. Du fügst deinen HTML-Elementen lediglich Attribute hinzu – unser Skript erledigt den Rest automatisch.

Event-Typ wählen

Entscheide, ob du nur wissen willst, OB etwas passiert ist (Property), oder WAS genau passiert ist (Payload).

Attribute hinzufügen

Füge dem HTML-Element das data-bchic-event Attribut hinzu.

Einfaches Event
Event mit Daten (Payload)

Syntax: data-bchic-event="NAME"

<!-- Vorher -->
<button class="btn">Download</button>

<!-- Nachher -->
<button class="btn" data-bchic-event="whitepaper-download">
    Download
</button>

Syntax:

Name: data-bchic-event="NAME"
Daten: data-bchic-event-{KEY}="{VALUE}"

<button class="add-to-cart"
        data-bchic-event="add-to-cart"
        data-bchic-event-product="premium-plan"
        data-bchic-event-price="29.99">
    In den Warenkorb
</button>

Ergebnis: Sendet das Event add-to-cart mit den Daten { product: 'premium-plan', price: '29.99' }.

Hinweis: Daten über HTML-Attribute werden immer als Text (String) übertragen. Für echte Zahlen oder Booleans nutze Methode 2 (JavaScript).

Testen

Klicke auf das Element und schaue in dein bchic Dashboard. Das Event sollte sofort erscheinen. Falls nicht, lade das Dashboard einmal neu.

Methode 2: JavaScript (Für Entwickler)

Für volle Flexibilität oder dynamische Anwendungen nutzt du den Funktionsaufruf bchic(). Diese Methode ist ideal, wenn du Daten aus einer API hast oder Datentypen (Zahlen, Booleans) wichtig sind.

Einfach
Mit Payload

const button = document.getElementById('signup-button');

button.addEventListener('click', () => {
// Sendet nur den Namen
bchic('track', 'signup_click');
});

const button = document.querySelector('.add-to-cart');

button.addEventListener('click', () => {
bchic('track', 'add-to-cart', {
    product: 'premium-plan',
    price: 99.99,     // Wird als Zahl gespeichert
    currency: 'EUR',  // Wichtig für Umsatz-Statistiken
    is_featured: true // Wird als Boolean gespeichert
});
});

Best Practices

Damit deine Daten sauber bleiben, empfehlen wir folgende Konventionen:

Benennung (Naming)

Nutze Kebab-Case:

✅ newsletter-signup
❌ Newsletter Signup

Sei spezifisch:

✅ pricing-cta-click
❌ click

Konsistenz: Nutze nicht signup auf Seite A und register auf Seite B für die gleiche Aktion.

Checkliste Datenschutz

Bevor du ein Event implementierst, stelle dir folgende Fragen:

Steht eine E-Mail-Adresse im Payload? ❌ (Verboten)
Ist eine User-ID enthalten? ❌ (Nur gehasht oder als interne ID erlaubt)
Sind die Daten allgemein genug? ✅ (z.B. Produktkategorie statt Nutzername)

Plattformen

Anwendung

​Event-Typen verstehen

Property-Type Events

Payload Events

​Methode 1: HTML-Attribute (No-Code)

​Methode 2: JavaScript (Für Entwickler)

​Best Practices

Event-Typen verstehen

Methode 1: HTML-Attribute (No-Code)

Methode 2: JavaScript (Für Entwickler)

Best Practices