JavaScript API
Das globale ablyft-Objekt, seine Methoden, Events und Flags.
Das Snippet stellt ein einziges globales Objekt bereit: window.ablyft.
Übersicht
| Member | Zweck | Details |
|---|---|---|
ablyft.push(event) | Events und Befehle senden (Goals, Pages, Consent, …) | ablyft.push() |
ablyft.get(type, argument?) | Zustand und Project-Daten lesen | ablyft.get() |
ablyft.getTools() | Hilfsfunktionen (Cookies, URLs, Polling, Data Layer, …) | Tools |
ablyft.reInit(options?) | ABlyft erneut ausführen, z. B. nach SPA-Navigation | unten |
Die API vor dem Laden des Snippets nutzen
Lege window.ablyft als Array an und schiebe Befehle hinein. Wenn das Snippet lädt, ersetzt es das
Array durch die echte API und spielt deine eingereihten Befehle erneut ab:
forceVariation-Befehle werden sofort angewendet.- Alle anderen Befehle werden abgespielt, sobald das Project initialisiert wurde.
window.ablyft = window.ablyft || [];
window.ablyft.push({
eventType: 'custom',
eventName: 'newsletter-signup',
});Nur push() kann auf diese Weise eingereiht werden. get(), getTools() und reInit() existieren erst, nachdem das Snippet geladen ist.
Um zu erfahren, wann das der Fall ist, lausche auf das ablyftApiReady-Event.
ablyft.reInit()
Führt ABlyft erneut auf der aktuellen Seite aus. Nutze es, nachdem deine Anwendung die Seite ohne vollständiges Neuladen verändert hat. Siehe auch SPA navigation.
ablyft.reInit(); // re-evaluate pages and experiments
ablyft.reInit({ resetStates: true }); // additionally forget active pages and experiments first| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
resetStates | boolean | false | Leert die Liste der aktiven Pages und Experiments und setzt interne Signale zurück, bevor erneut ausgeführt wird. Nutze es, wenn die gesamte Ansicht ersetzt wird, zum Beispiel nach einem Login oder einem Sprachwechsel. |
Ohne Optionen bleiben Pages, die bereits aktiv sind und weiterhin zutreffen, unberührt. Neue zutreffende Pages werden aktiviert; Pages, die nicht mehr zutreffen, werden gemäß ihrem Deactivation Mode behandelt.
In Projects, die als Single-Page-Application konfiguriert sind, werden alle Experiments, denen der Visitor zugeordnet ist, erneut initialisiert, damit Resets und Goals angewendet werden.
ablyft.getTools()
Gibt das Tools-Objekt zurück. Identisch mit ablyft.get('tools'). Siehe Tools.
const tools = ablyft.getTools();
console.log(tools.getUrlParameter('utm_source'));Events
Das Snippet löst die folgenden Events auf document aus.
| Event | Wann | Payload |
|---|---|---|
ablyftApiReady | window.ablyft ist verfügbar (vor der Initialisierung) | – |
ablyft_initialized | Project initialisiert (wird bei jedem reInit() erneut ausgelöst) | – |
ablyftError | Das Snippet protokolliert einen Fehler | event.detail.msg (string) |
document.addEventListener('ablyftApiReady', () => {
console.log('ABlyft API is ready', ablyft.get('data'));
});
document.addEventListener('ablyft_initialized', () => {
console.log('Active pages:', ablyft.get('activePageIds'));
});
document.addEventListener('ablyftError', (event) => {
console.warn('ABlyft error:', event.detail.msg);
});ablyftError wird nur ausgelöst, solange das Snippet-Logging aktiviert ist (Debug-Modus des Projects).
Registriere den Event-Listener, bevor das Snippet läuft, wenn du frühe Fehler benötigst.
Window-Flags
Optionale Flags, die du setzen kannst, bevor das Snippet lädt.
| Flag | Wirkung |
|---|---|
window.ablyftAllowIframe = true | Erlaubt dem Snippet, innerhalb eines iframes zu laufen (sonst beendet es sich, es sei denn, das Project erlaubt iframes). |
<script>
window.ablyftAllowIframe = true;
</script>
<script src="https://cdn.ablyft.com/s/{projectId}.js"></script>Das Snippet startet nur einmal pro Seite. Läuft bereits ein anderes ABlyft-Snippet, protokolliert ein zweites eine Warnung und beendet sich.