Best Practices für die Ausführung von A/B-Tests auf Single Page Applications (SPAs)

Dieser Artikel ist Teil 2 der Reihe A/B-Tests bei Single-Page-Anwendungen .

In Teil 1 haben wir das Konzept der Single Page Application (SPA) vorgestellt, gezeigt, warum es immer beliebter wird, und uns 10 der besten A/B-Testplattformen angesehen, die Sie für Single Page Apps verwenden können .

Aber das Ausführen von A/B-Tests auf SPAs kann aufgrund ihrer Funktionsweise etwas schwierig sein. In diesem Artikel geben wir Ihnen praktische Ratschläge zur Durchführung eines Experiments auf einem SPA und einige Best Practices, die Sie befolgen sollten.

Die Entwicklung von SPA-Frameworks

SPAs sind kein neues Konzept.

Ein Patent aus dem Jahr 2002 beschreibt eine Technologie, die der heutigen Version von SPA ähnelt.

Die seit 2006 als Netzwerkstandard verwendete AJAX-Technik erleichterte jedoch die Implementierung. Es handelt sich um eine Reihe von Strategien zum Erstellen asynchroner Webanwendungen mit einer Vielzahl von clientseitigen Technologien. Die Software kann dank AJAX im Hintergrund Daten vom Server senden und empfangen, ohne den aktuellen Zustand der Seite oder den Anzeigemodus der Inhalte zu verändern und somit das Benutzererlebnis nicht zu beeinträchtigen.

Die Einführung von AJAX hingegen war kein Wendepunkt bei der Einführung von SPA.

Die steigende Popularität von SPAs ist Teil eines größeren Trends, der durch das schnelle Wachstum des Frontends und die wachsende Bedeutung von UX in den letzten Jahren angeheizt wurde.

SPAs wurden zunächst mit Java-Applets oder Flash-Programmen sowie den „reinen“ JavaScript- oder jQuery-Bibliotheken erstellt.

Allerdings haben Front-End-Frameworks wie Angular.js, React.js und Vue.js – alles relativ neue JavaScript-Frameworks – ihre Entwicklung unterstützt.

Welche Technologien stecken hinter einer SPA-Architektur?

Ein SPA ist im Wesentlichen ein JavaScript-Framework mit HTML5- und CSS3-Unterstützung.

Unter Verwendung dieser Komponenten sind jedoch einige unterschiedliche Bibliotheken und Frameworks entstanden und wurden in der Entwicklungswelt übernommen:

1. Eckig

Angular wurde von Google entwickelt und ist das ausgereifteste und älteste der 3 Frameworks mit detaillierter Dokumentation, aber einer steilen Lernkurve.

Es ist in eine ursprüngliche Model View Controller (MVC)-Architektur eingebettet, verwendet jedoch meistens eine MVVM (Model-View-ViewModel), die es mehreren Entwicklern ermöglicht, separat an demselben App-Bereich zu arbeiten. Bei der Aktualisierung auf neue Versionen kann es zu einigen Migrationsproblemen kommen, aber Angular ist beim Hochskalieren am zuverlässigsten und eignet sich hervorragend für große, komplexe Projekte.

Aufgrund von TypeScript ist Angular eine fantastische Wahl für große Entwicklerteams, und einige Unternehmen setzen diese Technologie bereits in ihren anderen Produkten ein.

Auf GitHub ist es ein etabliertes, ausgereiftes Framework mit einer großen Anzahl von Mitwirkenden.

Google und seine Produkte wie Google Drive und Gmail sowie Wix gehören zu den Nutzern von Angular for SPAs.

2. React.js

React wurde von Facebook entwickelt und Open Source gemacht. Es wurde hauptsächlich für die Erstellung von Benutzeroberflächen (Facebook, WhatsApp und Instagram) verwendet.

Es ist aufgrund seiner geringen Codegröße und seiner Fähigkeit, sich nahtlos in andere Frameworks zu integrieren, sehr beliebt. Es hat auch eine einfache Methode zum Migrieren zwischen Versionen. (Normalerweise eine Ein-Klick-Migration).

Es wird häufig in Verbindung mit Redux verwendet, um den Status von Anwendungskomponenten zu verwalten. Auch Uber nutzt die React.js-Technologie in seinen Produkten.

React eignet sich gut für diejenigen, die gerade erst mit JavaScript-Frontend-Frameworks beginnen, sowie für Start-ups und agile Entwickler. Darüber hinaus bietet diese JavaScript-Bibliothek wertvolle Integrationsmöglichkeiten mit einer Vielzahl anderer Frameworks und Technologien, was sehr nützlich ist, wenn Sie an einem Projekt mit einer großen Umgebung arbeiten. Von allen SPA-Frameworks hat React die meisten Beiträge auf GitHub, was Entwicklern hilft, potenzielle Probleme zu beheben.

Es hat die einfachste Lernkurve der 3 Frameworks und eignet sich am besten für Projekte mit kurzer Frist, die viel Skalierbarkeit erfordern.

3. Vue.js

Vue.js ist nicht im Besitz eines großen Unternehmens wie Facebook oder Google, gewinnt aber immer noch an Fahrt mit neuen Nutzern, insbesondere in Asien. Es ist das neueste der oben genannten SPA-Frameworks und wurde 2014 von Evan You, einem ehemaligen Google-Mitarbeiter, gegründet. Ein Großteil der Dokumentation ist normalerweise auf Chinesisch, aber es gibt immer noch Schulungsquellen.

Das Framework ist sehr leicht und kann verwendet werden, um einfach leistungsstarke Anwendungen zu erstellen.

Für die meisten Entwickler gibt es keine größeren Probleme beim Erstellen in einem dieser Frameworks, die Entscheidung hängt wirklich von den Hauptfunktionen jedes einzelnen ab.

Vue.js wird jetzt von Unternehmen wie Baidu, GitLab und Alibaba für ihre Bedürfnisse verwendet.

Wie Single-Page-Apps funktionieren

SPAs haben ein geradliniges Design. Es werden sowohl clientseitige als auch serverseitige Rendering-Technologien verwendet.

Wenn Sie auf einer Nicht-SPA-Website eine URL in Ihren Browser eingeben, sendet der Browser die Anfrage an einen Server und empfängt als Antwort eine HTML-Seite.

Auf einer SPA-Website liefert der Server nur das HTML-Dokument bei der ersten Anfrage und JSON-Daten bei nachfolgenden Anfragen. Dies weist darauf hin, dass ein SPA den Inhalt der aktuellen Seite neu schreibt, anstatt die gesamte Website neu zu laden.

Kurz gesagt, ein SPA funktioniert so:

1. Der Client stellt zunächst eine Verbindung mit dem Server her und erhält den Seiteninhalt, der hauptsächlich aus HTML-Code, CSS und einem JavaScript-Bundle besteht, das alle Skripte enthält, die zum Ausführen der Anwendungslogik erforderlich sind.
2. Die Aktion eines Benutzers aktiviert die Ausführung relevanter JavaScript(s), die dann AJAX-Anfragen an den Server stellen. Die Daten liegen normalerweise im JSON-Format vor und erfordern keine vollständige Webseitenaktualisierung.

Anstelle der normalen Technik eines Browsers, der eine komplett neue Seite startet, interagiert eine Single Page Application mit Benutzern, indem sie bestehende Webseiten zwangsweise mit neuartigen Daten vom Webserver modifiziert. Der Browser ruft den erforderlichen HTML-, JavaScript- und CSS-Code oder andere geeignete Ressourcen ab und fügt sie den Seiten nach Bedarf hinzu.

Obwohl die HTML5-Verlaufs-API oder der Standort-Hash verwendet werden können, um die Navigierbarkeit und Wahrnehmung verschiedener logischer Seiten in der Webanwendung bereitzustellen, wird die Seite zu keinem Zeitpunkt während des Vorgangs neu geladen und überträgt die Kontrolle nicht auf eine andere Seite.

Wenn Sie ein Beispiel einer Single Page Application in Aktion sehen möchten, gehen Sie zu diesem Link und klicken Sie auf die Hauptseite, die Liste der neuesten Kurse und das Hauptmenü. Wenn Sie dies tun, werden Sie feststellen, dass die Seite nicht vollständig neu geladen wird, sondern nur neue Daten über die Leitung gesendet werden, während sich der Benutzer durch die Anwendung bewegt.

Dies ist ein Beispiel für ein SPA.

Für wen sind SPAs am besten geeignet?

Aufgrund der Vorteile von SPAs sind sie heute in vielen Situationen die bevorzugte Lösung.

Sie zeichnen sich durch Projekte mit einer Vielzahl von Webtechnologien aus, bei denen Leistung und ein angenehmes Benutzererlebnis wichtiger sind als Inhalt.

Es gibt viele große Player, die SPAs verwenden. Facebook, Gmail, Google Maps, Netflix und Paypal sind einige der bekanntesten Beispiele für diese Art von Technologie (siehe unten).

Warum sind A/B-Tests bei SPAs schwierig?

Alle drei Frameworks – React.js, Angular.js und Vue.js – sind bei JavaScript-Entwicklern sehr beliebt, da sie die Entwicklung anspruchsvoller Benutzeroberflächen ermöglichen, die bessere Benutzererfahrungen und höhere Konversionsraten schaffen.

Sie sind für Entwickler sehr wünschenswert, weil

• Eine Aktualisierung der Seite ist nicht erforderlich
• Seitenladegeschwindigkeiten sind schneller
• Interaktionen sind reichhaltig und fließend
• Datenübertragungen werden reduziert
• Wiederverwendbare Teile ermöglichen eine schnellere Entwicklung
• Die Entwickler-Community ist gut etabliert

Sie sind auch die Anlaufstelle für jeden, der ein neues SPA gründet.

Es gibt jedoch einen großen Nachteil: Aufgrund der Funktionsweise dieser Frameworks haben clientseitige A/B-Testtools Schwierigkeiten, richtig zu funktionieren .

Wenn jemand eine Webseite in einem SPA durchsucht, wird die Seite – einschließlich der URL – nicht aktualisiert . Der Status der Seite variiert mit jeder Benutzerinteraktion (z. B. die verschiedenen Elemente, die auf dem Bildschirm sichtbar sind).

Da A/B-Testing-Tools normalerweise nur einmal während des anfänglichen Ladens der Seite Anpassungen vornehmen, werden diese nachfolgenden Interaktionen nicht berücksichtigt.

Hier sind zwei gängige Szenarien:

1. Wenn Sie Seitenaufrufe in Ihrem SPA aktiviert haben, erhalten Sie einen Seitenaufruf, wenn jemand eine URL besucht, aber keinen zweiten, wenn er auf einer anderen Seite navigiert, auf der Seitenaufrufe aktiviert sind. Dies liegt daran, dass das Material in die aktuelle Seite und nicht in eine neue Seite geladen wird.
2. Wenn Sie versuchen, ein Ereignis auf eine bestimmte URL zu beschränken, tritt dasselbe Problem auf. Das A/B-Testing-Tool „glaubt“, dass es auf derselben Seite bleibt, auf der es zuerst geladen wurde, selbst wenn der Benutzer denkt, dass er sich auf einer anderen Seite befindet. Da Teile in die Site hinein- und herausbewegt werden, kann es zu Schwierigkeiten beim Überwachen von Klicks oder anderen Ereignissen kommen.

Clientseitige A/B-Testsoftware und Personalisierungsplattformen verlassen sich zum Rendern von Erlebnissen auf vollständige Seitenladevorgänge.

Da dieses Konzept bei der Verwendung von SPA-Frameworks wie React, Angular oder Vue fehlt, wird es schwieriger festzustellen, ob neue Inhalte zur Seite hinzugefügt wurden oder sich der Status bestehender Inhalte geändert hat – und, was noch wichtiger ist, wann maßgeschneiderte Inhalte eingefügt werden müssen.

