Implementieren von Einzelseitenanwendungen (SPAs) web-spa-implementation

Das Adobe Experience Platform Web SDK bietet umfassende Funktionen, mit denen Ihr Unternehmen mithilfe von Client-seitigen Technologien der neuesten Generation Personalisierungen ausführen kann, z. B. Einzelseitenanwendungen (SPA).

Herkömmliche Websites arbeiten auf Basis von „Seite-zu-Seite“-Navigationsmodellen (auch als mehrseitige Anwendungen bekannt), bei denen Website-Designs eng an URLs gekoppelt sind, sodass der Übergang von einer Web-Seite zur anderen ein Laden der Seite erfordert.

Moderne Web-Anwendungen wie z. B. Einzelseitenanwendungen (SPAs) nutzen stattdessen ein Modell, das die Rendering-Funktion der Browser-Oberfläche beschleunigt, wodurch oft keine Neuladungen von Seiten erforderlich sind. Diese Erlebnisse können durch Kundeninteraktionen wie Scrollen, Klicks und Cursor-Bewegungen ausgelöst werden. Da sich die Paradigmen des modernen Webs weiterentwickelt haben, ist die Relevanz herkömmlicher allgemeiner Ereignisse (z. B. das Laden einer Seite) für die Bereitstellung von Personalisierung und Experimenten nicht mehr gegeben.

Vorteile der Verwendung des Web SDK für SPA web-spa-benefits

Im Folgenden finden Sie einige Vorteile der Verwendung des Web SDK für Einzelseitenanwendungen:

XDM-Ansichten und Einzelseitenanwendungen 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. Eine Einzelseitenanwendung kann also als eine Reihe von Ansichten, statt URLs, betrachtet werden, die je nach Benutzerinteraktion aufgerufen werden. Eine Ansicht umfasst in der Regel eine ganze Seite, eine einzelne Seite oder eine Gruppe visueller Elemente innerhalb einer Seite.

Zur weiteren Erläuterung von Ansichten wird im folgenden Beispiel eine hypothetische E-Commerce-Site verwendet.

Das Konzept der Ansichten kann noch wesentlich stärker ausgeweitet 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 Marketingexperten zu ermöglichen, Web-Personalisierungs- und Erlebniskampagnen auf SPA über den Web-Visual-Editor von Journey Optimizer durchzuführen.

Dazu müssen auf Entwicklerseite die folgenden Schritte ausgeführt werden, um ein einmaliges Setup abzuschließen:

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

sendEvent()-Funktionsbeispiele

In diesem Abschnitt werden zwei Beispiele zum Aufrufen der Funktion sendEvent() in React für eine hypothetische E-Commerce-SPA verwendet.

Beispiel 1: Startseite eines A/B-Tests web-spa-sample-1

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

So können A/B-Tests auf der gesamten Startseite durchgeführt werden: sendEvent() muss aufgerufen werden, während der XDM-viewName auf home eingestellt 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 von Produkten personalisieren, indem es die Farbe der Preisbeschriftung in Rot ändert, nachdem jemand auf die Schaltfläche geklickt hat, um alle Männerprodukte anzuzeigen.

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