# Click & pageview goals

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

> Messe Seitenaufrufe und Klicks, ohne Code zu schreiben.



**Pageview**- und **Click**-Goals funktionieren ohne jeden Code auf deiner Website. Das [Snippet](https://docs.ablyft.com/de/developers/installation/snippet/)
erkennt den Aufruf oder den Klick selbst. Du konfigurierst das Goal nur in ABlyft.

Beide Goal types sind an eine **Page** gebunden. Das Goal wird nur gezählt, solange diese Page für den Visitor **aktiv** ist. Eine Page
legt fest, auf welchen URLs (und unter welchen Bedingungen) sie aktiv ist, siehe [Pages](https://docs.ablyft.com/de/guides/audiences-and-delivery/pages/).

> Die Page eines Goals ist unabhängig von den Pages deines Experiments. Ein Goal kann eine andere URL messen als die Page,
> auf der die Variation läuft, zum Beispiel eine Danke-Seite nach einem Checkout.

## Pageview goals

Ein Pageview Goal zählt, wenn ein Visitor eine Page erreicht. Typischer Einsatz: eine Danke- oder Bestätigungsseite.

### Einrichtung

1. Gehe zu **Targeting & Goals → Goals** und erstelle ein Goal.
2. Wähle den Typ **Pageview** ("Count a pageview as a conversion").
3. Wähle die **Page**, zum Beispiel eine, die zu `/thank-you` passt.
4. Wähle die Counting Method und die Winning Direction und speichere.
5. [Weise das Goal deinem Experiment zu](https://docs.ablyft.com/de/guides/goals-and-measurement/configure-goals/#assign-goals-to-an-experiment).

### Wie sich Pageview Goals verhalten

* Das Goal wird jedes Mal ausgelöst, wenn die verknüpfte Page **aktiv wird**, etwa eine halbe Sekunde nachdem das DOM bereit ist.
* Auf normalen Websites ist das einmal pro Seitenaufruf. Bei [Single-Page-Apps](https://docs.ablyft.com/de/developers/application-integration/spa-navigation/)
  wird es immer ausgelöst, wenn die Page über ihren Trigger oder `ablyft.reInit()` aktiviert wird.
* Mit der Counting Method **One** (unique) wird ein Visitor einmal gezählt. Mit **Every** (total) wird jede Aktivierung gezählt.

## Click goals

Ein Click Goal zählt, wenn ein Visitor ein Element anklickt, das zu einem **CSS-Selektor** passt.

### Einrichtung

1. Gehe zu **Targeting & Goals → Goals** und erstelle ein Goal.
2. Wähle den Typ **Click** ("Count a click/interaction as a conversion by a CSS selector").
3. Wähle die **Page**, auf der die Klicks gezählt werden sollen.
4. Gib den **CSS selector** ein, zum Beispiel `.add-to-cart`. Du kannst mehrere Selektoren durch Kommas getrennt eingeben, zum Beispiel `.add-to-cart, #buy-now`.
   Das Feld warnt dich, wenn der Selektor nicht gültig ist.
5. Speichere und [weise das Goal deinem Experiment zu](https://docs.ablyft.com/de/guides/goals-and-measurement/configure-goals/#assign-goals-to-an-experiment).

### Wie sich Click Goals verhalten

* ABlyft lauscht auf Klicks auf der gesamten Seite. Ein Klick zählt, wenn das angeklickte Element **oder eines seiner Eltern-Elemente** zum
  Selektor passt. Ein Klick auf ein Icon in einem passenden Button zählt also.
* Es wird nur auf Goals gelauscht, deren Page aktiv ist.
* Elemente, die später erscheinen (Modals, dynamische Inhalte), funktionieren ebenfalls, weil der Selektor zum Zeitpunkt des Klicks geprüft wird.

> **Click Goals auf Links zu anderen Seiten:** Führt ein Klick zu einer neuen Seite, beendet der Browser möglicherweise die Ausführung von Skripten, bevor das Event gesendet wird. ABlyft hält das Event
> in einer Queue und sendet es auf der nächsten Seite. Das funktioniert nur, wenn diese Seite ebenfalls das ABlyft-Snippet desselben Projects hat,
> auf derselben Domain liegt (nicht nur derselben Subdomain) und keine JavaScript-Fehler hat.

### Einen stabilen Selektor wählen

| Tipp                                                                                              | Warum                                                   |
| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| Bevorzuge eine eigene Klasse oder ein `data-`-Attribut, zum Beispiel `[data-track="add-to-cart"]` | Layout-Klassen ändern sich, wenn sich das Design ändert |
| Teste den Selektor in der Browser-Konsole mit `document.querySelectorAll('your-selector')`        | Bestätigt, dass er die erwarteten Elemente trifft       |
| Vermeide Selektoren, die auch Elemente in Headern, Footern oder anderen Variations treffen        | Sonst werden unbeteiligte Klicks gezählt                |

> **Selektoren, die deine Variation verändert:** Ersetzt oder erzeugt eine Variation das angeklickte Element neu, stelle sicher, dass der Selektor in jeder Variation weiterhin passt und
> auch im Original passt. Sonst vergleichst du unterschiedliche Mengen getrackter Klicks.

## Click Goals programmatisch anwenden

Manchmal reicht der CSS-Selektor nicht aus, zum Beispiel wenn Elemente keine gemeinsame Klasse haben. Füge in diesem Fall dem Element das
Attribut `data-ablyft-clickgoals` hinzu. Sein Wert ist die **ID** des Click Goals.

```html
<a href="/step_2" data-ablyft-clickgoals="12345678">Click here</a>
```

* Ein Element kann mehrere Goals auslösen. Trenne die IDs mit Kommas: `data-ablyft-clickgoals="12345678,87654321"`.
* Die ID eines Goals wird in der Goal-Liste unter **Targeting & Goals → Goals** angezeigt.
* Das Goal muss einem Experiment zugewiesen und seine Page aktiv sein.
* ABlyft liest das Attribut von dem Element, das **selbst angeklickt** wurde. Enthält das klickbare Element Kind-Elemente
  (zum Beispiel ein Icon), setze das Attribut auf das innerste Element oder stelle sicher, dass die Klicks auf dem Element
  mit dem Attribut landen.

## Deine Goals testen

1. Öffne das Experiment im Preview-Modus und nutze das Qualitätssicherungs-Tool. Im Preview-Modus ausgelöste Goals werden zur Kontrolle angezeigt,
   aber nicht in den Results gezählt.
2. Aktiviere den [Debug-Modus](https://docs.ablyft.com/de/developers/debugging/preview-and-live-log/#debug-mode). Die Konsole zeigt
   `Triggered GOAL "<name>" (click)` für jedes Goal.
3. Prüfe den **Live Log** deines Projects auf eingehende Events.

Siehe auch [Messung prüfen](https://docs.ablyft.com/de/guides/goals-and-measurement/verify-measurement/) und [Debugging](https://docs.ablyft.com/de/developers/debugging/).

## Nächste Schritte

- [Custom goals](https://docs.ablyft.com/de/developers/tracking-and-events/custom-goals/): Für Conversions, die weder ein Klick noch ein Pageview sind.
- [Goals konfigurieren](https://docs.ablyft.com/de/guides/goals-and-measurement/configure-goals/): Goals erstellen und Experiments zuweisen.
- [Goal types](https://docs.ablyft.com/de/guides/goals-and-measurement/goal-types/): Alle vier Typen im Vergleich.