Show Menu
THEMEN×

Visual Experience Composer (VEC) für Einzelseiten-Apps (SPAs)

In Adobe Target bietet Visual Experience Composer (VEC) Marketing-Experten die Möglichkeit, selbst Aktivitäten zu erstellen und Erlebnisse zu personalisieren, die über die globale Mbox von Adobe Target dynamisch für herkömmliche Multi-Page-Apps bereitgestellt werden können. Dies beruht jedoch darauf, Angebote beim Laden der Seite oder über nachfolgende Serveraufrufe abzurufen, wodurch wie im Diagramm unten dargestellt Latenzzeiten entstehen. Dieser Ansatz funktioniert nicht gut mit Einzelseiten-Apps (SPAs), da dadurch die Benutzererfahrung und die Anwendungsleistung beeinträchtigt werden.
Mit der neuesten Version bieten wir nun VEC für SPAs an. VEC für SPAs ermöglicht es Marketing-Experten, für SPAs selbst Tests zu erstellen und Inhalt zu personalisieren, ohne von der kontinuierlichen Weiterentwicklung abhängig zu sein. Mit VEC können Sie A/B-Test - und Erlebnis-Targeting -Aktivitäten (XT-Aktivitäten) in beliebten Frameworks wie React und Angular erstellen.

Adobe Target-Ansichten und Einzelseiten-Apps

Adobe Target VEC für SPAs basiert auf einem neuen Konzept für Ansichten: Eine Ansicht entspricht einer logischen Gruppe visueller Elemente, aus denen sich ein SPA-Erlebnis zusammensetzt. Eine SPA kann also als eine Reihe von Ansichten anstelle von URLs betrachtet werden, die je nach Benutzerinteraktion aufgerufen werden. Eine Ansicht umfasst in der Regel eine ganze Site oder eine Gruppe visueller Elemente innerhalb einer Site.
Um Ansichten genauer erklären zu können, navigieren wir einmal über diese fiktive E-Commerce-Site, die in React implementiert wurde, und betrachten einige Beispielansichten. Klicken Sie auf die folgenden Links, um diese Website auf einer neuen Browser-Registerkarte zu öffnen.
Wenn wir zur Homepage navigieren, können wir sofort ein Hero-Bild sehen, das einen Osterverkauf bewirbt, sowie die neuesten Produkte, die auf der Site verkauft werden. In diesem Fall kann die gesamte Homepage als Ansicht definiert werden. Dies sollten Sie im Hinterkopf behalten, da wir darauf im Abschnitt „Implementieren von Adobe Target-Ansichten“ unten näher eingehen werden.
Da uns die Produkte interessieren, klicken wir auf den Link zu den Produkten. Ähnlich wie die Homepage kann die gesamte Produktseite als Ansicht definiert werden. Wir können diese Ansicht „Produkte“ nennen, genau wie der Pfadname in https://target.enablementadobe.com/react/demo/#/products .
Am Anfang dieses Abschnitts haben wir Ansichten als ganze Site oder sogar als eine Gruppe visueller Elemente auf der Site definiert. Wie oben gezeigt, können die vier auf der Site angezeigten Produkte auch gruppiert und als Ansicht betrachtet werden. Als Name für diese Ansicht käme „Produkte“ in Frage.
Klicken Sie auf die Schaltfläche „Mehr laden“, um weitere Produkte auf der Site zu erkunden. In diesem Fall ändert sich die Website-URL nicht. Hier kann auch nur die zweite Zeile der oben gezeigten Produkte als Ansicht angesehen werden. Der Name der Ansicht könnte also „PRODUKTSEITE-2“ lauten.
Link: Checkout
Da uns einige Produkte auf der Site gefallen haben, beschließen wir, ein paar zu kaufen. Auf der Checkout-Site erhalten wir die Möglichkeit, zwischen dem normalen Versand oder der Expresszustellung zu wählen. Da eine beliebige Gruppe visueller Elemente auf einer Site als Ansicht definiert werden kann, können wir diese Ansicht „Versand-Voreinstellungen“ nennen.
Das Konzept Ansichten aber kann noch viel mehr ausgeweitet werden. Für Marketing-Experten, die den Inhalt einer Site je nach Versandpräferenz personalisieren möchten, gibt es die Möglichkeit, eine Ansicht für jede Versandpräferenz zu erstellen. Wenn wir in diesem Fall den normalen Versand auswählen, kann die Ansicht „Normaler Versand“ heißen. Wenn die Expresszustellung ausgewählt wird, kann die Ansicht „Expresszustellung“ lauten.
Ihre Marketing-Experten können auch einen A/B-Test durchführen, um zu sehen, ob die Änderung der Farbe von Blau auf Rot nach Auswahl der Expresszustellung die Konversion im Vergleich zu gleichbleibend blauer Button-Farbe für beide Versandoptionen steigert.

