Zum Hauptinhalt springen

​
Was ist eine Single-Page App (SPA)?

​
Definition und Zweck

Eine Single-Page Application (SPA) ist eine Art Webanwendung, die entwickelt wurde, um eine reibungslosere und schnellere Benutzererfahrung zu bieten, indem Inhalte dynamisch aktualisiert werden, ohne die gesamte Seite neu zu laden. SPAs werden typischerweise mit modernen JavaScript-Frameworks wie React, Next.js oder Vue.js erstellt. Viele SPAs nutzen auch Server-Side Rendering (SSR), was die Komplexität für clientseitige Implementierungen wie A/B-Tests und Personalisierung erhöht. Der Hauptvorteil von SPAs besteht darin, das Navigationserlebnis des Besuchers zu verbessern, indem Ressourcen einmal geladen und Inhalte dynamisch aktualisiert werden, anstatt die gesamte Seite nach jeder Aktion neu zu laden.

​
Implementierungsherausforderungen und Lösungen

SPAs bringen einzigartige Herausforderungen für Tools wie Kameleoon mit sich, die sich auf Seitenladevorgänge verlassen, um Variationen anzuwenden oder Skripte auszuführen. Um eine optimale Leistung zu gewährleisten, ist es entscheidend, die Implementierungsstrategie an den Typ der SPA anzupassen, mit dem Sie arbeiten. In den folgenden Abschnitten werden wir bewährte Praktiken und Verfahren zur Bewältigung jedes Szenarios darlegen, um eine reibungslose Integration und eine genaue Verfolgung des Besucherverhaltens auf Ihrer Website zu gewährleisten.

​
Native Einrichtung

Wenn Ihre Website eine vollständige SPA ist, stellt das Aktivieren der Option „support for dynamic websites” sicher, dass Kameleoon nach URL-Änderungen sucht. Wenn sich die URL ändert, werden alle Kameleoon-Skripte neu ausgeführt, einschließlich des Targeting- und Variation-Codes. Kameleoon überwacht auch Aktualisierungen in Ihrer SPA, indem es einen MutationObserver verwendet, um Änderungen im DOM zu verfolgen, selbst wenn die Seiten-URL statisch bleibt. Dies ermöglicht es Kameleoon, Variationsänderungen dynamisch anzuwenden (oder erneut anzuwenden), während Aktualisierungen auf Ihrer Website stattfinden. Kameleoon unterstützt verschiedene Änderungen, die über den Graphic Editor vorgenommen werden, einschließlich:
  • Stiländerungen
  • Textänderungen
  • Positionsaktualisierungen (Swap, Insert before/after)
  • Benutzerdefinierte CSS-Selektoren
Dieser Ansatz stellt sicher, dass alle relevanten Änderungen in einer dynamischen Umgebung konsistent angewendet werden. So aktivieren Sie die Unterstützung für dynamische Websites:
  1. Klicken Sie auf Admin > Projects.
  2. Suchen Sie die Karte Ihres Projekts und klicken Sie auf das Symbol Edit.
  3. Klicken Sie auf Configuration und klappen Sie das Menü General auf.
  4. Scrollen Sie nach unten zu Advanced settings und schalten Sie Enable support for dynamic websites (Single Page App, Progressive Web App…) auf ON.
Mehrere Optionen stehen zur Verfügung, um Ihre Konfiguration zu optimieren:
  • Bereich wählen: Sie können die Funktion für die gesamte Website aktivieren oder sie auf bestimmte Elemente über den Graphic Editor beschränken. Die Beschränkung des Bereichs auf ausgewählte Elemente trägt dazu bei, das Gesamtgewicht des Skripts zu reduzieren. Erfahren Sie hier, wie Sie ein Element als dynamisch markieren.
  • Ein benutzerdefiniertes Attribut festlegen (optional): Diese Option verbessert die Elementidentifikation und hilft, Probleme im Zusammenhang mit dynamischen Attributen und Selektoren zu vermeiden. Wenn Ihre Website keine stabilen oder eindeutigen HTML-IDs generiert, können Sie ein benutzerdefiniertes Attribut definieren, das Kameleoon zur Identifikation modifizierter Elemente verwendet. Dieses Attribut hat beim Erstellen des Selektors Vorrang vor der Element-ID.
  • Dynamische ID-Selektoren vermeiden (optional): Diese Option verbessert ebenfalls die Elementidentifikation beim Umgang mit dynamischen Attributen und Selektoren. Standardmäßig ignoriert Kameleoon HTML-IDs, die numerische Sequenzen von mehr als fünf Ziffern enthalten. Sie können bei Bedarf Ihren eigenen regulären Ausdruck definieren, um zusätzliche ID-Muster auszuschließen.

