# Custom goals

URL: https://docs.ablyft.com/de/developers/tracking-and-events/custom-goals/

> Löse Conversions aus deinem eigenen JavaScript mit ablyft.push() aus.



Ein **Custom Goal** zählt etwas, das ABlyft nicht von selbst erkennen kann: das Absenden eines Formulars, ein bis zum
Ende angesehenes Video, eine Newsletter-Anmeldung, ein abgeschlossener Schritt in einem Konfigurator. Deine Website teilt ABlyft mit einem
JavaScript-Aufruf mit, wenn es passiert.

## Schritt 1: Das Goal in ABlyft erstellen

1. Gehe zu **Targeting & Goals → Goals** und erstelle ein Goal.
2. Wähle den Typ **Custom** ("Trigger a conversion/value via JavaScript").
3. Prüfe den **API Name**. Er wird aus dem Namen übernommen und identifiziert das Goal in deinem Code, zum Beispiel
   `newsletter-signup`.
4. Wähle den **Measurement type**: **Conversion** (hat der Visitor es getan oder nicht?) oder **Value** (ein numerischer Wert, den du
   mit dem Aufruf sendest), siehe [Goal types](https://docs.ablyft.com/de/guides/goals-and-measurement/goal-types/#custom-goals).
5. Lege in den **Statistic Settings** die Counting Method und die Winning Direction fest und speichere.
6. [Weise das Goal deinem Experiment zu](https://docs.ablyft.com/de/guides/goals-and-measurement/configure-goals/#assign-goals-to-an-experiment).

Das Formular zeigt eine **API Code**-Box mit einem fertigen Aufruf für dein Goal. Klicke, um ihn zu kopieren.

## Schritt 2: Das Event von deiner Website senden

```html
<script>
window['ablyft'] = window['ablyft'] || [];
window['ablyft'].push({
    eventType: 'custom',
    eventName: 'newsletter-signup'
});
</script>
```

Alle Push-Parameter sind in der [`push()`-Referenz](https://docs.ablyft.com/de/developers/reference/javascript-api/push/#custom) aufgelistet. Der
`eventName` muss exakt mit dem **API Name** des Goals übereinstimmen.

Für ein Goal mit dem Measurement type **Value** ergänzt die API Code-Box `eventValue`:

```js
window['ablyft'] = window['ablyft'] || [];
window['ablyft'].push({
    eventType: 'custom',
    eventName: 'video-watched-seconds',
    eventValue: 42
});
```

> **Unbekannte Namen werden stillschweigend ignoriert:** Passt `eventName` nicht zum API Name eines Goals, passiert nichts und es wird kein Fehler angezeigt. Vergleiche den Namen Buchstabe für
> Buchstabe und denke daran, dass neue Goals deine Visitors erst erreichen, nachdem das Project veröffentlicht wurde.

## Aufruf, bevor das Snippet geladen ist

Die Zeile `window['ablyft'] = window['ablyft'] || [];` ist wichtig. Ist das Snippet noch nicht geladen, wird der Aufruf
in einer Liste gespeichert. Wenn das Snippet startet, spielt es alle gespeicherten Aufrufe ab. Du kannst Goal-Aufrufe daher an beliebiger Stelle deiner Seite platzieren,
unabhängig von der Position des Snippets. Details: [Queueing](https://docs.ablyft.com/de/developers/reference/javascript-api/#use-the-api-before-the-snippet-has-loaded).

## Was gezählt wird

* Das Event wird zusammen mit den Variations gesendet, denen der Visitor in diesem Moment zugewiesen ist.
* Wie oft wiederholte Aufrufe gezählt werden, hängt von der Counting Method ab, siehe
  [Counting Method](https://docs.ablyft.com/de/guides/goals-and-measurement/goal-types/#counting-method).
* Im Preview-Modus werden Goals zur Kontrolle aufgezeichnet, aber nicht in den Results gezählt.
* Ist Tracking noch nicht erlaubt, zum Beispiel weil der Visitor keine Einwilligung gegeben hat, wird das Event in der
  Session gehalten und gesendet, sobald Tracking erlaubt ist. Siehe [Consent Manager](https://docs.ablyft.com/de/developers/consent-and-security/consent-manager/).

## Beispiele

**Bei einem Button-Klick**

```js
document.querySelector('#download-brochure').addEventListener('click', () => {
  window.ablyft = window.ablyft || [];
  window.ablyft.push({ eventType: 'custom', eventName: 'brochure-download' });
});
```

Für einen einfachen Klick brauchst du keinen Code: Verwende stattdessen ein [Click Goal](https://docs.ablyft.com/de/developers/tracking-and-events/click-and-pageview-goals/).

**Wenn ein Formular erfolgreich gesendet wurde**

```js
document.querySelector('#contact-form').addEventListener('submit', () => {
  window.ablyft = window.ablyft || [];
  window.ablyft.push({ eventType: 'custom', eventName: 'contact-form-sent' });
});
```

Validiert dein Formular zuerst, löse den Aufruf stattdessen im Success-Handler deines Formulars aus statt im `submit`-Event.

**Interaction Goal (der Visitor hat mit der Seite interagiert)**

Zählt einen Visitor als "interagiert" beim ersten Klick irgendwo auf der Seite oder nach 10 Sekunden auf der Seite, je nachdem, was
zuerst eintritt. Das ist ein Engagement-Goal mit niedriger Hürde.

Erstelle ein **Custom** Goal mit dem API Name `interaction`, dem Measurement type **Conversion** und der Counting Method
**One**. Mit **Every** würde jeder Klick gezählt. Füge den Code zu deinem [Project-JavaScript](https://docs.ablyft.com/de/developers/application-integration/custom-javascript/)
oder zu deiner Seite hinzu.

```js
function triggerInteractionGoal() {
  window['ablyft'] = window['ablyft'] || [];
  window['ablyft'].push({
    eventType: 'custom',
    eventName: 'interaction' // change if you use another API name
  });
}

// On every click
document.addEventListener('click', function () {
  triggerInteractionGoal();
});

// After 10 seconds
setTimeout(function () {
  triggerInteractionGoal();
}, 10 * 1000);
```

**In einer Single-Page-App, nach einem Routenwechsel**

```js
function onThankYouViewRendered() {
  window.ablyft = window.ablyft || [];
  window.ablyft.push({ eventType: 'custom', eventName: 'order-confirmed' });
}
```

**Aus einem Tag Manager**

Erstelle ein *Custom HTML*-Tag mit dem Skript aus der API Code-Box und löse es mit dem Trigger aus, der zu deinem Event passt, zum Beispiel
einem "Form submission"-Trigger. Lade das ABlyft-Snippet davor oder unabhängig davon, beide Reihenfolgen funktionieren.

**Aus einem Data-Layer-Event**

Verwende [`watchDataLayerEntry`](https://docs.ablyft.com/de/developers/tracking-and-events/datalayer-events/#run-code-when-an-entry-is-pushed), um ein Goal zu pushen, wenn dein Data Layer ein Event erhält.

## Prüfen, ob es funktioniert

1. Aktiviere den [Debug-Modus](https://docs.ablyft.com/de/developers/debugging/preview-and-live-log/#debug-mode) und öffne die Konsole. Ein Aufruf protokolliert
   `Triggered GOAL "<name>" (custom)`.
2. Im Preview-Modus gibt [`ablyft.get('pingedGoals')`](https://docs.ablyft.com/de/developers/reference/javascript-api/get/#pingedgoals) die in der aktuellen Session gesendeten Goals zurück.
3. Öffne den **Live Log** deines Projects, um die eingehenden Events zu sehen.

## Nächste Schritte

- [Revenue tracking](https://docs.ablyft.com/de/developers/tracking-and-events/revenue-tracking/): Einen Bestellwert senden.
- [Data layer events](https://docs.ablyft.com/de/developers/tracking-and-events/datalayer-events/): Auf Data-Layer-Einträge reagieren.
- [Messung prüfen](https://docs.ablyft.com/de/guides/goals-and-measurement/verify-measurement/): Prüfen, ob Goals ankommen.