Dynamische Inhalte
Führe Experiments auf Inhalten aus, die erst nach dem Laden der Seite erscheinen, etwa Modals, Tabs und AJAX-Inhalte.
Nicht alles, was ein Visitor sieht, ist beim Laden der Seite schon da. Modals, Cart Drawer, Tabs, Checkout-Schritte und Inhalte aus einem API-Aufruf erscheinen später, oft ohne dass sich die URL ändert. Diese Seite zeigt, wie du ABlyft auf sie warten lässt.
Es gibt zwei getrennte Fragen:
- Wann soll das Experiment aktiv werden? Gelöst mit dem Trigger einer Page.
- Wann kann mein Variation-Code ein Element ändern? Gelöst mit Hilfsfunktionen in deinem Code.
Die Page warten lassen: einen Trigger wählen
Jede Page hat einen Trigger, der festlegt, wann ABlyft das Targeting der Page prüft. Öffne Targeting & Goals → Pages, bearbeite die Page und gehe zum Abschnitt Trigger.
| Trigger | Verwende ihn, wenn |
|---|---|
| Direct (immediately when ABlyft runs) | der Inhalt beim Laden Teil der Seite ist (Standard für die meisten Projects) |
| DOM Change (when something on the page is changing) | die Page aktiv sein soll, sobald bestimmte Elemente existieren |
| Callback (when the callback function is called) | du in einem kleinen JavaScript-Stück selbst entscheidest, wann die Page startet |
| API (manual activation by an API / JavaScript call) | deine eigene Anwendung ABlyft mitteilt, wann die Page startet |
| URL Change … | sich die URL ändert, siehe SPA navigation |
DOM Change-Trigger
Mit DOM Change prüft ABlyft die Page einmal beim Start und danach jedes Mal erneut, wenn sich die Seite ändert (Elemente werden hinzugefügt, entfernt oder ihre Attribute ändern sich). Änderungen durch den eigenen Code von ABlyft werden ignoriert.
Um ihn zu nutzen, kombinierst du den Trigger mit JavaScript rules, die den dynamischen Inhalt beschreiben. Öffne Advanced
Targeting im Abschnitt Targeting der Page und schreibe eine Bedingung, die true zurückgibt, wenn der Inhalt existiert:
// Page is active as soon as the cart drawer is open
return document.querySelector('.cart-drawer.is-open') !== null;Die Bedingung ist erfüllt, wenn dein JavaScript true zurückgibt. Darin kannst du ablyftTools verwenden.
Zwei Optionen in Advanced Targeting helfen bei spät erscheinenden Inhalten:
| Option | Wirkung |
|---|---|
| Poll on rules | ABlyft prüft die Bedingung bis zu 2 Sekunden lang immer wieder, bevor es aufgibt. Nutze sie, wenn das Element kurz nach dem Trigger erscheint. |
| Always embed in snippet | Normalerweise nicht nötig. Aktiviere sie nur, wenn dein Setup es erfordert. |
DOM Change läuft oft
Eine geschäftige Seite ändert ihr DOM viele Male pro Sekunde, und ABlyft prüft die Page jedes Mal. Halte JavaScript rules kurz und schnell und vermeide darin aufwendige Operationen.
Callback-Trigger
Mit Callback schreibst du die Logik selbst. Unter dem Trigger erscheint ein Feld für JavaScript. ABlyft führt deinen Code
beim Start aus (und bei jeder erneuten Ausführung, zum Beispiel nach ablyft.reInit()). Rufe activate() auf, wenn die Page aktiv sein soll. Du kannst außerdem ablyftTools und page
(ein Objekt mit der Page-id) verwenden.
// Activate the page when the checkout step 2 is rendered
ablyftTools.waitForElement('.checkout-step-2', () => {
activate();
});Rufe activate(false) auf, um die Page wieder zu deaktivieren, zum Beispiel wenn ein Modal geschlossen wird:
document.addEventListener('modal-opened', () => activate());
document.addEventListener('modal-closed', () => activate(false));activate() prüft weiterhin die URL-Regeln und JavaScript rules der Page. Die Page wird nicht aktiviert, wenn diese nicht passen.
API-Trigger
Mit API aktiviert dein eigener Code die Page mit einem activatePage-Aufruf, zum Beispiel in dem Handler, der dein Modal öffnet,
und deaktiviert sie mit deactivatePage. Einrichtung und Aufrufe sind in der Page API beschrieben.
Was passiert, wenn die Page deaktiviert wird
Der Deactivation mode der Page (Advanced Settings → Deactivation mode) steuert, ob Reset JS läuft und ob die Page aktiv bleibt. Siehe SPA navigation.
Den Code warten lassen: Hilfsfunktionen
Auch auf einer aktiven Page kann ein Element noch nicht existieren. Verwende im Variation-Code die
Tools, verfügbar als ablyftTools. Der Variation-Editor zeigt einen Code Helper
mit fertigen Snippets für die häufigsten Funktionen.
| Funktion | Verwende sie, um |
|---|---|
waitForElement | Code für jedes Element auszuführen, das zu einem Selektor passt, sobald es existiert, auch für später hinzugefügte Elemente |
elementIsInView | Code auszuführen, wenn ein Element in den Viewport scrollt |
domChanged | Code bei jeder DOM-Änderung auszuführen |
domLoaded | Code auszuführen, wenn das DOM bereit ist |
poll / check | auf eine beliebige Bedingung zu warten, die du definierst |
// Variation JS: change a button that is rendered later
ablyftTools.waitForElement('.add-to-cart', (button) => {
button.textContent = 'Add to basket';
});waitForElement ruft deine Funktion einmal pro Element auf. Wird das Element von deiner Anwendung ersetzt (zum Beispiel neu gerendert),
wird auch das neue Element behandelt.
Dynamische Daten: Audiences erneut prüfen
Audiences werden ausgewertet, wenn ein Experiment startet. Wird ein Wert erst später bekannt, zum Beispiel weil ein Cookie gesetzt oder ein Data-Layer-Eintrag gepusht wird, teile ABlyft mit, noch einmal nachzusehen:
ablyft.push({ eventType: 'reevaluateAudiences' });ABlyft wertet dann die Audiences der Experiments auf aktuell aktiven Pages neu aus, die noch nicht laufen. Visitors, die bereits von einem Experiment ausgeschlossen wurden, bleiben ausgeschlossen.
Bei Audiences, die davon abhängen, dass auf der Seite etwas passiert, musst du den Aufruf nicht selbst auslösen. Audience-Regeln
vom Typ JavaScript Trigger (rufe activate() auf, wenn die Audience passen soll) und dataLayer Event lösen die erneute
Prüfung automatisch aus. Siehe Data layer events.
Fehlerbehebung
- Page wird nie aktiviert: Prüfe die JavaScript rules in der Konsole deines Browsers und aktiviere den Debug-Modus. Aktivierte Pages werden protokolliert.
- Page wird aktiviert, aber die Änderung wird nicht angewendet: Dein Selektor passt nicht, oder das Element erscheint, nachdem dein
Code gelaufen ist. Umgib die Änderung mit
ablyftTools.waitForElement. - Änderung verschwindet, wenn die App neu rendert: Verwende
waitForElementstatt einer einmaligen Änderung, damit jede neue Kopie des Elements geändert wird.