Implementieren von Einzelseiten-Apps

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

Herkömmliche Websites verwendeten „Page-to-Page“-Navigationsmodelle, auch „Multi Page Applications“ genannt. In diesen Websites sind Designs eng mit URLs verknüpft. Das Wechseln zwischen Seiten erfordert das vollständige Laden der Seite.

Moderne Web-Anwendungen, wie z. B. Einzelseitenanwendungen, haben stattdessen ein Modell übernommen, das die schnelle Verwendung der Darstellung der Browser-Benutzeroberfläche unterstützt, die häufig unabhängig von Seitenneuladungen ist. Diese Erlebnisse werden durch Kundeninteraktionen wie Bildläufe, Klicks und Cursor-Bewegungen ausgelöst. Im Zuge 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 von Experience Platform Web SDK für SPAs

Die Verwendung von Adobe Experience Platform Web SDK für Single-Page-Anwendungen bietet folgende Vorteile:

XDM-Ansichten und Single Page Applications

Der Adobe Target VEC für SPAs nutzt ein Konzept namens Views: eine logische Gruppe visueller Elemente, die zusammen ein SPA-Erlebnis bilden. Ein Single Page Application kann daher basierend auf Benutzerinteraktionen als Übergang durch Ansichten anstelle von URLs betrachtet werden. Ein View kann in der Regel eine ganze Site oder gruppierte visuelle Elemente innerhalb einer Site darstellen.

Um näher zu erläutern, was Ansichten sind, wird im folgenden Beispiel eine hypothetische Online-E-Commerce-Site verwendet, die in implementiert ist, React Beispiel-Views zu untersuchen.

Nachdem Sie zur Startseite navigiert sind, fördert ein Hero-Bild einen Osterverkauf sowie die neuesten Produkte, die auf der Website verfügbar sind. In diesem Fall kann eine View für den gesamten Startbildschirm definiert werden. Diese View könnte man einfach „Heimat“ nennen.

Wenn der Kunde sich mehr für die Produkte interessiert, die das Unternehmen verkauft, entscheidet er sich, auf den Link Produkte zu klicken. Ähnlich wie bei der -Startseite kann die gesamte Produkt-Site als View definiert werden. Dieses View könnte „products-all“ genannt werden.

Da ein View als eine ganze Site oder als eine Gruppe visueller Elemente auf einer Site definiert werden kann. Die vier auf der Produktseite aufgeführten Produkte konnten gruppiert und als View betrachtet werden. Diese Ansicht kann als „Produkte“ bezeichnet werden.

Wenn der Kunde auf die Schaltfläche Mehr laden klickt, um weitere Produkte auf der Website zu erkunden, ändert sich die Website-URL in diesem Fall nicht. Hier kann jedoch eine View erstellt werden, die nur die zweite Zeile der angezeigten Produkte darstellt. Der View könnte „products-page-2“ lauten.

Der Kunde entscheidet sich für den Kauf einiger Produkte auf der Website und geht zum Checkout-Bildschirm über. Auf der Checkout-Website erhält der Kunde Optionen, um einen normalen Versand oder einen Expressversand auszuwählen. Eine View kann eine beliebige Gruppe visueller Elemente auf einer Site sein, sodass ein View für Versandvoreinstellungen erstellt und als „Versandvoreinstellungen“ bezeichnet werden kann.

Das Konzept der Views kann weit über dieses Szenario hinaus erweitert werden. Diese Szenarien sind nur einige Beispiele für Views, die auf einer Site definiert werden können.

Implementieren von XDM Views

XDM Views können genutzt werden, Target es Marketing-Experten zu ermöglichen, A/B- und XT-Tests über die -Visual Experience Composer auf SPAs durchzuführen. Dies erfordert die Durchführung der folgenden Schritte, um eine einmalige Entwicklereinrichtung abzuschließen:

Beispiele für sendEvent() Funktionen

In diesem Abschnitt werden drei 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

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

Das Marketing-Team möchte die zweite Produktreihe personalisieren, indem die Farbe des Preisschilds nach dem Klicken auf „Mehr laden in Rot wird.