A/B-Testing-Tools müssen also in der Lage sein, den Kontext des Besuchers zu erkennen, z. B. ob er auf einer Produktliste, Detail- oder Warenkorbseite angekommen ist und an welcher Stelle frisches Material bereitgestellt werden sollte.

Das bedeutet, dass das Tech-Team ständig auf dem Laufenden bleiben muss, wenn sich modularisierte React SPA- oder Angular SPA-Komponenten ändern und die Erfahrungen, die diese Komponenten beeinflussen, in Echtzeit aktualisieren.

Jede Benutzerinteraktion in React.js führt beispielsweise dazu, dass eines oder mehrere der UI-Elemente aktualisiert werden, wodurch alle von der A/B-Testlösung vorgenommenen Änderungen gelöscht werden.

Clientseitiges Testen vs. serverseitiges Testen auf SPAs

Wenn es um A/B-Tests auf einem SPA geht, gibt es zwei Möglichkeiten:

1. Isolieren Sie die verschiedenen „Zustände“ der Anwendung, die Sie testen möchten, und richten Sie sie dann so ein, dass bei der Anzeige jedes „Zustands“ eine API aufgerufen wird, um die entsprechenden Änderungen vorzunehmen. Dies wird als bedingte Aktivierung bezeichnet und erfolgt auf der Clientseite .

Einige Beispiele für „Zustände“ sind das Anzeigen eines Abonnementformulars, das Laden einer Liste mit Suchergebnissen und so weiter.

2. Hardcoding der Änderungen auf der Serverseite oder eine benutzerdefinierte Bereitstellung für jede neue Erfahrung.

Beide Optionen werden durch das verwendete SPA-Framework beeinflusst. Wie Sie vielleicht erraten haben, erfordern sie also viel Zusammenarbeit zwischen dem technischen Team und den Vermarktern, um gut zu funktionieren.

Lassen Sie uns nun diese beiden Optionen durchgehen und sehen, was Teams tun müssen, um erfolgreich zu sein.

Bedingte Aktivierung auf der Clientseite

Wenn Sie dennoch clientseitige Tests für eine SPA-Anwendung durchführen müssen, gibt es eine Problemumgehung.

Um sicherzustellen, dass Testskripte nur ausgeführt werden, wenn die Anwendung den gewünschten Zustand erreicht, können Webentwickler eine Funktion namens bedingter Aktivierungsmodus verwenden.

Wenn Sie mit der bedingten Aktivierung nicht vertraut sind, ist es ein einfach zu verstehendes Konzept.

Die bedingte Aktivierung gibt Ihnen im Wesentlichen die Möglichkeit zu definieren, wann ein Experiment anders als durch seine Standardmethode bei einer Seitenaktualisierung aktiviert werden soll.

Dies kann erreicht werden, indem ein bisschen JavaScript geschrieben wird. Dazu gibt es zwei Möglichkeiten.

1. Die Polling-Funktion

Die Polling-Funktion ist die einfachste Art, die bedingte Aktivierung zu verwenden. Die Funktion scannt die Seite alle 50 ms, bis ein bestimmtes Element erscheint – dies kann ein Modal, ein Div oder sogar die gesamte Seite sein.

Das Experiment beginnt, wenn das Element erscheint.

Die A/B-Testplattform generiert einige JavaScript-Zeilen, die Sie ändern können, je nachdem, nach welchem ​​Element die Abfragefunktion suchen soll.

Das Experiment wird aktiviert, sobald die Funktion TRUE ergibt.

2. Die Callback-Funktion

Die Ausführung der Callback-Funktion ähnelt der der Polling-Funktion, fügt jedoch etwas Flexibilität hinzu.

Mit dieser Funktion können Sie jede gewünschte JavaScript-Bedingung eingeben und das Experiment starten, wenn sie TRUE ergibt.

Während die Polling-Funktion die Seite ständig anpingt, um zu sehen, ob ein bestimmtes Element vorhanden ist, ist die Callback-Funktion passiver und verlässt sich auf einen Event-Handler.

Serverseitiges Testen

Wenn Sie serverseitige Tests durchführen, werden keine Änderungen auf Browserebene vorgenommen. Vielmehr werden die Variationsparameter des Experiments („Benutzer 1 sieht Variante A“) auf Serverebene bestimmt und über einen Dienstanbieter direkt in die JavaScript-Anwendung eingehängt, was es einfacher macht, kompliziertere, dynamische Inhalte zu testen, die über die Grenzen eines statischen hinausgehen Benutzeroberfläche der Website.

Nehmen Sie zum Beispiel Social-Media-Apps, die meistens SPAs sind. Während Frontend-Client-seitige Tests verwendet werden können, um mit diesen zu experimentieren, ist dies aufgrund der beteiligten dynamischen Inhalte viel komplizierter, weshalb der Wechsel zu serverseitigen Tests den Prozess viel einfacher macht.

Beispiele für A/B-Tests auf SPAs

Auf welche realen Fälle von A/B-Tests bei Single-Page-Anwendungen könnten Sie stoßen?

Ändern eines Bildes auf einer Zielseite

Nehmen wir an, Sie müssen ein Experiment auf einer SPA durchführen, um 50 % der Zielgruppe, die auf einer bestimmten Seite gelandet ist, ein dynamisches Bild zu zeigen. Das in diesem Beispiel verwendete SPA-Framework ist React.js, was bedeutet, dass sich die Seite ändert und Bilder regelmäßig ersetzt werden.

Wenn Sie das Variantenbild anzeigen, kann es zu Flimmerproblemen kommen, was bedeutet, dass eine Abfolge von Originalbild-Variantenbild-Originalbild beobachtet wird.

Dieses Problem kann vollständig vermieden werden, indem die Abfrage ausgelöst wird, wenn die spezifische Zielseite geladen wird.

Testen der zusätzlichen Kopie unterhalb des CTA

Ein weiteres Experiment auf einer mit Angular.js erstellten SPA-Site kann darin bestehen, 30 % der Zielgruppe eine zusätzliche Textzeile unter dem Haupt-CTA anzuzeigen.

In diesem Beispiel zeigt Version A die zusätzliche Textzeile unter dem Haupt-CTA, während Version B dies nicht tut. Wir senden 30 % unseres Traffics an Version A und 70 % an Version B und vergleichen dann die Ergebnisse, um festzustellen, ob es einen signifikanten Unterschied in den Conversion-Raten gibt.

Da die Website mit Angular.js erstellt wurde, werden die Elemente regelmäßig geändert. Das Callback-Ereignis hier kann uns helfen, Änderungen an der Variante anzuzeigen.

Anzeigen eines Geschenkgutscheins

Nehmen wir in diesem Beispiel an, dass ein exklusiver Geschenkgutschein angezeigt werden soll, wenn ein Benutzer ein Produkt einer Premiummarke in seinen Warenkorb legt. Mit der Bedingung, dass beim Entfernen des Premium-Produkts aus dem Warenkorb der Gutschein von der Seite geswiped wird.

1. Was hier passieren muss, ist, dass wenn ein Benutzer die erforderliche Aktion ausführt, ein manuelles Aktivierungsereignis gesendet werden sollte. Das Experiment wird als Ergebnis dieses Ereignisses aktiviert.
2. Ein Aktivierungsereignis sollte ausgelöst werden, wenn der Benutzer das Premiumprodukt aus dem Warenkorb entfernt, wodurch das Experiment deaktiviert wird.
3. Der Test muss erneut aktiviert werden, um das Premiumprodukt anzuzeigen, wenn der Verbraucher es erneut hinzufügt.

Unter dem CTA „Jetzt kaufen“ wird der Slogan angezeigt

