Click & pageview goals
Messe Seitenaufrufe und Klicks, ohne Code zu schreiben.
Pageview- und Click-Goals funktionieren ohne jeden Code auf deiner Website. Das 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.
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
- Gehe zu Targeting & Goals → Goals und erstelle ein Goal.
- Wähle den Typ Pageview ("Count a pageview as a conversion").
- Wähle die Page, zum Beispiel eine, die zu
/thank-youpasst. - Wähle die Counting Method und die Winning Direction und speichere.
- Weise das Goal deinem Experiment zu.
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
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
- Gehe zu Targeting & Goals → Goals und erstelle ein Goal.
- Wähle den Typ Click ("Count a click/interaction as a conversion by a CSS selector").
- Wähle die Page, auf der die Klicks gezählt werden sollen.
- 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. - Speichere und weise das Goal deinem Experiment zu.
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.
<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
- Ö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.
- Aktiviere den Debug-Modus. Die Konsole zeigt
Triggered GOAL "<name>" (click)für jedes Goal. - Prüfe den Live Log deines Projects auf eingehende Events.
Siehe auch Messung prüfen und Debugging.