function onViewChange(viewName) {

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

class Products extends Component {

  render() {
    return (
      <button type="button" onClick={this.handleLoadMoreClicked}>Load more</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);
  }

}

Beispiel 3: Voreinstellungen für den A/B-Test-Versand

Das Marketing-Team möchte einen A/B-Test durchführen, um zu sehen, ob die Farbe der Schaltfläche von Blau in Rot geändert werden soll, wenn Express-Versand ausgewählt ist. Das Team ist der Ansicht, dass diese Änderung die Konversionen steigern kann (anstatt die Schaltflächenfarbe für beide Bereitstellungsoptionen blau zu halten).

Um Inhalte auf der Website je nach ausgewählter Versandvoreinstellung zu personalisieren, kann für jede Versandvoreinstellung eine View erstellt werden. Wenn Normaler Versand ausgewählt ist, kann der View als „Checkout-Normal“ bezeichnet werden. Wenn Express-Versand ausgewählt ist, kann der View als „Checkout-Express“ bezeichnet werden.

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

class Checkout extends Component {

  render() {
    return (
      <div onChange={this.onDeliveryPreferenceChanged}>
        <label>
          <input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
          <span> Normal Delivery (7-10 business days)</span>
        </label>
        <label>
          <input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
          <span> Express Delivery* (2-3 business days)</span>
        </label>
      </div>
    );
  }

  onDeliveryPreferenceChanged(evt) {
    var selectedPreferenceValue = evt.target.value;
    onViewChange(selectedPreferenceValue);
  }

}

Verwenden der Visual Experience Composer für eine SPA

Wenn Sie mit der Definition Ihrer XDM Views und der Implementierung von sendEvent() mit den übergebenen XDM Views fertig sind, kann der VEC diese Views erkennen und Benutzern ermöglichen, Aktionen und Änderungen für A/B- oder XT-Aktivitäten zu erstellen.

Modifications

Das Bedienfeld Modifications erfasst die für eine bestimmte View erstellten Aktionen. Alle Aktionen für eine View werden unter diesem View gruppiert.

Aktionen

Durch Klicken auf eine Aktion wird das Element auf der Site hervorgehoben, auf die diese Aktion angewendet wird. Jede VEC-Aktion, die unter einem View erstellt wird, weist die folgenden Symbole auf Informationen, Bearbeiten, Klonen, Verschieben und Löschen. Diese Symbole werden in der folgenden Tabelle detaillierter erläutert.

Beispiele für die Verwendung von VEC für SPAs

In diesem Abschnitt werden drei Beispiele für die Verwendung der Visual Experience Composer zum Erstellen von Aktionen und Änderungen für A/B- oder XT-Aktivitäten beschrieben.

Beispiel 1: Aktualisieren der Ansicht „Startseite“

Zuvor in diesem Artikel wurde ein View mit dem Namen „Home“ für die gesamte Startseite definiert. Das Marketing-Team möchte nun die Ansicht „Startseite“ wie folgt aktualisieren:

Um diese Aktualisierungen in VEC vorzunehmen, wählen Sie Erstellen und wenden Sie diese Änderungen auf die Ansicht „Startseite“ an.

Beispiel 2: Ändern von Produktbeschriftungen

Für die View „products-page-2“ möchte das Marketing-Team die Beschriftung Preis in Verkaufspreis ändern und die Beschriftungsfarbe in Rot ändern.

Um diese Aktualisierungen in VEC vorzunehmen, sind die folgenden Schritte erforderlich:

Beispiel 3: Stil der Versandeinstellungen personalisieren

Views können auf einer granularen Ebene definiert werden, z. B. als Status oder eine Option über ein Optionsfeld. Zuvor in diesem Artikel wurden Views für Versandvoreinstellungen, „Checkout-Normal“ und „Checkout-Express“ definiert. Das Marketing-Team möchte die Farbe der Schaltfläche für die Ansicht „Checkout-Express“ in Rot ändern.

Um diese Aktualisierungen in VEC vorzunehmen, sind die folgenden Schritte erforderlich: