Welche Rolle spielt Ajax für A/B-Tests?

Welche Rolle spielt Ajax für A/B-Tests?

Ajax steht für Asynchronous JavaScript and XML und ermöglichst Ajax vor allem eine Kommunikation von Client und Server ohne die Seite neu laden zu müssen.

Ajax schafft damit in der Entwicklung seit Jahren neue Möglichkeiten und hat vor allem die User-Experience in Web deutlich verbessert. In der Welt des A/B-Testings und der Personalisierung, stellt Ajax allerdings die Entwickler häufig vor Herausforderungen. 


Synchron vs. Asynchron

Um Ajax zu verstehen, sollte man zunächst verstehen wie JavaScript funktioniert. Die Geschichte ist sehr schnell erzählt. Denn JS kann lediglich eine Operation pro Zeiteinheit durchführen. Das ist die ganze Story.

Schaubild „JavaScript synchron vs. asynchron“

Das bedeutet, dass jede Zeile Code nacheinander ausgeführt wird. 

Die JS Community hat jedoch mit der Zeit Wege gefunden, JavaScript asynchron(er) zu machen. Dazu gehört u.a. Ajax.

Im Schaubild (oben, links) wird deutlich, dass der JavaScript Code in der synchronen Ladeweise blockiert wird. Mit anderen Worten: Jede der Funktionen von 1-5 ist davon abhängig, dass zunächst die vorherige vollständig durchlaufen wurde. Erst wenn Funktion 1 fertig ist, dann kann Funktion 2 ausgeführt werden usw.

Eine Möglichkeit diese Synchronität auszuhebeln, sind asynchrone Funktionen. Funktion 3 im Schaubild rechts, könnte z.B. eine Ajax-Funktion sein. Diese wird nicht zwangsläufig an dritter Stelle ausgeführt, sondern könnte an letzter, vorletzter oder sogar null-ter Stelle, also vor Funktion 1, ausgeführt werden.


Dynamische Inhalte bei A/B Tests & Personalisierungen

Die Möglichkeit ohne Page-Refresh Informationen zwischen Client und Server auszutauschen, hat den großen Vorteil, dass der Server mit Inhalten antworten kann. Diese wiederum lassen sich mit JavaScript ins DOM einfügen. In einem Zusammenspiel zwischen JavaScript, HTML und CSS lässt sich damit eine viel dynamischere User-Experience gestalten. 

Wie funktioniert das genau?

Das Resultat dieses Zusammenspiels zwischen Client und Server, können beispielsweise dynamischer Inhalt sein. Dabei werden neue Views generiert sobald eine Kette aus Bedingungen erfüllt worden ist.

Nehmen wir als Beispiel einen Checkout-Prozess, indem Content jeweils für Step 1, Step 2 und anschließend Step 3 in das Dokument geladen werden. Dazu muss der User in jedem Schritt (erfolgreich) seine Eingaben gemacht haben. Die Seite wird dabei weder verlassen, noch neu geladen. Um den Prozess abzurunden, werden mit JavaScript die Pfade in der URL-Leiste des Browser manipuliert und einen URL-Wechsel zu simulieren.

Bei einem A/B Test oder einer Personalisierung, soll in der Regel ebenfalls das DOM manipuliert werden. Im Normalfall wird JavaScript Code einmalig (beim Laden der Seite) ausgeführt und setzt die Veränderungen unmittelbar nach dem Ladevorgang um. Wenn die Webseite aber asynchrone Methoden verwendet, wie etwa Ajax, dann können nachträglich Änderungen der Website, die des A/B-Tests überschreiben.

A/B Test/Personalisierung auf Webseite mit asynchroner Funktion (Ajax)

In dem konkreten Fall aus dem Schaubild, bestimmt nicht der Page-Load „das Wann“, sondern die Funktion X. Das bedeutet, dass der Zeitpunkt ungewiss ist, wann und vor allem ob der Server mit neuem Inhalt antwortet. Es müssen also andere Wege gefunden werden, um diese Ereignisse zu berücksichtigen.

Nochmal zur Erinnerung, hierbei geht es lediglich um das Erreichen eines neuen Steps in einem Checkout-Prozess. Für gewöhnlich würde man an dieser Stelle lediglich die URL abfragen und wüsste in welchem Schritt des Prozesses man sich befindet.

Mehraufwand berücksichtigen

Es gibt an dieser Stelle keine echte Empfehlung oder Lösung. Asynchrone Methoden sind fester Bestandteil des Webs und gehören zu jeder modernen Website dazu. Allerdings sollte man den Mehraufwand der sich in der Entwicklung ergeben kann, nicht unterschätzen. Die vorgestellte Methode ist nur ein Beispiel von vielen. In Wahrheit wird diese Art der Server-Client-Kommunikation noch viel häufiger eingesetzt.

Erfahrene Entwickler werden damit souverän umgehen können, sind allerdings dabei an eine detaillierte vorab-Analyse und Spezifikation angewiesen.


tl;dr

Ajax ist eine asynchrone Methode in JavaScript, die eine Server-Client Kommunikation ohne Neuladen der Seite ermöglicht. Damit lassen sich dynamische Inhalte generieren. Für A/B Tests ist dies von besonderer Bedeutung, da die dynamischen Inhalte technisch anders behandelt werden, als Seiten die „normal“ geladen werden. Der sich daraus ergebende Mehraufwand für die Umsetzung sollte in jedem Fall mit berücksichtigt werden.

TItelbild: Blake Connally on Unsplash

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nächster Beitrag:

Die Auswirkungen von Polling auf Single-Page-Applications

Die Auswirkungen von Polling auf Single-Page-Applications