Single Page Applications (SPAs) revolutionieren die Web-Entwicklung durch bessere Performance und nahtlosere User Experiences im Vergleich zu traditionellen Websites mit mehreren Seiten. Allerdings kann die Implementierung von A/B-Tests in SPAs ohne die richtige Anleitung problematisch sein. In diesem Artikel erläutern wir die wichtigsten Konzepte und bieten umsetzbare Strategien zur erfolgreichen Integration von Adobe Target mit beliebten SPA-Frameworks wie React, Vue, Angular, Ember und anderen.

Definition: Ansichten und Framework-Lebenszyklus-Events.

Im vergangenen Jahrzehnt haben wir Adobe Target in verschiedenen SPA-Frameworks implementiert. Der Schlüssel zu einer erfolgreichen Integration liegt im Verständnis der Lebenszyklus-Events der Frameworks.

Anders als bei traditionellen Websites bleiben Besucherinnen und Besucher bei SPAs stets auf derselben Seite, auf der die Ansichten (virtuelle Seiten) und URLs je nach Benutzernavigation aktualisiert werden. Dies macht die Ansichten zum entscheidenden Zielpunkt für alle Service-Integrationen von Drittanbietern, darunter auch Adobe Target.

Um eine nahtlose Personalisierung zu erreichen, muss das Konzept der Ansichten in Framework-Lebenszyklus-Events eingebunden werden. Dadurch wird ein präzises Timing für die Bereitstellung personalisierter Inhalte ermöglicht. Beispielsweise signalisiert in React das Event componentDidMount den Start einer Ansicht, während in Angular die Methode ngOnInit diesen Zweck erfüllt. Auch Router-Lebenszyklus-Events können genutzt werden, zum Beispiel mit NavigationEnd in Angular, was dafür sorgt, dass die die Personalisierung erst angewendet wird, wenn die neue Ansicht und die URL vollständig aktualisiert wurden.

Minimierung von Bildschirmflackern bei der Bereitstellung von personalisiertem Content.

Eine der Herausforderungen bei der SPA-Personalisierung liegt darin, das Flackern zu vermeiden, das entsteht, wenn der Standard-Content durch den Test-Content ersetzt wird. Um dem vorzubeugen, muss personalisierter Content in jeder Ansicht so schnell wie möglich angezeigt werden. Jede neue Ansicht in eurer SPA sollte eine Anforderung des relevanten personalisierten Inhalts auslösen, damit eine nahtlose User Experience gewährleistet ist.

Nutzung der Datenschicht.

Die Datenschicht ist beim effektiven Daten-Management eine wesentliche Komponente, um Genauigkeit und Skalierbarkeit bei Analysen und Personalisierung zu gewährleisten. Als Web-Standard bietet sie ein strukturiertes JavaScript-Objekt, mit dem Informationen über die Seite, die besuchende Person und mehr für Drittanbieter-Services freigegeben werden.

Für Adobe Target müssen vor dem Senden einer Target-Anforderung die Werte für „Data Layer“ initialisiert und festgelegt werden, damit optimale Personalisierung möglich ist. Mit dem onBeforeEventSend-Event des Adobe Web SDK können die „Data Layer“-Werte vor dem Absenden der Anforderung dynamisch aktualisiert werden.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
"page": {"title": "Erste Schritte"
}
});

Content-Prefetching für schnellere Personalisierung.

Die Services von Adobe Experience Platform bieten Innovationen zur Vereinfachung der SPA-Integration. Mit Adobe Web SDK erfolgt bei der Anforderung der Personalisierung beim ersten Laden der Seite ein Prefetching und lokales Caching der Inhalte mit dem Befehl sendEvent. Bei nachfolgenden Ansichten kann der personalisierte Content mit dem Befehl sendEvent und einem eindeutigen Ansichtsnamen aus dem Cache geladen werden. Dieser Ansatz minimiert die Netzwerkaufrufe und löst automatisch Anzeige-Events aus, damit der Content schneller bereitgestellt wird.

Problemlösungen für das Virtual Document Object Model.

Frameworks wie React nutzen Virtual DOM für bessere Performance, was jedoch die DOM-basierte Personalisierung verkomplizieren kann. Beispielsweise kann der auf das DOM des Browsers angewendete personalisierte Content überschrieben werden, wenn das Virtual DOM die Darstellung neu lädt.

Um dieses Problem zu umgehen, könnt ihr personalisierten Content nach einem Re-Rendering erneut anwenden und gleichzeitig doppelte Anzeige-Events vermeiden, damit das Reporting korrekt bleibt. Web SDK bietet den applyPropositions-Befehl, um dies komfortabel zu verwalten.

alloy("applyPropositions",{
"propositions": [],
"metadata": {},
"viewName": ""
});

Wenn ihr keine Methoden zur DOM-Manipulation nutzen möchtet, könnt ihr alternativ mit Feature-Flag-Testing vorkonfigurierte Erlebnisse dynamisch verwalten. Damit könnt ihr Content in Form eines Flags abrufen und dann dem Programm mitteilen, welche grafischen Elemente angezeigt werden sollen. Je nach eurer SPA-Architektur eignet sich in einigen Fällen auch ein Server-seitiger Ansatz. Fachleute aus dem Technologieberatungs-Team von Adobe unterstützen euch dabei, die beste Lösung zu finden.

Best Practices für die Integration von Adobe Target in SPAs.

• Ermittelt den Start der Ansicht: Findet mit Lebenszyklus-Events heraus, wann eine neue Ansicht beginnt.
• Aktualisiert die Datenschicht: Stellt sicher, dass Aktualisierungen der „Data Layer“-Werte vollständig abgeschlossen sind, bevor Personalisierungsanforderungen an Target gesendet werden.
• Minimiert Flackern: Wendet mit Prefetching vorgeladenen personalisierten Content aus Target so früh wie möglich an, um das Risiko von Bildschirmflackern zu reduzieren.
• Dynamische Content-Verarbeitung: Wendet personalisierten Content erneut an, wenn ein dynamisches Re-Rendering der Ansichten erfolgt.

Erste Schritte mit Adobe Target in SPAs.

Die Implementierung von Adobe Target in SPAs erfordert fundierte Kenntnisse über ansichtenbasierte Lebenszyklus-Events, effektive Nutzung der Datenschicht und Strategien zur Verarbeitung von dynamischem Content-Rendering. Wenn ihr die hier beschriebenen Verfahren befolgt, könnt ihr euren SPA-Nutzenden ein flüssiges, flackerfreies Personalisierungserlebnis mit hoher Performance und Relevanz bereitstellen.

Coach definiert Handtaschen-Design neu mit der generativen KI Adobe Firefly.

https://business.adobe.com/fragments/resources/cards/thank-you-collections/target