Benutzerdefinierte Event-Ziele

Pro Plan

Benutzerdefinierte Event-Ziele ermöglichen es Ihnen, jede Aktion durch das Auslösen von JavaScript-Events zu verfolgen. Ideal für Formulare, Videowiedergaben und komplexe Interaktionen.

Wann benutzerdefinierte Events verwenden

Am besten geeignet zum Verfolgen von:

• Formularübermittlungen (AJAX)
• Video-Interaktionen (Wiedergabe, Abschluss)
• Single-Page-App-Navigation
• In-den-Warenkorb-Aktionen
• Feature-Nutzung in Web-Apps
• Jede durch JavaScript ausgelöste Aktion

Wie benutzerdefinierte Events funktionieren

1. Sie fügen JavaScript-Code zu Ihrer Website hinzu
2. Der Code wird ausgelöst, wenn die Aktion stattfindet
3. Zenovay empfängt das Event
4. Das Ziel wird erfasst

Grundlegende Implementierung

Ein Event verfolgen

// Einfaches Event
zenovay('goal', 'event_name');

// Event mit Wert
zenovay('goal', 'purchase', { value: 99.99 });

// Event mit Wert und Währung
zenovay('goal', 'purchase', {
  value: 99.99,
  currency: 'USD'
});

Ein Ziel-Aufruf erfasst value und currency. Alle anderen Schlüssel, die Sie übergeben, werden mit der zugrunde liegenden Event-Payload gesendet, aber das Ziel selbst wird nur anhand seines Namens und Wertes erfasst.

Das Ziel erstellen

1. Öffnen Sie das Dashboard Ihrer Website und wählen Sie die Registerkarte Journeys
2. Öffnen Sie die Unterregisterkarte Ziele und klicken Sie auf Ziel hinzufügen
3. Wählen Sie Benutzerdefiniertes Event
4. Geben Sie den Event-Namen ein (z. B. purchase), damit er dem Namen entspricht, den Sie im Code auslösen
5. Aktivieren Sie optional die Werteverfolgung und legen Sie einen Standardwert fest
6. Speichern

Benutzerdefinierte Event-Ziele werden auch automatisch erstellt, wenn Zenovay zum ersten Mal einen Event-Namen empfängt, den es noch nicht gesehen hat. Daher können Sie Events zuerst auslösen und sie erscheinen in der Zielliste.

Event-Benennung

Best Practices

Gute Namen	Schlechte Namen
signup_complete	goal1
purchase	click
video_50_percent	event
add_to_cart	123

Namenskonventionen

Wählen Sie ein einheitliches Muster:

• snake_case: form_submit
• camelCase: formSubmit
• kebab-case: form-submit

Kategorien mit Präfixen

Organisieren Sie Events mit Präfixen:

// E-Commerce-Events
zenovay('goal', 'ecom_add_to_cart');
zenovay('goal', 'ecom_checkout_start');
zenovay('goal', 'ecom_purchase');

// Engagement-Events
zenovay('goal', 'engage_video_play');
zenovay('goal', 'engage_scroll_50');

Häufige Implementierungen

Formularübermittlung

document.querySelector('form').addEventListener('submit', function(e) {
  zenovay('goal', 'contact_form');
});

// Oder für AJAX-Formulare
function onFormSuccess() {
  zenovay('goal', 'contact_form');
}

Video-Interaktionen

const video = document.querySelector('video');

video.addEventListener('play', function() {
  zenovay('goal', 'video_play');
});

video.addEventListener('ended', function() {
  zenovay('goal', 'video_complete');
});

// 50% Fortschritt verfolgen
video.addEventListener('timeupdate', function() {
  if (video.currentTime / video.duration > 0.5) {
    zenovay('goal', 'video_50_percent');
  }
});

E-Commerce-Aktionen

// In den Warenkorb
function addToCart(product) {
  // Ihre Warenkorb-Logik...

  zenovay('goal', 'add_to_cart', {
    value: product.price
  });
}

// Kauf abgeschlossen
function onPurchaseComplete(order) {
  zenovay('goal', 'purchase', {
    value: order.total,
    currency: 'USD'
  });
}

Registrierung / Anmeldung

async function handleSignup(formData) {
  try {
    const response = await api.signup(formData);

    if (response.success) {
      zenovay('goal', 'signup_complete', {
        value: 50 // Geschätzter Lead-Wert
      });
    }
  } catch (error) {
    // Fehler behandeln
  }
}

Werte übergeben

Statischer Wert

Im Ziel-Dashboard festlegen:

• Werteverfolgung aktivieren
• Einen Standardwert eingeben (z. B. 50)
• Jede Fertigstellung zählt zu diesem Wert

Dynamischer Wert

Aus Ihrem Code übergeben:

// Bestellwert
zenovay('goal', 'purchase', {
  value: orderTotal
});

