# Events tracken

Das Tracking von Events (Ereignissen) ist wichtig, um zu verstehen, wie Nutzer mit deiner Website interagieren – und das über bloße Seitenaufrufe hinaus. Ereignisse erfassen spezifische Aktionen, die Nutzer ausführen, und ermöglichen es dir, wertvolle Interaktionen wie Button-Klicks, Formularübermittlungen oder Videoabspielungen zu verfolgen.

Hier sind einige häufige Anwendungsfälle, bei denen das Tracking von Ereignissen nützlich sein kann:

1. Button-Klicks – Verfolge, wann Nutzer auf wichtige Buttons klicken (z. B. "In den Warenkorb", "Abonnieren").
2. Formularübermittlungen – Messe, wie oft Nutzer Formulare wie Kontakt- oder Anmeldeformulare absenden.
3. Videoabspielungen – Überwache das Engagement, indem du verfolgst, wie viele Nutzer Videos starten oder vollständig ansehen.
4. Produktinteraktionen – Erfasse Interaktionen mit Produktfunktionen.

Du kannst benutzerdefinierte Ereignisse mithilfe von JavaScript tracken. Diese Methode ermöglicht es dir, programmgesteuert Ereignisdaten von überall innerhalb des Codes deiner Website zu senden, sodass du die volle Kontrolle über das Ereignis-Tracking hast.

Wenn du unser JavaScript-Tracking-Snippet installiert hast, kannst du diese Methode sofort verwenden.

Du kannst ein Ereignis mit der Funktion trackEvent() auslösen, die von unserem JavaScript-Snippet bereitgestellt wird. Die Grundverwendung erfordert nur den Ereignisnamen als ersten Parameter. Das Ereignis enthält automatisch alle Daten, die normalerweise bei einem Seitenaufruf erfasst werden, wie z. B. die aktuelle URL oder den Referrer.

Hier ist ein einfaches Beispiel, wie du ein Ereignis tracken kannst:

// Erfassen eines einfachen Events mit Namen
countup.trackEvent('Form Submitted');

In diesem Beispiel wird das Ereignis "Formular eingereicht" erfasst und zusammen mit den standardmäßig erfassten Daten wie bei einem Seitenaufruf (z. B. URL, Referrer, User-Agent usw.) an unsere Server gesendet.

Du kannst die Funktion auch direkt mit Standard-HTML-Ereignissen wie onclick usw. verwenden:

<button onclick="countup.trackEvent('My Event')">Click Me!</button>

Zusätzlich zum Ereignisnamen kannst du benutzerdefinierte Eigenschaften übergeben, um weitere Details über das Ereignis bereitzustellen. Dies ist nützlich, um spezifische Interaktionen zu verfolgen, wie z. B. Produktdetails oder Metadaten eines Buttons.

Um ein Ereignis mit zusätzlichen Eigenschaften zu tracken, übergib ein zweites Argument, das Schlüssel-Wert-Paare enthält und das Ereignis genauer beschreibt:

// Tracking eines Events mit zusätzlichen Informationen
countup.trackEvent('Product Added To Cart', {
  productId: '12345',
  productName: 'Awesome Widget',
  productPrice: 19.99,
});

In diesem Beispiel wird das Ereignis "Produkt zum Warenkorb hinzugefügt" zusammen mit benutzerdefinierten Eigenschaften wie der Produkt-ID, dem Namen und dem Preis getrackt. Diese Eigenschaften werden zusammen mit den standardmäßigen Ereignisdaten an unsere Server gesendet.

Neben unseren Standardmethoden zum Ereignis-Tracking kannst du auch HTML-Klassenattribute verwenden, um Ereignisse mit minimalem Aufwand zu tracken. Diese Funktion ist besonders nützlich in Situationen, in denen es bequemer ist, HTML-Elemente direkt zu ändern, als JavaScript-Funktionen aufzurufen.

CountUp sucht nach einem bestimmten Klassennamenmuster innerhalb anklickbarer Elemente wie Buttons oder Links. Wenn ein Nutzer auf ein Element mit dieser spezifischen Klasse klickt, erfasst CountUp automatisch das Ereignis und sendet die Daten an unsere Server zur Verfolgung.

Bette den Ereignisnamen, den du tracken möchtest, in das Klassenattribut des HTML-Elements ein. Das Format lautet: countup-track-event=DEIN_EREIGNIS_NAME:

<button class="some-existing-class countup-track-event=Clicked+Button">Click Me</button>

In dem obigen Beispiel wird durch Klicken auf den Button automatisch ein Ereignis namens Clicked Button getrackt.

Einige CMS-Systeme wie Webflow erlauben bestimmten Sonderzeichen in CSS-Klassennamen nicht. Für diesen Fall bieten wir eine alternative Syntax an, die nur Bindestriche und Unterstriche verwendet. Diese ist möglicherweise nicht so lesbar wie die oben beschriebene Standard-Syntax, wird dafür jedoch von allen Systemen unterstützt. Um die Syntax anzuwenden:

• Ersetze alle = durch -- (zwei Bindestriche)
• Ersetze alle + durch __ (zwei Unterstriche)

So würde das obige Beispiel mit der alternativen Syntax aussehen:

<button class="some-existing-class countup-track-event--Clicked__Button">Click Me</button>

Beide Beispiele führen zum Tracking desselben Ereignisses.