Wie VWO ein reibungsloses Besuchererlebnis schafft, wenn Experimente auf einer Single Page Application (SPA) durchgeführt werden

Tauchen Sie ein, wie die native Unterstützung von VWO für dynamische Websites Ihnen das Experimentieren erleichtert, während Sie nahtlose Erlebnisse für Ihre Besucher schaffen.

Viele Websites werden als Single Page Applications (SPAs) erstellt, da sie gegenüber herkömmlichen statischen Websites nur wenige entscheidende Vorteile haben: Dynamische Websites sind schnell, kompakt und reaktionsschnell. Solche Websites ermöglichen es Ihnen, die Inhalte zu optimieren, die Ihre Benutzer sehen, um ansprechende und einzigartige Erfahrungen zu schaffen. Wenn Sie von Ihrem Entwicklungsteam hören, dass Ihre Website mit React, Vue, AngularJS, Ember oder Backbone erstellt wurde, arbeiten Sie wahrscheinlich mit einem SPA zusammen, und dieser Artikel ist für Sie relevant.

In diesem Artikel sprechen wir darüber, wie wir bei VWO das Experimentieren mit dynamischen Websites effektiv und einfach gestalten, mit integrierter Unterstützung für SPA-Tests, sodass Sie sich nur auf die Optimierungsbemühungen Ihrer Website-Erfahrung und auf nichts anderes konzentrieren können.

Aber lassen Sie uns zuerst über das Problem sprechen, das Sie überhaupt hierher geführt hat.

Herausforderungen beim Ausführen von Experimenten auf dynamischen Websites

Sie sind wahrscheinlich hier, weil die Änderungen, die Sie an Ihrer Zielseite vornehmen, beim Ausführen von Experimenten auf einer SPA für die Endbenutzer nicht sichtbar sind. Infolgedessen können Sie Ihre Ideen nicht so schnell testen und validieren, wie Sie möchten, und das führt zu Frustration.

Lassen Sie uns zunächst verstehen, dass sich SPAs von herkömmlichen Websites unterscheiden. Die gesamte Webseite wird jedes Mal geladen, wenn jemand eine herkömmliche Website besucht. In SPA werden jedoch nur einige Bereiche der Seite aktualisiert. Dies liegt daran, dass in SPAs Ressourcen wie HTML, CSS, Skripte usw., die das Erscheinungsbild Ihrer Webseite bilden, nur einmal geladen werden.

Je nachdem, wie der Benutzer mit verschiedenen Teilen der Webseite interagiert, ändert sich das, was Sie in einem bestimmten Abschnitt der Seite sehen, dynamisch als Reaktion auf die Aktion des Benutzers. Angenommen, wenn ein Benutzer auf eine Schaltfläche klickt, öffnet sich ein Popup. Dieses Pop-up ist die dynamische Änderung, die vom Framework gemäß der Benutzerinteraktion vorgenommen wird, ohne die Leistung zu beeinträchtigen. Einige weitere Beispiele für dynamische Änderungen in einem SPA sind wie folgt:

• Elemente in einer Suchergebnisliste, die erweitert werden kann, um ihre Details anzuzeigen.
• In einem Formular werden einige Felder nur dann auf der Seite angezeigt, wenn ein Besucher einen vordefinierten Wert aus einem Dropdown-Menü auswählt.
• Die Website verwendet einige Komponenten wie einen Kalender, eine Farbauswahl usw., die jedes Mal neu geladen werden, wenn der Benutzer sie verwenden muss.

Dies ist zwar gut für die Benutzererfahrung, aber das Ausführen einer Testkampagne mit Änderungen an einem dieser dynamischen Elemente (wie Suchergebnislisten, Dropdowns, Widgets, Popups, Banner usw.) auf Ihren Webseiten wird schwierig. Dies liegt daran, dass die an einer Komponente vorgenommenen Änderungen jedes Mal angewendet werden müssen, wenn sich etwas dynamisch auf der Website ändert.

Stellen Sie sich das so vor: Sie führen einen Test auf einer Webseite durch. Jedes Mal, wenn die Webseite geladen wird (durch einen Benutzer, der die Seite besucht) oder die Seite ein dynamisches Element wie oben beschrieben erstellt, zeigt das SPA-Framework den ursprünglichen Zustand (anders als die Variation, die Sie als Teil Ihres Tests zeigen möchten).

Was Sie brauchen, ist eine Experimentierplattform, die sicherstellt, dass Ihre Testvariante die ursprüngliche Ansicht ersetzt, sodass die Benutzer die gewünschte Variante sehen. Wenn Sie also einen Test für eine SPA festlegen (angenommen, Sie testen den Inhalt in einem Popup-Feld), erwarten Sie, dass die Teststeuerung und -variation wie folgt aussehen:

Aber ohne SPA-Unterstützung werden die Änderungen, die an der Variante vorgenommen wurden, auf die Steuerung zurückgesetzt, sodass beide identisch aussehen. Ganz so:

Dies ist nur eine vereinfachte Version dessen, was passiert. Wenn Sie daran interessiert sind, technisch zu verstehen, was hinter dem Bildschirm passiert, lesen Sie weiter, andernfalls können Sie zum nächsten Abschnitt des Artikels springen.

Einige Website-Frameworks wie GatsbyJS, Next.js, ReactJS usw. verwenden serverseitiges Rendering und speichern einen Schnappschuss Ihrer ursprünglichen Webseite, wie sie geladen werden sollte. Wenn Sie also ein Element auf der Seite zu Testzwecken ändern, erkennt das Framework die Änderung als „Problem“ und setzt die Seite in ihren ursprünglichen Zustand zurück, wie er im gespeicherten Snapshot angezeigt wird. Dies wiederum behindert Ihren A/B-Test.

Zweitens verwenden die neuesten Frameworks wie React, Gatsby, Next.js, Vue.js, Angular usw. das Konzept des zustandsbasierten Renderings. Wenn beispielsweise in React eine Änderung in einem der Zustände aufgrund der A/B-Testvariation implementiert wird, lädt sich die Benutzeroberfläche der Website automatisch in ihre ursprüngliche Form zurück, sodass Benutzer die Variation nie sehen. Dies schafft ein suboptimales Erlebnis für Website-Besucher.

Wie VWO das Experimentieren mit Single Page Applications mühelos macht

Nachdem wir das Problem besprochen haben, lassen Sie uns über die Lösung sprechen. Die fortschrittliche native SPA-Unterstützung von VWO in seinem Visual Editor, der Teil von VWO Testing ist, stellt sicher, dass in einem Experiment vorgenommene Änderungen in SPAs angewendet werden, um die Zuverlässigkeit der Kampagnen sicherzustellen und Ihren Besuchern ein reibungsloses Erlebnis zu bieten.

1. Testen dynamischer Elemente auf Ihrer Website

Während im vorherigen Abschnitt dynamische Elemente definiert wurden, wollen wir sie uns anhand eines konkreten Beispiels genauer ansehen. Bedenken Sie, dass Sie eine E-Commerce-Website haben. Wenn Sie auf der „Warenkorbseite“ auf die Schaltfläche „X“ (Schließen) klicken, wird eine Warnung als Popup-Fenster angezeigt. Jetzt möchten Sie Änderungen an der Aktionsbox kopieren, um zu sehen, ob umsetzbare Nachrichten und Handlungsaufforderungen Personen davon abhalten könnten, die Warenkorbseite zu schließen. Das Warnfeld ist zunächst nicht im Website-Code vorhanden, wird aber vom SPA-Framework hinzugefügt, wenn der Besucher auf die Schaltfläche „X“ (Schließen) klickt. Hier wird die Schaltfläche, die das Pop-up öffnet, auf dem Sie den Test ausführen, als Zielelement bezeichnet.

VWO stellt sicher, dass die Änderung, die Sie testen möchten, auf das Popup angewendet wird, sobald es geladen wird. Alles, was Sie tun müssen, ist eine Einstellung mit einem Klick auf eine Schaltfläche zu aktivieren. Weitere Informationen zu dieser Einstellung finden Sie in unserem Knowledge Base-Artikel.

Wie stellt VWO sicher, dass die Änderungen korrekt angewendet werden?

Einfach.

VWO überwacht die Seitenelemente (Videos, Bilder, Tabellen, Abschnitte usw.) zu jedem Zeitpunkt auf Änderungen, die an ihnen vorgenommen wurden. Wenn das Zielelement (im obigen Beispiel die Schaltfläche „X“ schließen) geladen wird, erkennt VWO es und wendet die von Ihnen in der Variation vorgenommene Änderung an. Dies geschieht auch dann, wenn die Webseite nicht neu geladen wird, sondern der Benutzer nur mit einem Abschnitt auf der Website interagiert.

Lassen Sie uns ein wenig technisch werden und es weiter untersuchen. Sie können dies bequem überspringen und zum nächsten Punkt übergehen, wenn technische Details nichts für Sie sind.

Auf einer dynamischen Website werden basierend auf dem Benutzerverhalten Elemente hinzugefügt, entfernt oder geändert. Ein DOM-Baum ist wie ein Repository aller Website-Komponenten (Schaltflächen, Banner, Popups, Widgets usw.) und hält eine Momentaufnahme des aktuellen Zustands der Website.

