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

Adobe Experience Platform Web SDK bietet umfangreiche Funktionen, mit denen Ihr Unternehmen Personalisierungen auf Client-seitigen Technologien der nächsten Generation durchführen kann, z. B. Single Page Applications (SPAs).

Herkömmliche Websites funktionieren nach „Seiten-zu-Seiten“-Navigationsmodellen, die auch als Mehrseiten-Anwendungen bezeichnet werden. Dabei sind Website-Designs eng an URLs gekoppelt und der Übergang von einer Web-Seite zur anderen erfordert ein Laden der Seite.

Moderne Web-Anwendungen, wie Single Page Applications (SPAs), haben stattdessen ein Modell übernommen, das die schnelle Nutzung der Browser-UI-Rendering unterstützt, die oft unabhängig von Seitenneuladungen ist. Diese Erlebnisse können durch Kundeninteraktionen wie Bildläufe, Klicks und Cursor-Bewegungen ausgelöst werden. Mit der Weiterentwicklung der Paradigmen des modernen Internets funktioniert die Relevanz herkömmlicher generischer Ereignisse, wie z. B. des Seitenladevorgangs, für die Bereitstellung von Personalisierung und Experimenten nicht mehr.

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

Im Folgenden finden Sie einige Vorteile der Verwendung von Web SDK für Ihre Single Page Applications:

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

Der Journey Optimizer-Web-Editor nutzt ein Konzept namens views.

Ansichten sind eine logische Gruppe visueller Elemente, aus denen sich ein SPA-Erlebnis zusammensetzt. Ein Single Page Application kann daher basierend auf Benutzerinteraktionen als Übergang durch Ansichten anstelle von URLs betrachtet werden. Eine Ansicht kann in der Regel eine gesamte Site, eine einzelne Seite oder gruppierte visuelle Elemente innerhalb einer Seite darstellen.

Um näher zu erläutern, was Ansichten sind, wird im folgenden Beispiel eine hypothetische Online-E-Commerce-Site verwendet.

Das Konzept der Ansichten kann noch viel weiter ausgedehnt werden. 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 es Marketing-Experten zu ermöglichen, Web-Personalisierungs- und Experimentierkampagnen für SPAs über den visuellen Web-Editor von Journey Optimizer durchzuführen.

Dies erfordert die folgenden Schritte, um eine einmalige Entwicklereinrichtung abzuschließen:

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

Beispiele für sendEvent() Funktionen

In diesem Abschnitt werden zwei Beispiele beschrieben, die zeigen, wie die sendEvent()-Funktion in React für eine hypothetische E-Commerce-SPA aufgerufen wird.

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

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

Um A/B-Tests auf der gesamten Startseite durchzuführen, müssen sendEvent() aufgerufen werden, wobei der XDM-viewName auf home gesetzt sein muss:

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 Produktreihe personalisieren, indem die Farbe des Preisschilds in Rot geändert wird, nachdem ein Benutzer geklickt hat, um alle Men-Produkte zu sehen.

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);
    }
}