​
Ein benutzerdefiniertes Attribut festlegen

Sie können ein benutzerdefiniertes Attribut (z. B. data-id, data-qa) definieren, um Elemente auf der Seite zu identifizieren. Benutzerdefinierte Attribute sind besonders nützlich, wenn Ihre Website dynamische IDs für HTML-Elemente generiert. Der Kameleoon Graphic Editor identifiziert Elemente mit CSS-Selektoren, die in zwei Kategorien fallen:
  • ID-basierte Auswahl: Wenn das Element eine ID hat, verwendet Kameleoon diese, um das Element beim Laden der Seite zu lokalisieren und zu ändern.
  • Kombinator-Selektor: Wenn keine ID gefunden wird, erstellt Kameleoon einen Selektorpfad über das nächstgelegene übergeordnete Element mit einer ID.
In Fällen, in denen Ihre IDs dynamisch sind und sich häufig ändern, kann es für den Graphic Editor schwierig sein, Elemente zu identifizieren. Um dieses Problem zu lösen, können Sie ein statisches benutzerdefiniertes Attribut hinzufügen (z. B. <button custom-id="1">), das Elemente über Updates hinweg zuverlässig identifiziert.

​
Dynamische ID-Selektoren vermeiden

Standardmäßig vermeidet Kameleoon die Verwendung von Element-IDs, die dynamisch generierte Zahlen mit mehr als fünf aufeinanderfolgenden Ziffern enthalten. Stattdessen baut es einen Pfad mithilfe eines nahegelegenen statischen übergeordneten Elements mit einer ID auf. Sie können dieses Verhalten anpassen, indem Sie einen regulären Ausdruck angeben, um bestimmte dynamische IDs auszuschließen, um ein genaueres Targeting zu gewährleisten.

​
Benutzerdefinierte Einrichtung

Wenn Ihre Website keine vollständige SPA ist oder Sie bestimmte Teile der Website behandeln müssen, finden Sie Informationen im folgenden Abschnitt. Es gibt vier verschiedene Anwendungsfälle für benutzerdefinierte SPA-Einrichtungen.

​
Teilweise SPAs

Um diese Option für bestimmte Seiten zu aktivieren, deaktivieren Sie sie in Advanced settings und fügen Sie den folgenden Code Ihrem Global script hinzu: 
if (document.location.href.includes('mySPApage')) {
     Kameleoon.API.Core.enableSinglePageSupport();
 }
Ersetzen Sie „mySPApage” durch die URL Ihres Funnels.

​
Seitenänderungen ohne URL-Änderungen

In Fällen, in denen das DOM ohne URL-Änderung aktualisiert wird, verlassen Sie sich auf alternative Indikatoren, um Kameleoon neu zu laden. Nachfolgend ein Beispiel mit sessionStorage zur Erkennung von Seitenänderungen. Sie können den Code Ihrem Global script hinzufügen: 
window.kam_step = JSON.parse(window.sessionStorage.getItem('formStep'))?.step;
 Kameleoon.API.Core.runWhenConditionTrue(() => {
     return window.kam_step != JSON.parse(window.sessionStorage.getItem('formStep'))?.step;
 }, () => {
     Kameleoon.API.Core.load();
 });

​
Seitenänderungen mit pathname erkennen

Für Seiten, auf denen Sie Kameleoon erneut ausführen müssen, jedoch nur wenn sich der pathname ändert (ohne Berücksichtigung von Abfrageparametern), erkennen Sie Änderungen mithilfe des pathname anstelle einer vollständigen URL. Der Code unten kann Ihrem Global script hinzugefügt werden: 
if (document.location.href.includes('configurator')) {
     window.kam_configurator_url = document.location.pathname;
 `Kameleoon.API.Core.runWhenConditionTrue(() => {     return window.kam_configurator_url != document.location.pathname; }, () => {     Kameleoon.Gatherer.Referrer.update(window.kam_configurator_url);     Kameleoon.API.Core.load(); });`
 } else {
     Kameleoon.API.Core.enableSinglePageSupport();
 }