Die Bibliothek von VWO verwendet Mutation Observer – eine Browserschnittstelle, die es VWO ermöglicht, Änderungen im DOM-Baum einer SPA zu beobachten. Dies hilft bei der Erkennung neuer Elemente, die auf der Seite hinzugefügt, entfernt oder geändert wurden. In einem solchen Fall wendet VWO die Änderungen automatisch auf die Elemente an. Wann immer also Elemente dynamisch geladen werden, werden Änderungen angewendet, bevor sie dem Besucher angezeigt werden. Dies verbessert die Zuverlässigkeit von Kampagnen und stellt sicher, dass die Änderungen in den Variationen vollständig übernommen werden.

Wie verwaltet VWO Änderungen, die durch Framework-Rendering behindert werden ?

VWO hält die CTA-Schaltfläche ausgeblendet, bis das Framework-Rendering abgeschlossen ist. VWO überprüft wiederholt, ob das Rendern abgeschlossen ist. Sobald das Framework-Rendering abgeschlossen ist, beginnt die VWO-Kampagne mit der Ausführung.

Weitere Informationen zu diesen Einstellungen finden Sie in unserem Knowledge Base-Artikel.

2. Testen Sie jedes andere Seitenelement auf Ihrer Website

Wenn eine Seite geladen wird, setzen moderne SPA-Frameworks geänderte Elemente bei jedem Laden der Website in ihren ursprünglichen Zustand zurück. Wenn Sie also die Seite testen, werden alle Ihre Änderungen auf das Original zurückgesetzt. Nicht nur die dynamischen Elemente, sondern für alle Elemente auf der Seite verfolgt VWO die Änderungen, die Sie vorgenommen haben, um die Herausforderung des Testens mit dem SPA-Framework zu bewältigen. Beim Anwenden dieser Änderungen auf Ihre Webseite erkennt VWO alle auf der Seite vorgenommenen Änderungen (Einfügen, Löschen und Ändern von DOM-Knoten) durch den Test und wendet sie erneut an, um die Regelmäßigkeit der Benutzererfahrung sicherzustellen.

Es sind keine expliziten Maßnahmen erforderlich, um diese Verbesserung auf VWO zu ermöglichen. Dies ist eine integrierte Funktion, die für alle VWO-Kampagnen verfügbar ist, die mit dem Visual Editor erstellt wurden, unabhängig vom Framework, auf dem Ihre Website aufgebaut ist.

Sehen wir uns einige Anwendungsbeispiele für Änderungen an, die der VWO Visual Editor handhabt.

1. Angenommen, Sie haben eine sekundäre CTA-Schaltfläche (z. B. „Zur Wunschliste hinzufügen“) von Ihrer E-Commerce-Website entfernt, um zu testen, ob diese Änderung die Anzahl der Klicks auf den primären CTA (z. B. „Zum Warenkorb hinzufügen“) beeinflusst. Dies ist ein Testanwendungsfall, bei dem Sie ein Element auf der Website löschen. Auch wenn Sie die Schaltfläche gelöscht haben, bleibt sie im virtuellen DOM bestehen, das von Frameworks wie React erstellt wurde, und gibt einen Fehler aus, wenn die Website geladen wird.

2. Stellen Sie sich nun vor, dass Ihre E-Commerce-Website über einen Registrierungsablauf verfügt, der neben der Schaltfläche „Jetzt senden“ ein Texteingabefeld zum Erfassen der E-Mail-Adressen der Besucher anzeigt. Wenn Sie das Erscheinungsbild des Texteingabefelds ändern, ändern sich auch die damit verknüpften Stilkomponenten der Website. Der Visual Editor von VWO stellt sicher, dass die zuletzt angewendeten Änderungen das sind, was die Benutzer sehen. Sehen Sie sich an, wie Sie Änderungen an einem Formularfeld in einer SPA vornehmen und sicherstellen können, dass die für die Variation ausgewählten Besucher diese Änderungen sehen, anstatt die Kontrolle zu sehen.

Wie nutzen Sie VWO für Ihre Single Page Application?

Um VWO für Ihr SPA zu verwenden, müssen Sie einfach den VWO SmartCode im Head-Bereich Ihrer Website hinzufügen und genießen die Standardunterstützung für SPA-Websites.

Mit einer so einfachen Integration können Sie sofort loslegen. Melden Sie sich für eine kostenlose Testversion an, erkunden Sie die Möglichkeiten von VWO oder fordern Sie eine Demo bei unseren Produktexperten an. Sie können auch mehr über unsere neuesten, spannenden Produkt-Updates erfahren.