Führen Sie A/B-Tests auf jedem Single Page Application (SPA) Framework durch

Die Anwendungsstacks ändern sich ständig und das sehr schnell. Single Page Applikationen (SPA), die mit einem JavaScript-Framework (JS) wie ReactJS, Vue.JS, AngularJS, GatsbyJS und vielen anderen erstellt wurden, bieten reibungslose Experiences und sind daher bei den Nutzern besonders beliebt. A/B-Tests können für Marketer zu einem echten Problem werden, wenn ihre Optimierungslösung diese Stacks nicht unterstützt.

1 SPAs erfordern kein Neuladen der Seite – eine Herausforderung für A/B-Testing Lösungen

Sobald ein Benutzer eine herkömmliche Non-SPA-Seite aufruft und dort auf einen Link klickt, wird eine neue Seite mit einer anderen URL geladen. Das A/B-Test-Snippet wird ebenfalls erneut geladen, um sicherzustellen, dass der Kontext der Seite von der Lösung ausgewertet werden kann. Auf diese Weise können Sie den Weg des Nutzers nachverfolgen und seine Experience bei Bedarf kontextualisieren.

Bei einer Single Page Application bedeutet die dynamische Navigation, dass die geladene Seite kein erneutes Laden benötigt. Stattdessen werden virtuelle Seitenansichten von der App bereitgestellt, während die Besucher verschiedene Bereiche der Website durchsuchen. Ziel ist es, ähnlich wie bei nativen mobilen Anwendungen, eine natürliche Experience zu schaffen. Ermöglicht werden kann dies durch JavaScript-Frameworks wie ReactJS, Vue.JS, AngularJS oder GatsbyJS.

Das Fehlen des erneuten Ladens hat jedoch Auswirkungen auf A/B-Tests, da die Tools nur einmal auf der ersten, für den Besucher sichtbaren Seite geladen wird. Die Lösung bekommt deshalb ein Wechsel zu einer anderen Seite nicht mit. Wenn der „Tag“ Ihrer Optimierungslösung nur einmal lädt, und sich nicht entsprechend der Entwicklung des Besuchers aktualisiert, wird die Nachverfolgung seiner User Journey in Echtzeit kompliziert oder sogar praktisch unmöglich.

2 Kameleoon – mit jedem Single Page Application Framework kompatibel

Was nützt eine leistungsstarke Technologie, wenn sie nicht in jeder Situation eingesetzt werden kann? Welches JavaScript-Framework Sie auch immer für Ihre Single Page Applications verwenden, mit Kameleoon können Sie es optimieren.

Bei Single Page Applications gibt es normalerweise zwei verschiedene Szenarien. Jedes der zwei Szenarien kann Auswirkungen auf Experimente haben, die mit dem Graphic-Editor erstellt wurden. Der Grund hierfür ist, dass die Anwendungsdatei nur auf der ersten Seite, die der Besucher sieht, geladen wird.

1. Die Seite wird nicht neu geladen, aber die URL wird aktualisiert

Die meisten Single Page Applications, die heutzutage entwickelt werden, sind von diesem Typ. Obwohl die SPA virtuelle Seitenansichten lädt, sobald Besucher durch verschiedene Abschnitte der Site navigieren, werden URLs von der SPA dynamisch umgeschrieben.

Kameleoon erkennt automatisch die Navigation der Besucher zwischen den Seiten, indem es die dynamischen URL-Änderungen beobachtet. Wenn eine Änderung auftritt, lädt Kameleoon die gesamte Engine neu und wertet den kompletten Kontext der Seite neu aus, sodass Experimente weiterhin wie gewohnt auf Single Page Apps durchgeführt werden können.

2. Die URL bleibt statisch

Dieser Fall ist selten, aber dafür viel komplizierter. Wenn sich die URL nicht ändert, können die meisten Lösungen keine Veränderungen, die innerhalb der Single Page App auftreten, erkennen. Außerdem können die meisten SPAs zusätzliche Elemente hinzufügen, oder Elemente dynamisch ändern, sobald ein Besucher damit interagiert.

Kameleoon löst dieses Problem, indem es neue Veränderungen durch MutationObserver auf der SPA in Echtzeit überwacht, selbst wenn die Seite nicht vollständig neu geladen wird. So können wir Änderungen einer Variation erstmalig oder erneut anwenden, wenn sich auf der Website etwas geändert hat.

Für Entwickler, die unsere Activation-API nutzen um Experimente zu programmieren, gibt es jetzt eine neue Funktion, die bei Bedarf aufgerufen werden kann. Damit kann ein Neuladen der Kameleoon-Engine erzwungen werden, um weitere Anwendungsfälle zu verwalten.

Für Nutzer des grafischen Editors unterstützt Kameleoon derzeit Style Anpassungen, Textänderungen, Position Aktualisierungen (Vertauschen, Einfügen nach oder vor) und die Verwendung von benutzerdefinierten CSS. Das Einfügen von neuen Elementen auf der Seite wird derzeit nicht unterstützt.

Bereit zum Loslegen? Sehen Sie sich diese Schritt-für-Schritt-Anleitung und die technische Dokumentation an.

Fordern Sie hier eine Demo an, um die Funktion und die Kameleoon-Plattform in Aktion zu sehen.

Noch Fragen oder neugierig? Wir freuen uns von Ihnen zu hören. Sie erreichen uns unter product@kameleoon.com