​
Variationscode erneut anwenden, ohne Kameleoon neu zu laden

In einigen Fällen sind bestimmte Seitenelemente dynamisch, und wenn der Code rehydratisiert wird, kann er den bereits angewendeten Kameleoon-Code überschreiben. Um dies zu verhindern, haben Sie zwei Optionen:
  • Sie können Kameleoon mit einer der folgenden Methoden informieren, wenn die Seite oder ein bestimmtes Element fertig gerendert ist:
    • Definieren Sie eine window-Variable; zum Beispiel window.pageLoadForKam = true.
    • Lösen Sie auf der Seite ein Ereignis aus, auf das Kameleoon hören kann. Zum Beispiel mit pageLoaded oder contentUpdated: window.addEventListener('pageLoaded', () -> { runKameleoonVariationCode }).
    • Fügen Sie dem <body>-Tag oder dem Zielelement eine bestimmte Klasse oder ein bestimmtes Attribut hinzu. Verwenden Sie dann im Variationscode diese Klasse oder dieses Attribut, um Änderungen an der Seite oder bestimmten Elementen vorzunehmen.
  • Im Variationscode können Sie das vierte Argument der Funktion runWhenElementPresent auf true setzen. Dieses Argument aktiviert die Unterstützung für dynamische Elemente und Single-Page-Anwendungen (SPA). Wenn diese Option aktiviert ist und der angegebene CSS-Selektor für das Element von Kameleoon beim ersten Seitenladen nicht gefunden wird, überwacht Kameleoon das DOM auf den Selektor. Sobald das Element im DOM erscheint, führt Kameleoon die Callback-Funktion aus. Wenn der Seite später ein neues Element hinzugefügt wird, das dem Selektor entspricht, führt Kameleoon den Callback mit dem neu hinzugefügten Element erneut aus.