Implementieren von Adobe Target-Ansichten

Nachdem wir nun erklärt haben, was Adobe Target-Ansichten sind, können wir dieses Konzept in Target nutzen, um Marketern die Möglichkeit zu geben, mithilfe des VEC A/B- und XT-Tests in SPAs durchzuführen. Dies erfordert eine einmalige Einrichtung durch den Entwickler. Nachfolgend sind die Schritte beschrieben, die sie dazu befolgen müssen.
  1. Installieren Sie at.js 2.x.
    Zunächst müssen Sie at.js 2.x installieren. Diese Version von at.js wurde speziell für SPAs entwickelt. Frühere Versionen von at.js und mbox.js unterstützen Adobe Target-Ansichten und VEC für SPA nicht.
    Download the at.js 2.x via the Adobe Target UI located in Administration > Implementation. at.js 2.x kann auch über Adobe Launch bereitgestellt werden. Die Adobe Target-Erweiterungen sind derzeit jedoch nicht aktuell und werden nicht unterstützt.
  2. Implementieren Sie die neueste at.js 2.x-Funktion: triggerView() auf Ihren Sites.
    Nachdem Sie die Ansichten Ihrer SPA, in denen Sie einen A/B- oder XT-Test durchführen möchten, definiert haben, implementieren Sie die triggerView() -Funktion von at.js 2.x und übergeben Sie die Ansichten als Parameter. Dadurch können Marketing-Experten VEC zum Entwerfen und Ausführen der A/B- und XT-Tests für diese Ansichten verwenden. Wenn die triggerView() -Funktion für diese Ansichten nicht definiert wurde, erkennt VEC die Ansichten nicht, sodass Marketing-Experten den VEC nicht zum Entwerfen und Ausführen von A/B- und XT-Tests verwenden können.
    adobe.target.triggerView(viewName, options)
    Parameter
    Typ
    Erforderlich?
    Validierung
    Beschreibung
    viewName
    Zeichenfolge
    Ja
    1. Keine nachfolgenden Leerzeichen.
    2. Darf nicht leer sein.
    3. Der Name der Ansicht sollte für alle Seiten eindeutig sein.
    4. Warnung: Der Anzeigename sollte nicht mit „ / “ beginnen oder enden. Dies liegt daran, dass der Kunde den Anzeigenamen im Allgemeinen aus dem URL-Pfad entnimmt. Für uns sind „home“ und „ /home “ unterschiedlich.
    5. Warnung: Dieselbe Ansicht sollte nicht mehrmals hintereinander mit der Option {page: true} ausgelöst werden.
    Geben Sie eine beliebige Zeichenfolge als Namen für Ihre Ansicht an. Der Name dieser Ansicht wird im Bedienfeld Änderungen von VEC angezeigt, sodass Marketing-Experten Aktionen erstellen und ihre A/B- und XT-Aktivitäten ausführen können.
    options
    Objekt
    Nein
    Optionen > Seite
    Boolesch
    Nein
    TRUE : Der Standardwert der Seite ist „wahr“. Bei page=true werden Benachrichtigungen zur Erhöhung der Impressions-Anzahl an die Edge-Server gesendet.
    FALSE : Bei page=false werden keine Benachrichtigungen zur Erhöhung der Impressions-Anzahl gesendet. Dies sollte verwendet werden, wenn Sie nur eine Komponente auf einer Seite mit einem Angebot neu rendern möchten.
    Im Folgenden sehen wir einige beispielhafte Anwendungsfälle dazu, wie Sie in React die triggerView() -Funktion für unsere fiktive E-Commerce-SPA aufrufen:
    Wenn wir als Marketer A/B-Tests auf der gesamten Homepage durchführen möchten, bietet es sich an, die Ansicht, die aus der URL entnommen werden kann, „home“ zu nennen.
    function targetView() {
      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);
      }
    
      // Validate if the Target Libraries are available on your website
      if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
        adobe.target.triggerView(viewName);
      }
    }
    
    // react router v4
    const history = syncHistoryWithStore(createBrowserHistory(), store);
    history.listen(targetView);
    
    // react router v3
    <Router history={hashHistory} onUpdate={targetView} >
    
    
    Schauen wir uns nun ein Beispiel an, das etwas komplizierter ist. Nehmen wir als Marketing-Experten an, wir möchten die zweite Reihe der Produkte personalisieren, indem wir die Farbe der Preisbeschriftung auf Rot ändern, nachdem ein Benutzer auf die Schaltfläche „Mehr laden“ geklickt hat.
    function targetView(viewName) {
      // Validate if the Target Libraries are available on your website
      if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
        adobe.target.triggerView(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});
        targetView('PRODUCTS-PAGE-' + page);
      }
    }
    
    
    Link: Kasse
    Für Marketing-Experten, die den Inhalt einer Site je nach Versandpräferenz personalisieren möchten, gibt es die Möglichkeit, eine Ansicht für jede Versandpräferenz zu erstellen. Wenn wir in diesem Fall den normalen Versand auswählen, kann die Ansicht „Normaler Versand“ heißen. Wenn die Expresszustellung ausgewählt wird, kann die Ansicht „Expresszustellung“ lauten.
    Ihre Marketing-Experten können auch einen A/B-Test durchführen, um zu sehen, ob die Änderung der Farbe von Blau auf Rot nach Auswahl der Expresszustellung die Konversion im Vergleich zu gleichbleibend blauer Button-Farbe für beide Versandoptionen steigert.
    function targetView(viewName) {
      // Validate if the Target Libraries are available on your website
      if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
        adobe.target.triggerView(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;
        targetView(selectedPreferenceValue);
      }
    }
    
    
  3. Starten Sie A/B- oder XT-Aktivitäten über VEC.
    Wenn adobe.target.triggerView() in Ihrer SPA implementiert wurde und die Namen der Ansichten als Parameter übergeben wurden, kann VEC diese Ansichten erkennen und es Benutzern ermöglichen, Aktionen für und Änderungen an ihren A/B- und XT-Aktivitäten zu erstellen.
    VEC für SPAs ist eigentlich derselbe VEC, den Sie auch auf normalen Webseiten verwenden. Es sind jedoch einige zusätzliche Funktionen verfügbar, wenn Sie eine Einzelseiten-App öffnen, bei der triggerView() implementiert ist.
Im Bedienfeld Änderungen und bei den Aktionen für VEC gibt es zwei wesentliche Verbesserungen, mit denen VEC gut mit SPAs funktioniert.
Bedienfeld „Änderungen“
Im Bedienfeld Änderungen werden die für eine bestimmte Ansicht erstellten Aktionen erfasst. Beachten Sie, dass alle Aktionen für eine Ansicht unter dieser Ansicht gruppiert werden.
Aktionen
Durch Klicken auf eine Aktion wird das Element auf der Sites hervorgehoben, in dem diese Aktion angewendet wird. Jede VEC-Aktion, die unter einer Ansicht erstellt wurde, verfügt über die folgenden, unten aufgeführten Symbole: Informationen, Bearbeiten, Klonen, Verschieben und Löschen.
Die einzelnen Aktionen sind in der folgenden Tabelle beschrieben:
Seite
Beschreibung
Informationen
Zeigt die Details der Aktion an.
Bearbeiten
Ermöglicht die direkte Bearbeitung der Eigenschaften dieser Aktion.
Klonen
Sie können die Aktion auf eine oder mehrere Ansichten klonen, die im Bedienfeld Änderungen vorhanden sind, oder auf eine oder mehrere Ansichten, die Sie im VEC durchsucht haben oder zu denen Sie navigiert sind. Die Aktion muss nicht unbedingt im Bedienfeld „Änderungen“ vorhanden sein.
Hinweis : Navigieren Sie nach einem Klonvorgang mit Durchsuchen zur Ansicht im VEC, um zu überprüfen, ob die Klon-Aktion ein gültiger Vorgang war. Wenn die Aktion nicht auf die Ansicht angewendet werden kann, wird ein Fehler angezeigt.
Verschieben
Hiermit wird die Aktion in ein Seitenladereignis oder eine andere Ansicht verschoben, die im Änderungs-Bedienfeld bereits vorhanden ist.
Seitenladereignis: Alle Aktionen, die mit dem Seitenladeereignis in Verbindung stehen, werden beim ersten Laden Ihrer Webanwendung angewendet.
Hinweis : Navigieren Sie nach einem Verschiebevorgang mit „Durchsuchen“ zur Ansicht im VEC, um zu sehen, ob das Verschieben ein gültiger Vorgang war. Wenn die Aktion nicht auf die Ansicht angewendet werden kann, wird ein Fehler angezeigt.
Löschen
Löscht die Aktion.
Sie können viele Aktionen ausführen, bevor die Seite im VEC geladen wird, oder selbst dann, wenn die Seite gar nicht geladen werden kann. Aktionen, die nicht vor dem Laden der Website bearbeitet werden können, sind in der Benutzeroberfläche deaktiviert.
Beispiel 1
Sehen wir uns das Beispiel oben an, in dem wir eine Home-Ansicht erstellt haben. Für diese Ansicht haben wir dabei zwei Ziele im Auge:
  1. Die Farbe der Schaltflächen „Zum Einkaufswagen hinzufügen“ und „Gefällt mir“ in eine hellere blaue Farbe ändern. Dies sollte sich bei „Seite laden“ befinden, da wir Komponenten der Kopfzeile ändern.
  2. Die Bezeichnung von „Aktuellste Produkte 2019“ zu „Schärfste Produkte 2019“ und die Textfarbe in Violett ändern.
Um dies auszuführen, klicken Sie im VEC auf Erstellen und wenden Sie diese Änderungen auf die Home-Ansicht an.
Beispiel 2
Sehen wir uns das Beispiel oben an, in dem wir die Ansicht PRODUKTSEITE-2 erstellt haben. Unser Ziel ist es, die Bezeichnung „Preis“ in „Verkaufspreis“ und die Farbe in Rot zu ändern.
  1. Klicken Sie auf Durchsuchen und dann auf den Link Produkte in der Kopfzeile.
  2. Klicken Sie einmal auf Mehr laden, um zur zweiten Produktreihe zu gelangen.
  3. Klicken Sie auf Erstellen.
  4. Wenden Sie die Aktionen an, um die Textbeschriftung in „Verkaufspreis“ und die Farbe in Rot zu ändern.
Beispiel 3
Schließlich können Ansichten, wie bereits erwähnt, auf granularer Ebene definiert werden. Ansichten können einen Status oder sogar eine Option in einem Optionsfeld sein. Zuvor haben wir die Ansichten CHECKOUT-EXPRESS und CHECKOUT-NORMAL erstellt. Unser Ziel ist es, die Schaltflächenfarbe für die CHECKOUT-EXPRESS-Ansicht in Rot zu ändern.
  1. Klicken Sie auf Durchsuchen.
  2. Fügen Sie dem Warenkorb einige Produkte hinzu.
  3. Klicken Sie oben rechts auf das Warenkorbsymbol.
  4. Klicken Sie auf „Zur Kasse gehen“.
  5. Klicken Sie auf das Optionsfeld „Expresszustellung“.
  6. Klicken Sie auf Erstellen.
  7. Ändern Sie die Schaltfläche von „Bezahlen“ in „Bestellung abschließen“ und die Farbe in Rot.
Die CHECKOUT-EXPRESS-Ansicht wird erst im Bedienfeld „Änderungen“ angezeigt, wenn Sie auf das Optionsfeld „Expresszustellung“ klicken. Dies liegt daran, dass die triggerView() -Funktion ausgelöst wird, wenn das Optionsfeld „Expresszustellung“ ausgewählt wird. Dies ist aber nur der Fall, wenn VEC weiß, dass eine Ansicht im Bedienfeld „Änderungen“ angezeigt wird.

Ein tief gehender Blick auf at.js und SPAs

