A/B-Testing in AngularJS, Backbone.js und anderen Single Page Applications




Immer mehr Webseiten wirken eher wie Apps als starre Seiten – und die meisten davon sind als sogenannte Single Page Applications (SPA) mit Javascript-Frameworks wie AngularJS, Backbone.js, Ember.js oder YUI umgesetzt. Was macht diese Web-Apps so besonders? Und wie können wir mit Optimizely einfach, schnell und ohne großen technischen Aufwand A/B-Tests erstellen?

Schauen wir uns SoundCloud als Beispiel an. Wenn ich die Homepage öffne, wird eine komplette Seite mit Header, Navigation und Inhalt heruntergeladen. Klicke ich nun auf einen Link, wird nicht erneut die gesamte Seite heruntergeladen, wie das bei einer klassischen Seite der Fall wäre. Anstelle dessen wird nur der Inhalt, der sich ändert, geladen und in der existierenden Seite ausgetauscht.

Man kann sich SoundCloud als einen Bogen Briefpapier mit Briefkopf vorstellen. Bei einer klassischen, statischen Seite würde für jede neue Seite verschwenderisch ein komplett neuer Bogen verwendet werden, obwohl sich der Briefkopf von Seite zu Seite nicht ändert. Bei Single Page Apps hingegen verwenden wir immer den gleichen Briefpapierbogen, schreiben Inhalte darauf und radieren diese wieder aus sobald wir Platz für neue Inhalte brauchen.

Vergleich: Statische Seiten zu Single Page Applications (Beispiel SoundCloud)

Klicken Sie auf die Grafik, um sie zu vergrößern

Einer der größten Vorteile ist, dass weniger Daten übertragen werden müssen (der “Briefkopf” wird schließlich nur einmal heruntergeladen) und Folgeseiten werden nach dem initialen Laden daher meist schneller angezeigt und wirken interaktiver (eben eher wie eine App und weniger wie eine starre Seite).

Wie funktioniert Optimizely mit AngularJS und anderen Single Page Apps?

Um bei unserem Vergleich zu bleiben: das Optimizely-Snippet ist im Briefkopf (dem head-Element der Seite) eingebaut und wird deshalb nur initial einmalig geladen. Das ist großartig für die Seitenladezeit, allerdings wird auf diese Art nur einmalig nachgeschaut, ob auf der Seite Experimente laufen sollen.

Optimizely kann nicht wissen, wann sich die Seite so verändert hat, dass es sich für den Besucher wie eine neue Seite anfühlt. Glücklicherweise können wir dieses Signal ganz einfach in Frontend-Frameworks wie AngularJS oder Ember.js einbauen.

Die meisten dieser Frameworks sind “stateful” aufgebaut, was bedeutet, dass sich die angezeigte URL in der Adresszeile abändert, wenn sich der Inhalt der Seite bedeutend verändert. Wenn ich bei SoundCloud beispielsweise von der Homepage auf mein Profil klicke, wird zwar nicht die Seite komplett neu geladen, es passt sich aber wohl die angezeigte URL an. Diese Anpassung der URL wird in den meisten MVC-Frameworks (Model-View-Controller) vom “Router” übernommen und dieser feuert ein “Success-Event” sobald die Änderung erfolgreich abgeschlossen ist.

Es gibt zwei Möglichkeiten Optimizely zu integrieren:

Conditional Activation (Empfehlung für Enterprise-Kunden)

Für Kunden unseres Enterprise-Abos empfehlen wir mithilfe der “Conditional Activation”-Funktion auf das Signal des Frameworks zu hören, dass sich die URL geändert hat. Dies ist die effizienteste Vorgehensweise und erfordert zudem keinerlei Code, der auf der Seite selbst live gestellt werden muss.

Diese Funktion ist in unserer englischsprachigen Wissensdatenbank ausführlicher beschrieben und wir haben für AngularJS hier ein Code-Beispiel zur Verfügung gestellt. Ihr Solutions Architect hilft Ihnen gerne bei der Umsetzung.

Manual Activation

Mit der “Manual Activation”-Funktion, die allen Optimizely-Kunden zur Verfügung steht, können Sie an der Stelle im Code Ihrer Seite, an der die Adressänderung stattgefunden hat, nun das Signal an Optimizely geben, dass erneut überprüft werden soll, ob für die aktuelle URL ein Experiment ausgeführt werden muss. Dieses Signal besteht aus einer Zeile Javascript und in einem AngularJS-Beispiel sieht das so aus:

angular.module("SampleApp").run[
  "$rootScope", "$location", ($rootScope, $location) - >

  /* Activate experiments when the page first loads: */
  window["optimizely"] = window["optimizely"] or[] window["optimizely"].push["activate"]

  /* Activate experiments when the URL changes without a page reload: */
  $rootScope.$on "$locationChangeSuccess", - >
  window["optimizely"].push["activate"]
]

In Ihrer “stateful” Single Page Application muss unser “Manual Activation”-Signal so üblicherweise nur einmal eingebaut werden, ähnlich unseres Snippets. Ab jetzt können Sie nach Herzenslust testen ohne etwas am Code Ihrer Seite verändern zu müssen.

Wenn Ihre Single Page App die URL nicht jedes Mal ändert, wenn es neue Inhalte gibt (also nicht “stateful” ist), kann mit der gleichen Methode auch ein ganz spezifisches Experiment aktiviert werden. Hierzu übergeben Sie einfach die ID eines Experiments als zusätzliches Argument:

window.optimizely = window.optimizely || [];
window.optimizely.push(["activate", EXPERIMENT_ID]);

Nur eines ist noch wichtig: Beim Erstellen eines Experiments müssen Sie in den Optionen unter Aktivierungsmodus angeben, dass es sich um ein Experiment handelt, dass manuell aktiviert wird:

Screenshot: Manual Activation

Webinar-Aufnahme zu AngularJS und Optimizely

Tobias Kleyer von DieProduktMacher (eine unserer Solutions-Partner-Agenturen) und ich haben vor einiger Zeit eine Online-Schulung zum Thema dieses Posts durchgeführt. Wer lieber zuschaut als liest, findet hier eine Aufnahme der Schulung:

Haben Sie Erfahrungen mit Optimizely in AngularJS, Embed.js oder vielleicht einem ganz anderen Frontend-Framework sammeln können? Erzählen Sie uns in den Kommentaren davon oder wenden Sie sich bei konkreten Fragen via support@optimizely.com direkt an uns.