Verwenden Sie den folgenden Code sparsam und nur, wenn es unbedingt notwendig ist. Beschränken Sie seine Verwendung auf die minimale Anzahl von Fällen und vermeiden Sie es, ihn gleichzeitig auf mehrere Elemente anzuwenden, um eine optimale Seitenleistung aufrechtzuerhalten. Achten Sie auf das Potenzial einer Endlosschleife, wenn der Quellcode der Seite das Element bei jeder Aktualisierung modifiziert.
const insertMyNewCTA = () => {
     if (document.querySelector("#kameleoonElement-myNewCTA") == null) {
 `    Kameleoon.API.Core.runWhenElementPresent(         '#myElement',         ([myElement]) => {             myElement.insertAdjacentHTML('beforebegin', "<button id='kameleoonElement-myNewCTA'>More info</button>");         },         null, true     ); }`
 }
 insertMyNewCTA();

​
Daten aus dem dataLayer abrufen

Bei Verwendung von GTM als Abrufmethode zum Festlegen von Custom-Data-Werten verlässt sich Kameleoon auf einen definierten dataLayer, um auf seine Werte zuzugreifen. Wenn der dataLayer nach jeder URL-Änderung aktualisiert wird, indem neue Einträge gestapelt werden, anstatt die alten zu entfernen, kann Kameleoon veraltete Werte abrufen. Dieser Abruf passiert, weil die alten Daten über Seiten hinweg bestehen bleiben und Kameleoon möglicherweise ausgeführt wird, bevor der dataLayer aktualisiert wird. Um dieses Problem zu vermeiden, stellen Sie sicher, dass veraltete Einträge entfernt werden, bevor neue hinzugefügt werden. Alternativ implementieren Sie benutzerdefinierten Code, um auf Änderungen der dataLayer-Länge zu warten, bevor die neuesten Werte abgerufen werden: 
`window.dataLayerLength = window.dataLayerLength || 0; Kameleoon.API.Core.runWhenConditionTrue(() => { return window.dataLayer && window.dataLayerLength != window.dataLayer.length }, () => { window.dataLayerLength = window.dataLayer.length //then, retrieve and use dataLayer info here })`

​
Allgemeine Überlegungen

​
Event-Listener, Timeouts und Intervalle

Verwenden Sie Kameleoon.API.Utils, um Event-Listener, Timeouts oder Intervalle zu verwalten. Diese Methoden stellen sicher, dass Listener und Timer automatisch entfernt werden, wenn eine URL-Änderung ohne Seitenneuladen erfolgt. Diese Entfernungen verhindern Duplikate, wenn Kameleoon erneut ausgeführt wird.

​
Eindeutige Element-IDs

Stellen Sie beim Hinzufügen von Elementen über Kameleoon sicher, dass ihre id mit kameleoonElement beginnt. Diese Namenskonvention stellt sicher, dass das Element vor der erneuten Ausführung von Kameleoon entfernt wird, wodurch Duplizierungen oder Konflikte vermieden werden. Beispiel: <div id="kameleoonElement-myNewCTA"></div>

​
Seitenaufruf-Inkrementierung

Kameleoon zählt eine neue Seite nur, wenn alle seine Skripte erneut ausgeführt werden, was unter zwei Bedingungen geschieht:
  • Wenn Kameleoon.API.Core.enableSinglePageSupport() zusammen mit einer URL-Änderung aufgerufen wird.
  • Wenn Kameleoon.API.Core.load() explizit ausgelöst wird.
Indem Sie alle oben genannten Richtlinien befolgen, können Sie sicherstellen, dass Variationen effektiv und konsistent in SPAs implementiert werden, was die Benutzererfahrung verbessert und die Datenintegrität wahrt. Für zusätzliche Unterstützung wenden Sie sich gerne an das Kameleoon-Team.

​
Alternativen

​
REACT- und JS-SDKs

Kameleoon bietet ein React SDK und ein JavaScript/TypeScript SDK, die für Single-Page-Anwendungen konzipiert sind. Diese SDKs bieten eine alternative Methode zum Ausführen von Experimenten und zur Verwaltung von Feature Flags in Ihrer SPA, indem das SDK in die Codebasis Ihrer Anwendung integriert wird. Eine umfassende Liste der für SPAs verfügbaren Funktionen finden Sie in unserer SDK-Dokumentation.

​
GatsbyJS-Plugin

Kameleoon bietet auch ein dediziertes Plugin für GatsbyJS-Anwendungen. Um Kameleoon in Ihre GatsbyJS-App zu integrieren, folgen Sie den Anweisungen in diesem Artikel.

​
Next.js-Framework

Wenn Ihre Website mit Next.js erstellt wurde, gibt es eine wichtige Überlegung bei der Verwendung des Graphic Editors von Kameleoon. Next.js-Websites laden auf eine bestimmte Weise, die zu Konflikten mit Kameleoons Änderungen führen kann, wenn diese zu schnell erfolgen, was dazu führen kann, dass die Seite falsch angezeigt wird.

​
Empfohlene Lösung

Das Kameleoon-Team hat einen dedizierten Next.js-Einrichtungsleitfaden erstellt, der dieses Problem automatisch löst. Diese Einrichtung stellt sicher:
  • Kameleoon lädt schnell und effizient.
  • Ihre Seite wird ohne Flickering reibungslos angezeigt.
  • Änderungen erscheinen zur richtigen Zeit, ohne Ihre Website zu beschädigen.
  • Die Seitennavigation funktioniert korrekt.
Siehe die Schritt-für-Schritt-Anleitung: Implementierung mit Next.js

​
Alternative Ansätze

Wenn Sie die oben empfohlene Einrichtung nicht verwenden können, gibt es andere Möglichkeiten, Konflikte zu vermeiden. Ihr Entwickler kann ein einfaches Signal hinzufügen, das Kameleoon mitteilt: „Die Seite ist jetzt bereit für Änderungen.”
  • Methode 1: Seitenbereitschafts-Indikator
    • Fügen Sie dem <body>-Element einen Marker hinzu, sobald die Seite vollständig geladen ist. Konfigurieren Sie dann Ihre Kameleoon-Experimente so, dass sie nur ausgeführt werden, wenn dieser Marker vorhanden ist.
  • Methode 2: Benutzerdefiniertes Ereignis
    • Verwenden Sie Kameleoons Befehlswarteschlange, um ein Signal zu senden, sobald Ihre Seite bereit ist: Events.trigger('my page is hydrated').
    • Konfigurieren Sie dann Ihre Experimente, um die Targeting-Kriterien Custom event zu verwenden, um auf dieses Signal zu warten, bevor Änderungen vorgenommen werden. Weitere Details zur Implementierung benutzerdefinierter Ereignisse und anderer Targetings finden Sie in diesem Artikel
Die dedizierte Next.js-Einrichtung erledigt all dies automatisch, sodass Sie sich keine Sorgen um diese technischen Details machen müssen.