// Berechneter Wert
const leadValue = isPremium ? 100 : 25;
zenovay('goal', 'lead', { value: leadValue });

Wert von der Seite

Aus dem DOM lesen:

const price = parseFloat(
  document.querySelector('.price').textContent.replace('$', '')
);
zenovay('goal', 'purchase', { value: price });

Ziel-Wertfelder

Eine Ziel-Fertigstellung erfasst diese Felder:

Eigenschaft	Typ	Beispiel
value	number	99.99
currency	string	"USD"

Übergeben Sie value als einfache Zahl (kein Währungssymbol oder String). currency ist ein ISO-Währungscode und standardisiert auf USD.

Framework-Integrationen

React

import { useCallback } from 'react';

function SignupForm() {
  const handleSubmit = useCallback((data) => {
    // Übermittlungslogik...

    window.zenovay('goal', 'signup');
  }, []);

  return <form onSubmit={handleSubmit}>...</form>;
}

Vue

<script>
export default {
  methods: {
    handleSubmit() {
      // Übermittlungslogik...

      window.zenovay('goal', 'signup');
    }
  }
}
</script>

Next.js

// Client-seitiges Tracking in einer Komponente
'use client';

export default function CheckoutButton() {
  function handleSuccess() {
    if (typeof window !== 'undefined') {
      window.zenovay('goal', 'purchase');
    }
  }

  return <button onClick={handleSuccess}>Fertigstellen</button>;
}

Single Page Apps (SPAs)

Routenwechsel-Tracking

Für virtuelle Seitenaufrufe:

// React Router
history.listen(() => {
  zenovay('page');
});

// Vue Router
router.afterEach(() => {
  zenovay('page');
});

Ziel nach Navigation

// Navigieren und dann verfolgen
router.push('/success').then(() => {
  zenovay('goal', 'signup_complete');
});

Bedingtes Tracking

Basierend auf Bedingungen verfolgen

// Nur verfolgen, wenn Bedingungen erfüllt sind
if (user.isNewUser && !user.hasConvertedBefore) {
  zenovay('goal', 'first_conversion');
}

// A/B-Test-Variante
if (experimentVariant === 'B') {
  zenovay('goal', 'variant_b_conversion');
}

Entprellung von Events

Doppeltes Auslösen verhindern:

let hasTracked = false;

function trackOnce(eventName) {
  if (!hasTracked) {
    zenovay('goal', eventName);
    hasTracked = true;
  }
}

Fehlerbehandlung

Sicheres Tracking

Fälle behandeln, in denen Zenovay nicht geladen ist. Das Tracking-Snippet definiert eine kleine Befehls-Warteschlange, sodass Aufrufe, die vor dem Abschluss des Skript-Ladens getätigt werden, trotzdem verarbeitet werden:

function safeTrackGoal(eventName, properties) {
  if (typeof zenovay === 'function') {
    zenovay('goal', eventName, properties);
  } else {
    console.warn('Zenovay not loaded');
  }
}

Events testen

Debug-Modus

Konsolenprotokollierung aktivieren:

zenovay('debug');

// Jetzt etwas verfolgen
zenovay('goal', 'test_event');
// Konsole auf Ausgabe prüfen

Im Dashboard überprüfen

1. Testen Sie ein Event
2. Öffnen Sie das Dashboard Ihrer Website und wählen Sie die Registerkarte Live View, um Aktivitäten in Echtzeit zu beobachten, oder öffnen Sie Journeys → Ziele, um die Fertigstellungsanzahl des Ziels anzuzeigen
3. Überprüfen Sie, dass das Ziel erscheint und die Anzahl erhöht wird
4. Überprüfen Sie den Zielwert

Netzwerk-Tab

1. Öffnen Sie DevTools → Netzwerk
2. Lösen Sie das Event aus
3. Suchen Sie nach einer Anfrage an api.zenovay.com
4. Überprüfen Sie die Payload

Fehlerbehebung

Events werden nicht aufgezeichnet

Prüfen, ob das Skript geladen ist:

console.log(typeof zenovay); // Sollte 'function' sein

Prüfen, ob der Event-Name übereinstimmt:

• Ziel: signup
• Code: zenovay('goal', 'signup') ✓
• Code: zenovay('goal', 'Signup') ✗

Auf Fehler prüfen:

• Browser-Konsole auf Fehler überprüfen
• Netzwerk-Tab auf fehlgeschlagene Anfragen überprüfen

Wert wird nicht aufgezeichnet

Stellen Sie sicher, dass der Wert eine Zahl ist:

// Falsch
zenovay('goal', 'purchase', { value: "$99.99" });

// Richtig
zenovay('goal', 'purchase', { value: 99.99 });

Nächste Schritte

• Conversion-Funnels einrichten
• Ziel-Attribution
• Umsatz-Attribution