Wenn Sie einen eindeutigen Slogan unter einer CTA-Schaltfläche „Jetzt kaufen“ anzeigen möchten, können Sie das Experiment aktivieren, indem Sie ein Aktivierungsereignis bei der Verlaufsänderung auslösen.

Dies liegt daran, dass die Seite mit der CTA-Schaltfläche „Jetzt kaufen“ zunächst nicht geladen wird.

Wie Convert das Problem des Testens von SPAs umgangen hat

Experimente an SPAs müssen anders gehandhabt werden als andere Experimente. Da das Convert-Skript die URL, durch die ein Website-Besucher navigiert, nicht lesen kann, kann es keine Experimente mit Standardmethoden auslösen.

So wird es stattdessen gemacht.

Beginnen Sie mit der Installation des Convert-Tracking-Codes, wie in diesem Artikel beschrieben.

Wenden Sie dann eine der 3 folgenden Methoden an:

1. Polling auslösen

Wie erwähnt, ist Polling der Prozess, durch den die Erlebnisbedingungen getestet werden, um zu bestimmen, ob das Erlebnis ausgelöst werden sollte.

Dazu gehört die Überwachung der Besucher-URL, der Zielgruppenbedingungen oder der JavaScript-Bedingungen, um den Test auszuführen.

Polling wird normalerweise von Convert ausgelöst, wenn eine neue Seite geladen wird. Bei SPAs werden in der Regel keine neuen Seiten in die Web-App geladen.

In diesem Fall benötigen Sie den folgenden Code, um die Abfrage zu starten:

 window._conv_q = _conv_q || [];
window._conv_q.push(["run","true"]);

Sie sollten bestimmen, welches das beste Ereignis in Ihrem SPA wäre, um den obigen Code auszulösen. Beispielcode, der im Abschnitt Projekteinstellungen > Globales Projekt-JavaScript hinzugefügt werden sollte.

 console.log('SPA/Convert Code in Global Project Javascript ausgeführt');
if (!window.globalExecutedTs) {
window.globalExecutedTs = wahr;
var oldPushState = window.history.pushState;
window.history.pushState = Funktion (Daten) {
Versuchen {
setTimeout(Funktion() {
return oldPushState.apply(this, arguments);
console.log('convert aktiviert von pushstate');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
} fangen (e) {
console.log(e);
}
};
window.onpopstate = Funktion (Ereignis) {
setTimeout(Funktion() {
console.log('convert aktiviert von popstate');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
};
}

2. Verwenden Sie JavaScript-Bedingungen im Site-Bereich

Da das Convert-Skript URL-Änderungen in einer SPA nicht lesen kann, sollten Sie eine JavaScript-Bedingung anstelle einer URL-Übereinstimmungsbedingung verwenden, um ein Experiment auszulösen.

Eine ausführliche Erklärung dazu finden Sie im folgenden Artikel.

3. Aktivieren Sie ein Experiment manuell

Sie können Experimente manuell auslösen, nachdem Sie festgestellt haben, dass ein bestimmter Datenfluss aufgetreten ist. Mit dieser Methode werden der Site-Bereich und die Zielgruppenbedingungen noch getestet, nachdem die Abfrage mit Code ausgelöst wurde. In diesem Artikel finden Sie ausführlichere Informationen zum manuellen Aktivieren eines Tests.

Mit den 3 oben genannten Methoden sollten Sie in der Lage sein, Experimente im richtigen Moment in einer SPA-App auszulösen.

Erhöht Convert das Flackerrisiko bei SPAs?

Kurze Antwort, nein.

Alle SPA-Frameworks sind mit der Anti-Flicker-Technologie von Convert kompatibel. Convert nutzt die SmartInsert ^TM -Technologie hinter den Kulissen, um sicherzustellen, dass Experimentänderungen zum richtigen Zeitpunkt auf Ihrem SPA angewendet oder erneut angewendet werden, selbst während des dynamischen Neuladens von Seiten.

Wir empfehlen Ihnen, unser Whitepaper zum Flimmereffekt zu lesen, um mehr darüber zu erfahren und warum Sie ihn unbedingt vermeiden sollten.

Häufige Probleme beim A/B-Testen auf Einzelseiten-Anwendungsseiten

Wie Sie sehen, gibt es beim Ausführen von Tests auf SPA-Sites einige Dinge zu beachten. Nachdem Sie das verwendete Framework, die Tool-Testmethode und das Triggerereignis behandelt haben, besteht das Hauptproblem normalerweise darin, dass das Testelement nicht neu geladen wird, wenn eine neue Seite oder Ansicht im Browser angezeigt wird.

Dies kann durch ein paar Dinge verursacht werden:

1. Testen Sie Änderungen, die auf der ersten Seite angezeigt werden, aber nicht auf den nachfolgenden

Manchmal wird die Änderung, die Sie anzeigen möchten, nur auf der ersten Seite angezeigt, die Sie in Ihrem Browser laden, aber nicht bei nachfolgenden Aufrufen. Dies liegt daran, dass der Teil des Convert-Skripts, der die Experimente auswertet und aktiviert, nicht ausgeführt wird, wenn auf eine neue Ansicht oder „Seite“ der Site zugegriffen wird.

2. Änderungen, die im Visual Editor erscheinen, werden nicht angezeigt, wenn sie außerhalb davon in der Vorschau angezeigt werden

Es kann manchmal vorkommen, dass die mit dem Visual Editor vorgenommenen Änderungen außerhalb der Editor-Vorschau nicht angezeigt werden.

Die meisten Spa-Frameworks verwenden nicht die DOM-API und verwenden stattdessen ihre eigenen Methoden, um die Änderungen auf der Seite bereitzustellen. Dies führt dazu, dass das DOM nicht mehr synchron ist, wenn es von der SPA aktualisiert wird. Dies ist in React und Angular üblich und führt dazu, dass die im Jquery-Code gefundenen CSS-Selektoren nicht funktionieren.

3. Änderungen werden bei nachfolgenden „Ansichten“ weiterhin angezeigt

In diesem Szenario wird eine Teständerung in der richtigen (Seiten-)Ansicht angezeigt. Aber beim Besuch neuer (Seiten-)Aufrufe geht die Änderung nicht weg. Dies liegt daran, dass auf einer SPA-Site die Änderungen beim Neuladen einer neuen Seite nicht entfernt werden.

Das Convert-Skript entfernt den hinzugefügten Code, wenn die Testbedingungen nicht mit der nachfolgenden Ansicht übereinstimmen, in der die Änderungen bereitgestellt wurden, als die Abfrage aufgerufen wurde. Dies reicht jedoch nicht aus, da jquery-Änderungen auch dann nicht verschwinden, wenn der Experimentcode der Seite entfernt wird.

Sie müssen Code ausführen, der die durch das Experiment bewirkten Änderungen rückgängig macht.

Sie sind dran: Vermeiden Sie diese Fehler bei der Optimierung Ihres SPA

Aufgrund von Fortschritten bei der Verarbeitung und Bereitstellung von Informationen werden SPAs möglicherweise allgemein akzeptiert, aber es ist wichtig zu beachten, dass diese neue Technologie Probleme bei der Integration mit Optimierungs- und Experimentierplattformen hat, die normalerweise mit klassischeren Setups funktionieren.

Wir hoffen, dass dieser Artikel die verschiedenen Komponenten von SPAs sowie einige Lösungen zur Überwindung dieser Hindernisse bei Ihrem Bestreben behandelt hat, Besuchern schnellere, intuitivere und personalisiertere digitale Erlebnisse zu bieten.

Sie sollten jedoch besser mit einem Lösungsanbieter zusammenarbeiten, der nahtlosen Support für SPAs bieten kann, z. B. die Möglichkeit, Änderungen an UI-Komponenten und Seitentypen für die dynamische Anpassung zu erkennen, ohne den Quellcode zu ändern. So wie im Kasten unten.