Wie kann ich nach dem ersten Laden der Seite in meiner SPA die Ansichten für die neuesten Zielgruppendaten abrufen, die durch Aktionen erfasst wurden?
Der typische Arbeitsablauf von at.js 2.x beginnt, wenn Ihre Site geladen wird. Alle Ihre Ansichten und Aktionen werden zwischengespeichert, sodass nachfolgende Benutzeraktionen auf Ihrer Site zum Abruf von Angeboten keine Server-Aufrufe auslösen. Wenn Sie Ansichten je nach aktuellsten Benutzeraktionen abrufen möchten, die auf Grundlage der nachfolgenden Benutzeraktionen aktualisiert wurden, können Sie getOffers() und applyOffers() mit den aktuellsten weitergeleiteten Zielgruppen- und Profildaten aufrufen.
Angenommen, Sie sind ein Telekommunikationsunternehmen und Sie haben eine SPA, die at.js 2.x verwendet. Als Unternehmen möchten Sie die folgenden Ziele erreichen:
  • Einem abgemeldeten oder anonymen Benutzer das neueste Angebot ihres Unternehmens, z. B. ein Hero-Angebot „Ein Monat kostenlos“, auf http://www.telecom.com/home anzeigen.
  • Einem angemeldeten Benutzer, dessen Vertrag ausläuft, ein Upgrade-Angebot zeigen, z. B. „Sie haben Anspruch auf ein kostenloses Telefon!“ auf http://www.telecom.com/loggedIn/home anzeigen.
Ihre Entwickler benennen die Ansichten und rufen triggerView() wie folgt auf:
  • Für http://www.telecom.com/home lautet der Ansichtsname „Abgemeldet Home“.
    • triggerView(“Logged Out Home”) wird aufgerufen.
  • Für http://www.telecom.com/loggedIn/home lautet der Ansichtsname „Angemeldet Home“.
    • triggerView(“Logged In Home”) wird bei einer Richtungsänderung aufgerufen.
Anschließend führen Ihre Marketing-Experten die folgenden A/B-Aktivitäten über VEC aus:
  • A/B-Aktivität mit dem Angebot „Ein Monat kostenlos“ für Zielgruppen mit dem Parameter „ loggedIn= false “, die bei http://www.telecom.com/home angezeigt wird, wobei der Name der Ansicht „Abgemeldet Home“ lautet.
  • A/B-Aktivität mit dem Angebot „Sie haben Anspruch auf ein kostenloses Telefon!“ für Zielgruppen mit dem Parameter „ loggedIn=true “, das bei http://www.telecom.com/loggedIn/home angezeigt wird, wobei der Name der Ansicht „Angemeldet Hero-Angebot“ lautet.
Betrachten wir einmal diesen Benutzerablauf:
  1. Ein anonymer, abgemeldeter Benutzer landet auf Ihrer Seite.
  2. Da Sie at.js 2.x verwenden, geben Sie den Parameter „ loggedIn = false “ beim Laden der Seite an, um alle in aktiven Aktivitäten vorhandenen Ansichten abzurufen, die für Zielgruppen mit dem Parameter „ loggedIn = false “ geeignet sind.
  3. at.js 2.x ruft dann die Ansicht „Abgemeldet Home“ und die Aktion, die das Angebot „Ein Monat kostenlos“ anzeigt, ab, und speichert sie im Cache.
  4. Wenn triggerView(“Logged Out Home”) aufgerufen wird, wird das Angebot „Ein Monat kostenlos“ aus dem Cache abgerufen und das Angebot wird ohne einen Serveraufruf angezeigt.
  5. Der Benutzer klickt nun auf „Anmelden“ und gibt seine Anmeldeinformationen ein.
  6. Da Ihre Website eine SPA ist, wird die Seite nicht komplett geladen, sondern leitet den Benutzer stattdessen zu http://www.telecom.com/loggedIn/home .
Hier aber liegt das Problem. Der Benutzer meldet sich an und wir treffen auf triggerView(“Logged In Home”) , weil wir diesen Code bei einer Richtungsänderung platziert haben. Diese weist at.js 2.x an, die Ansicht und Aktionen aus dem Cache abzurufen, aber die einzige Ansicht, die im Cache vorhanden ist, ist „Abgemeldet Home“.
Wie können wir also unsere Ansicht „Abgemeldet Home“ abrufen und das Angebot „Sie haben Anspruch auf ein kostenloses Telefon!“ anzeigen? Und da alle nachfolgenden Aktionen auf Ihrer Site aus der Perspektive eines angemeldeten Benutzers stammen, wie können Sie sicherstellen, dass alle nachfolgenden Aktionen zu personalisierten Angeboten für angemeldete Benutzer führen?
Sie können die in at.js 2.x unterstützten neuen Funktionen getOffers() und applyOffers() verwenden:
adobe.target.getOffers({
  request: {
  prefetch: {
    "views": [
      {
        "parameters": {
          "loggedIn": true
        },
      }
    ]
  },
});

Übermitteln Sie die Antwort von getOffers() und applyOffers() und schon werden alle Ansichten und Aktionen, die mit „loggedIn = true“ verknüpft sind, den Cache von at.js aktualisieren.
Mit anderen Worten: at.js 2.x unterstützt eine Methode zum Abrufen von Ansichten, Aktionen und Angeboten mit den aktuellsten Zielgruppendaten auf Anforderung.
Unterstützt at.js 2.x A4T für Einzelseiten-Apps?
Ja, at.js 2.x unterstützt A4T für SPA über die triggerView() -Funktion, wenn Sie Adobe Analytics und den Experience Cloud-Besucher-ID-Dienst implementiert haben. Siehe Diagramm unten mit schrittweisen Beschreibungen.
Schritt
Beschreibung
1
triggerView() wird in der Einzelseiten-App aufgerufen, um eine Ansicht wiederzugeben und Aktionen anzuwenden, die visuelle Elemente ändern, die mit der Ansicht zusammenhängen.
2
Gezielte Inhalte für die Ansicht werden aus dem Cache gelesen.
3
Die zielgerichteten Inhalte werden so schnell wie möglich bereitgestellt, ohne dass Standardinhalte aufflackern.
4
Die Benachrichtigungsanfrage wird an den Target-Profilspeicher gesendet, damit der Besucher in der Aktivität erfasst und die Metrik erhöht wird.
5
Analysedaten werden an den Datenerfassungsserver gesendet.
6
Target-Daten werden über die SDID mit Analytics-Daten abgeglichen und im Analytics-Berichtspeicher abgelegt. Analysedaten können dann über A4T-Berichte sowohl in Analytics als auch in Target angezeigt werden.
Wenn Sie keine Benachrichtigungen an Adobe Analytics zur Impressions-Zählung bei jedem Auslösen einer Ansicht senden möchten, geben Sie {page: false} an die triggerView() -Funktion weiter, damit die Impressions-Zählung nicht erhöht wird, wenn eine Ansicht mehrmals für eine Komponente ausgelöst wird, die regelmäßig erneut gerendert wird. Beispiel:
adobe.target.triggerView(“PRODUCTS-PAGE-2”, {page:false})

Unterstützte Aktivitäten

Aktivitätstyp
Unterstützt?
Ja
bei A/B-Test- und Erlebnis-Targeting(XT)-Aktivitäten
Ja
Ja
Ja
Nein
Nein
Nein
Nein
Wie führen wir, wenn wir at.js 2.x installiert und triggerView() auf unseren Sites implementiert haben, A/B-Aktivitäten mit automatischem Targeting aus, da SPA VEC das automatische Targeting nicht unterstützt?
Wenn Sie A/B-Aktivitäten mit automatischem Targeting verwenden möchten, können Sie alle Aktionen so verschieben, dass sie in VEC beim Laden der Seite ausgeführt werden. Bewegen Sie den Mauszeiger über die einzelnen Aktionen und klicken Sie auf die Schaltfläche Verschieben nach „Seite laden“. Anschließend können Sie im nächsten Schritt das automatische Targeting für die Traffic-Zuordnungsmethode auswählen.

Unterstützte Integrationen

Integration
Unterstützt?
Ja
Ja
Ja
Ja

Seitenbereitstellungs-Einstellungen für den SPA-VEC

Mit den Einstellungen für die Seitenbereitstellung können Sie mithilfe von Regeln bestimmten, wann eine Target-Aktivität auf eine Zielgruppe zutrifft und ausgeführt werden soll.
Um über den dreiteiligen geleiteten VEC-Workflow zur Erstellung von Aktivitäten auf die Optionen zur Seitenbereitstellung zuzugreifen, klicken Sie im Schritt Erlebnisse auf Konfigurieren (Zahnradsymbol) > Seitenbereitstellung .
So qualifiziert sich beispielsweise eine Target-Aktivität gemäß den obigen Einstellungen zur Seitenbereitstellung. Sie wird ausgeführt, wenn ein Besucher direkt auf https://www.adobe.com landet oder wenn ein Besucher auf einer beliebigen URL landet, die https://www.adobe.com/products enthält. Dies eignet sich besonders für alle mehrseitigen Anwendungen, bei der bei jeder Seiteninteraktion die Seite neu geladen wird. In at.js werden dabei die Aktivitäten abgerufen, die sich für die vom Benutzer geöffnete URL qualifizieren.
Da aber SPAs anders funktionieren, müssen die Einstellungen für die Seitenbereitstellung so konfiguriert sein, dass alle Aktionen auf die Ansichten gemäß der Definition in der SPA-VEC-Aktivität angewendet werden können.

Anwendungsfall

Im Folgenden wird ein Anwendungsfall beschrieben:
Folgende Änderungen wurden vorgenommen:
With the example above in mind, what would happen when we configure Page Delivery settings to only include: https://target.enablementadobe.com/react/demo/#/ in an SPA with at.js 2. x ?
Die folgende Abbildung zeigt den Target-Ablauf: Seitenladeanfrage in at.js 2. x :
Customer Journey Nr. 1
Ergebnis : Der Benutzer sieht die grüne Hintergrundfarbe in der Startansicht. Wenn der Benutzer dann zu products https://target.enablementadobe.com/react/demo/#/products navigiert, wird die blaue Hintergrundfarbe der Schaltfläche angezeigt, da die Aktion im Browser unter der Produktansicht zwischengespeichert wird.
Note: The user navigating to https://target.enablementadobe.com/react/demo/#/products did not trigger a page load.
Customer Journey Nr. 2
Ergebnis : Selbst wenn Sie triggerView() für die Produktansicht definiert haben und über den SPA VEC in der Produktansicht eine Aktion ausgeführt haben, wird die erwartete Aktion nicht ausgeführt, da Sie keine Regel erstellt haben, die products https://target.enablementadobe.com/react/demo/#/products in den Seitenbereitstellungs-Einstellungen enthält.

Best Practice

Die Verwaltung der Customer Journey kann schwierig sein, da Kunden auf jeder beliebigen URL der Einzelseitenanwendung landen und zu jeder anderen Seite navigieren können. Daher empfiehlt es sich, eine Seitenbereitstellungsregel zu spezifizieren, die die Basis-URL beinhaltet, damit die gesamte Einzelseitenanwendung enthalten ist. Auf diese Weise müssen Sie nicht alle möglichen Routen und Pfade bedenken, die ein Kunde nehmen könnte, um zu einer Seite zu gelangen, auf der Sie eine A/B-Test- oder Erlebnis-Targeting (XT)-Aktivität anzeigen möchten.
Um das oben stehende Problem zu beheben, können Sie beispielsweise die Basis-URL in den Seitenbereitstellungs-Einstellungen spezifizieren:
Dadurch wird sichergestellt, dass ein Kunde die angewendeten Aktionen sehen kann, unabhängig davon, wo er auf der SPA landet und ob er zur Startseite oder zur Seitenansicht navigiert.
Wenn Sie jetzt eine Aktion zu einer Ansicht im SPA VEC hinzufügen, wird Ihnen die folgende Popup-Nachricht angezeigt, um Sie daran zu erinnern, die Seitenbereitstellungsregeln zu beachten.
Diese Meldung wird angezeigt, wenn Sie die erste Aktion einer Ansicht für jede von Ihnen neu erstellte Aktivität hinzufügen. Diese Meldung stellt sicher, dass alle Mitarbeiter in Ihrer Organisation wissen, wie diese Seitenbereitstellungsregeln korrekt anzuwenden sind.

Schulungsvideo: Verwendung von VEC für SPAs in Adobe Target