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. Eine Ansicht 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 Beispiele () ​.

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 Ansicht für den gesamten Startbildschirm definiert werden. Diese Ansicht könnte einfach „Home“ genannt werden.

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 „Ansicht​ definiert ​. Diese Ansicht könnte „products-all“ genannt werden.

Da eine Ansicht als eine ganze Site oder eine Gruppe visueller Elemente auf einer Site definiert werden kann. Die vier auf der Produktseite angezeigten Produkte konnten gruppiert und als “” betrachtet ​. 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 Ansicht erstellt werden, um nur die zweite Zeile der angezeigten Produkte darzustellen. Der View-Name 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 Ansicht kann eine beliebige Gruppe visueller Elemente auf einer Site sein, sodass eine Ansicht für Versandvoreinstellungen erstellt und als „Versandvoreinstellungen“ bezeichnet werden kann.

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

Implementieren von XDM-Ansichten

XDM Views können in Target genutzt werden, um Marketing-Experten die Durchführung von A/B- und XT-Tests an SPAs über den Visual Experience Composer zu ermöglichen. 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 ​ Versandvoreinstellung ​Ansicht“ erstellt werden. Wenn Normaler Versand ausgewählt ist, kann Ansicht als „Checkout-Normal“ bezeichnet werden. Wenn Express-Versand ausgewählt ist, kann Ansicht 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 von Visual Experience Composer für eine SPA

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

Bedienfeld Änderungen

Das Änderungen erfasst die Aktionen, die für eine bestimmte Ansicht erstellt wurden. Alle Aktionen für eine Ansicht sind unter dieser Ansicht 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 einer Ansicht 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 von 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 eine Ansicht 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 „products-page-2Ansicht 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

Ansichten können auf einer granularen Ebene definiert werden, z. B. als Status oder eine Option über ein Optionsfeld. Zuvor in diesem Artikel Ansichten wurden 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: