SPA navigation

Auf einer klassischen Website lädt jeder Klick eine neue Seite, und das Snippet startet erneut. In einer Single-Page-Application (SPA) lädt der Browser die Seite einmal, und dein Code tauscht danach die Inhalte aus. ABlyft würde Pages und Audiences dann nur einmal beim ersten Laden prüfen.

Diese Seite erklärt die Einstellungen und Aufrufe, mit denen ABlyft deiner Navigation folgt.

Was du entscheiden musstCopy Anchor Link

Es gibt zwei Wege, ABlyft mitzuteilen, dass "die Seite sich geändert hat". Du kannst sie kombinieren.

Beide benötigen die Project-Einstellung Use SPA features, die als Nächstes beschrieben wird.

Project-Einstellungen für SPAsCopy Anchor Link

Öffne dein Project und gehe zu Settings → Project Settings. Der Abschnitt Project Activations Settings enthält:

Ist Use SPA features aktiviert, tut ABlyft zusätzlich Folgendes:

• Bevor ein Experiment erneut angewendet wird, macht ABlyft zuerst seinen vorherigen Durchlauf rückgängig: Es führt das Reset JS aus und entfernt das CSS, das das Experiment und seine Variation hinzugefügt hatten.
• Bei jedem neuen Durchlauf des Projects wird das CSS, das ABlyft der Seite hinzugefügt hat, entfernt und neu hinzugefügt, sodass sich Styles nicht ansammeln.
• ablyft.reInit() initialisiert alle Experiments, in denen der Visitor bereits ist, neu, sodass Resets laufen und Goals erneut angewendet werden.

Option 1: ABlyft die Navigation erkennen lassenCopy Anchor Link

Jede Page hat einen Trigger, der festlegt, wann ABlyft das Targeting der Page prüft. Du stellst ihn an der Page unter Targeting & Goals → Pages im Abschnitt Trigger ein. Der Standard der meisten Projects ist Direct: einmal prüfen, wenn ABlyft startet.

Wähle für SPAs URL Change (history API), URL Change (polling) oder DOM Change. Was jeder Trigger tut, steht in Pages & URL targeting.

Beim Start prüft ABlyft jede Page einmal. Danach prüft es die Page jedes Mal erneut, wenn der Trigger auslöst.

Was bei jeder Prüfung passiertCopy Anchor Link

1. Wenn die Page passt (URL-Regeln und optionale JavaScript rules) und noch nicht aktiv ist, aktiviert ABlyft sie, löst ihre Pageview-Goals aus und wertet ihre Experiments aus (Environments, Audiences, Traffic).
2. Ist die Page bereits aktiv und passt nicht mehr, deaktiviert ABlyft sie. Was mit ihren Experiments passiert, hängt vom Deactivation mode der Page ab.

Deactivation modesCopy Anchor Link

Der Deactivation mode der Page (siehe Pages & URL targeting) entscheidet, ob Reset JS läuft und ob die Page aktiv bleibt.

Wähle Reset für die meisten Fälle: Das Experiment verschwindet, wenn der Visitor die Seite verlässt.

Option 2: ablyft.reInit() selbst aufrufenCopy Anchor Link

ablyft.reInit() führt ABlyft auf der aktuellen Seite erneut aus: Pages und Audiences werden erneut geprüft ("rerun condition check"). Rufe es aus deinem Router auf, nachdem die neue View gerendert wurde.

// Example: call after your app finished rendering a new route
function onRouteChanged() {
  if (window.ablyft && typeof window.ablyft.reInit === 'function') {
    window.ablyft.reInit();
  }
}

reInit() existiert erst, nachdem das Snippet geladen wurde, daher die Prüfung. Goals zu pushen und andere Befehle davor funktioniert anders, siehe Queueing.

Um mit einem sauberen Zustand zu starten, zum Beispiel nach einem Login oder Sprachwechsel, verwende ablyft.reInit({ resetStates: true }). Die Optionen sind in der JavaScript API beschrieben.

Run only on ablyft.reInit()Copy Anchor Link

Aktiviere Run only on ablyft.reInit(), wenn ABlyft nicht von selbst starten soll. Das ist nützlich, wenn die Anwendung zuerst bereit sein muss (zum Beispiel wenn die erste View gerendert oder die Nutzerdaten geladen sind). Das Snippet wird weiterhin geladen und window.ablyft ist verfügbar, aber Experiments starten erst mit deinem ersten reInit()-Aufruf.

Auf ABlyft-Durchläufe reagierenCopy Anchor Link

ABlyft sendet bei jedem Durchlauf das Event ablyft_initialized auf document, auch bei jedem reInit(), und unterstützt einen lifecycleEnd-Listener, der nach jedem Durchlauf aufgerufen wird. Beides ist in der JavaScript API dokumentiert.

Reset JSCopy Anchor Link

Reset JS ist Code, der das rückgängig macht, was dein Experiment-Code getan hat, sodass eine Variation ohne Seiten-Reload wieder entfernt werden kann. Du kannst ihn an zwei Stellen festlegen:

• im Experiment: Experiment Level Codes → Reset JS code,
• in einer Variation: Code → Reset JS code.

ABlyft führt ihn aus, wenn ein Experiment zurückgesetzt wird: bevor das Experiment erneut angewendet wird und wenn eine Page im Modus Reset oder Force-reset deaktiviert wird (siehe oben).

Ein Beispiel mit Variation-Code und dem passenden Reset JS code findest du unter Ein vollständiges Beispiel.

Das CSS, das du zu Experiments und Variations hinzugefügt hast, wird automatisch entfernt; du musst nur zurücksetzen, was dein JavaScript geändert hat. Mehr zu den Code-Feldern: Custom JavaScript.

Welches Setup soll ich wählen?Copy Anchor Link

FehlerbehebungCopy Anchor Link

• Experiment erscheint auf der ersten Seite, aber nicht nach der Navigation: Die Page hat noch den Trigger Direct, und es wird kein reInit() aufgerufen. Ändere den Trigger oder rufe reInit() auf.
• Änderungen bleiben beim Verlassen der Seite bestehen: Es wurde kein Reset JS hinzugefügt, oder Use SPA features ist aus.
• Experiment läuft doppelt oder flackert: Sowohl ein automatischer Trigger als auch reInit() sind im Einsatz. Eine bereits aktive Page wird nicht erneut aktiviert, wähle aber nach Möglichkeit einen Ansatz.
• Aktiviere den Debug-Modus und beobachte die Konsole. Jede Page-Aktivierung wird protokolliert. Mehr unter Debugging.

Nächste SchritteCopy Anchor Link