Dokumentation Journey Optimizer Handbuch für Journey Optimizer

Implementieren von Single Page Applications (SPAs) web-spa-implementation

Letzte Aktualisierung: 17. Oktober 2026

Erstellt für:

Fortgeschritten
Entwicklerin/Entwickler

Adobe Experience Platform Web SDK bietet umfassende Funktionen, mit denen Ihr Unternehmen Personalisierung auf Client-seitigen Technologien der nächsten Generation wie Single Page Applications (SPAs) ausführen kann.

Herkömmliche Websites arbeiten mit seitenbasierten Navigationsmodellen („Page-to-Page“), auch bekannt als Multi Page Applications, bei denen das Website-Design eng an URLs gekoppelt ist und der Wechsel von einer Web-Seite zur nächsten ein Neuladen der Seite erfordert.

Moderne Web-Anwendungen wie Single Page Applications (SPAs) nutzen stattdessen ein Modell, das ein schnelles Browser-seitiges Rendering der Benutzeroberfläche vorantreibt und häufig unabhängig von einem Neuladen der Seite erfolgt. Diese Erlebnisse können durch Kundeninteraktionen wie Bildläufe, Klicks und Cursor-Bewegungen ausgelöst werden. Mit der Weiterentwicklung moderner Web-Konzepte reicht die Verwendung herkömmlicher, generischer Ereignisse wie dem Laden einer Seite für die Bereitstellung von Personalisierung und Experimenten nicht mehr aus.

Diagramm zum Seitenlebenszyklus.

Vorteile der Verwendung von Web SDK für SPAs web-spa-benefits

Im Folgenden finden Sie einige Vorteile, die der Einsatz von Web SDK für Ihre Single Page Applications bietet:

Möglichkeit zur Zwischenspeicherung aller Angebote beim Seitenladen, um mehrere Server-Aufrufe auf einen einzelnen Server-Aufruf zu reduzieren
Erhebliches Verbessern des Benutzererlebnisses auf Ihrer Site, da Angebote direkt über den Cache und ohne die Verzögerungen herkömmlicher Server-Aufrufe angezeigt werden.
Einmaliges Einrichten durch Entwickelnde, wodurch Marketing-Fachleute Personalisierungs- und Experimentaktivitäten über den visuellen Web-Editor von Adobe Journey Optimizer auf Ihrer SPA erstellen und ausführen können.

XDM-Ansichten und Single Page Applications web-spa-xdm

Der Web-Editor von Journey Optimizer nutzt ein Konzept namens Ansichten.

Ansichten sind eine logische Gruppe visueller Elemente, die zusammen ein SPA-Erlebnis bilden. Eine Single Page Application kann daher so betrachtet werden, dass sie basierend auf Benutzerinteraktionen Ansichten statt URLs durchläuft. Eine Ansicht kann in der Regel eine gesamte Site, eine einzelne Seite oder gruppierte visuelle Elemente innerhalb einer Seite darstellen.

Zur weiteren Veranschaulichung des Konzepts von Ansichten wird im folgenden Beispiel eine hypothetische E-Commerce-Site verwendet.

Nach dem Aufrufen der Start-Site werden über ein Hero Image saisonale Kollektionen und die verschiedenen auf der Site verfügbaren Produktkataloge beworben. In diesem Fall könnte eine Ansicht für den gesamten Startbildschirm definiert werden. Diese Ansicht könnte einfach „Startseite“ genannt werden.
Wenn das Interesse an den Produkten des Unternehmens wächst, klicken Kundinnen und Kunden auf den Link Herren. Ähnlich wie die Startseite kann die gesamte Seite Herren als Ansicht definiert werden. Diese Ansicht könnte „Herren“ genannt werden.
Da eine Ansicht als gesamte Site oder als Gruppe visueller Elemente auf einer Site definiert werden kann, könnten die vier auf der Produkt-Site dargestellten Produkte gruppiert und als Ansicht betrachtet werden. Diese Ansicht könnte „Produkte“ genannt werden.
Wenn Kundinnen und Kunden auf die Schaltfläche ALLE HERRENPRODUKTE klicken, um weitere Produkte auf der Website zu entdecken, ändert sich in diesem Fall die Website-URL nicht. Es kann hier jedoch eine Ansicht erstellt werden, die nur die zweite Reihe der angezeigten Produkte darstellt. Der Name der Ansicht könnte „Produktseite 2“ lauten.
Kundinnen und Kunden entscheiden sich dafür, einige Produkte auf der Website zu kaufen, und wechseln zum Checkout-Bildschirm. Der Warenkorbbildschirm selbst kann mit einer Ansicht namens „Warenkorb“ verknüpft werden. Sie könnten auch eine andere Ansicht innerhalb des Checkout-Bildschirms einrichten, um die empfohlenen Produkte im unteren Bereich abzudecken.

Das Konzept der Ansichten lässt sich noch deutlich weiter fassen. Dies sind nur einige Beispiele für Ansichten, die auf einer Site definiert werden können.

Implementieren von XDM-Ansichten implement-xdm-views

XDM-Ansichten können in Adobe Journey Optimizer genutzt werden, um Marketing-Fachleuten die Ausführung von Web-Personalisierungs- und Experimentkampagnen auf SPAs über den visuellen Web-Editor von Journey Optimizer zu ermöglichen.

Dazu müssen die folgenden Schritte ausgeführt werden, um die einmalige Einrichtung für Entwickelnde abzuschließen:

Installieren Sie Adobe Experience Platform Web SDK und prüfen Sie die Seite Voraussetzungen für Web-Kanäle.
Bestimmen Sie alle XDM-Ansichten in Ihrer Single Page Application, die Sie personalisieren möchten.
Nach dem Definieren der XDM-Ansichten müssen Sie für die Bereitstellung von Inhalten für diese Ansichten die Funktion sendEvent() implementieren, wobei renderDecisions auf true sowie auf die entsprechende XDM-Ansicht in Ihrer Single Page Application festgelegt ist. Die XDM-Ansicht muss in xdm.web.webPageDetails.viewName übergeben werden. Dieser Schritt ermöglicht es Marketing-Fachleuten, diese Ansichten im Web-Editor von Journey Optimizer zu erkennen und Inhaltsänderungen für sie anzuwenden:

 alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
   "web": {
    "webPageDetails": {
    "viewName":"home"
   }
  }
 }
});

NOTE

Beim ersten Aufruf von sendEvent() werden alle XDM-Ansichten abgerufen und zwischengespeichert, die für die Endbenutzenden gerendert werden sollen. Nachfolgende Aufrufe von sendEvent() mit übergebenen XDM-Ansichten werden aus dem Cache gelesen und ohne Server-Aufruf gerendert.

Beispiele für die Funktion `sendEvent()`

Dieser Abschnitt veranschaulicht anhand von zwei Beispielen den Aufruf der Funktion sendEvent() in React für eine hypothetische E-Commerce-SPA.

Beispiel 1: A/B-Test der Startseite web-spa-sample-1

Das Marketing-Team möchte A/B-Tests auf der gesamten Startseite durchführen.

Beispielseite für eine Single Page Application.

Um A/B-Tests auf der gesamten Startseite durchzuführen, muss sendEvent() aufgerufen werden, wobei der XDM-Parameter viewName auf home festgelegt ist:

function onViewChange() {

  var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

  viewName = viewName || 'home'; // view name cannot be empty

  // Sanitize viewName to get rid of any trailing symbols derived from URL

  if (viewName.startsWith('#') || viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }

  alloy("sendEvent", {
    "renderDecisions": true,

    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

Beispiel 2: Personalisierte Produkte web-spa-sample-2

Das Marketing-Team möchte die zweite Reihe der Produkte personalisieren und dazu die Farbe der Preisbeschriftung auf Rot umstellen, sobald Kundinnen und Kunden klicken, um alle Herrenprodukte anzuzeigen.

Beispielseite für eine Single Page Application mit personalisierten Produkten.

function onViewChange(viewName) {

    alloy("sendEvent", {
        "renderDecisions": true,
        "xdm": {
            "web": {
                "webPageDetails": {
                    "viewName": viewName
                }
            }
        }
    });
}

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</button>
        );
    }

    handleLoadMoreClicked() {
        var page = this.state.page + 1; // assuming page number is derived from component's state
        this.setState({
            page: page
        });
        onViewChange('PRODUCTS-PAGE-' + page);
    }
}

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page explains how developers implement XDM views in single-page applications (SPAs) using the Adobe Experience Platform Web SDK so marketers can run personalization and experimentation on those views through the Journey Optimizer web visual editor.

Intents:

Understand how XDM views represent SPA experiences instead of URLs
Perform the one-time developer setup to implement XDM views
Deliver content to views using sendEvent() with renderDecisions set to true
Pass the XDM view name in xdm.web.webPageDetails.viewName
Invoke sendEvent() in React for view changes in an SPA

Glossary:

Single-page application (SPA): A modern web application that uses browser UI rendering often independent of page reloads, triggered by interactions such as scrolls, clicks, and cursor movements (product-specific)
View: A logical group of visual elements which together make up an SPA experience; can represent a whole site, a single page, or grouped visual elements within a page (product-specific)
XDM view: A view that can be leveraged in Adobe Journey Optimizer to run web personalization and experimentation campaigns on SPAs via the web visual editor (product-specific)
viewName: The XDM field (xdm.web.webPageDetails.viewName) that carries the view being rendered (product-specific)

Guardrails:

Implementing XDM views requires a one-time developer setup performed in order: install the Adobe Experience Platform Web SDK, check the web channel prerequisites, determine all XDM views to personalize, and implement sendEvent() with renderDecisions set to true and the corresponding XDM view.
The XDM view must be passed in xdm.web.webPageDetails.viewName.
A view name cannot be empty.
On the first sendEvent() call, all XDM views that should be rendered are fetched and cached; subsequent sendEvent() calls with XDM views passed in are read from the cache and rendered without a server call.

Terminology:

Canonical name: XDM view — Acronym: n/a — variants: view, viewName
Synonyms: “single-page application” = “SPA”
Do not confuse: “multi-page application” (page-to-page navigation requiring a page load) ≠ “single-page application” (browser UI rendering independent of page reloads)

FAQ:

Q: What is a view in the context of SPAs? — A logical group of visual elements that make up an SPA experience; it can be a whole site, a single page, or grouped elements within a page.
Q: Where is the view name passed? — In xdm.web.webPageDetails.viewName within the sendEvent() call.
Q: Does every view change trigger a server call? — No; the first sendEvent() call fetches and caches all views to be rendered, and subsequent calls with views passed in are served from the cache without a server call.
Q: What enables marketers to discover views in the web editor? — Implementing sendEvent() with renderDecisions set to true and the corresponding XDM view allows marketers to discover the views inside the Journey Optimizer web editor.

Personas:

developer: Can install the Adobe Experience Platform Web SDK and check the web channel prerequisites. Can determine all XDM views in the single-page application and implement the sendEvent() function with renderDecisions set to true, passing the view in xdm.web.webPageDetails.viewName. The page states that a view name cannot be empty. Where: “Implementing XDM views”.

Onboarding:

Level: Intermediate
First minimal step: Install the Adobe Experience Platform Web SDK and check the web channel prerequisites.
Success check: Marketers can discover the XDM views inside the Journey Optimizer web editor and apply content modifications to them.
Previous: Check the web channel prerequisites before implementing XDM views: Web channel prerequisites (web/web-prerequisites.md)

recommendation-more-help

journey-optimizer-help