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

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

In Adobe Target bietet der VEC (1}) Marketing-Experten die Möglichkeit, selbst Aktivitäten zu erstellen und Erlebnisse zu personalisieren, die dynamisch in herkömmlichen Multi-Page-Anwendungen über die globale Mbox von Adobe Target bereitgestellt werden können. Visual Experience Composer 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.

Herkömmlicher Lebenszyklus und SPA-Lebenszyklus

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 mehr über Ansichten zu erfahren, navigieren wir zu dieser hypothetischen Online-Commerce-Site, die in React implementiert wurde, und sehen uns einige Beispielansichten an. Klicken Sie auf die folgenden Links, um diese Website auf einer neuen Browser-Registerkarte zu öffnen.

Link: Homepage

Homepage

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.

Link: Produktseite

Produktseite

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://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products.

Produktseite 2

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.

Produktseite 3

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

Checkout-Seite

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. Gehen wir die Schritte durch, um dies einzurichten.

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 unterstützen keine Adobe Target-Ansichten und VEC für SPA.

Laden Sie at.js 2.x über die Adobe Target-Benutzeroberfläche unter Administration > Implementation herunter. at.js 2.x kann auch über Tags in Adobe Experience Platform bereitgestellt werden. Die Adobe Target-Erweiterungen sind jedoch derzeit nicht aktuell und werden nicht unterstützt.

Implementieren Sie die neueste at.js 2.x-Funktion: triggerView() auf Ihren Sites.

Nachdem Sie die Ansichten Ihrer SPA definiert haben, in denen Sie einen A/B- oder XT-Test durchführen möchten, implementieren Sie die Funktion "triggerView()"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)

table 0-row-5 1-row-5 2-row-5 3-row-5
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 Modifications des VEC angezeigt, damit 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 werden einige Beispielanwendungsfälle zum Aufrufen der Funktion triggerView() in React für unsere hypothetische E-Commerce-SPA erläutert:

Link: Homepage

Home-React-1

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.

code language-javascript

code language-javascript
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} >

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

Link: Produktseite

Sehen wir uns ein Beispiel an, das etwas komplizierter ist. Nehmen wir als Marketing-Experten an, wir möchten die zweite Zeile der Produkte personalisieren, indem wir die Farbe der Preisbeschriftung in Rot ändern, nachdem ein Benutzer auf die Schaltfläche "Mehr laden"geklickt hat.

React-Produkte

code language-javascript

code language-javascript
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); } }

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: Checkout

React-Checkout

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.

code language-javascript

code language-javascript
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); } }

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

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.

note note
NOTE
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“

Das Bedienfeld "Modifications", wie unten dargestellt, erfasst die Aktionen, die für eine bestimmte Ansicht erstellt wurden. 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.

Änderungen

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

Klonen Sie die Aktion auf eine oder mehrere Ansichten, die im Bedienfeld Modifications vorhanden sind, oder auf eine oder mehrere Ansichten, die Sie im VEC durchsucht haben und zu denen Sie navigiert sind. Die Aktion muss nicht unbedingt im Bedienfeld Modifications vorhanden sein.
Hinweis: Nachdem ein Klonvorgang durchgeführt wurde, müssen Sie über Browse zur Ansicht im VEC navigieren, um zu sehen, ob die geklonte 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.
Page Load Event - Alle Aktionen, die dem Seitenladeereignis entsprechen, werden beim ersten Laden der Seite Ihrer Webanwendung angewendet.
Hinweis Nachdem ein Verschiebevorgang ausgeführt wurde, müssen Sie über "Durchsuchen"zur Ansicht im VEC navigieren, um zu sehen, ob der Verschiebevorgang gültig war. Wenn die Aktion nicht auf die Ansicht angewendet werden kann, wird ein Fehler angezeigt.

Löschen

Löscht die Aktion.

NOTE

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 Ansicht "Home"erstellt haben. Für diese Ansicht haben wir dabei zwei Ziele im Auge:

Die Farbe der Schaltflächen „Zum Einkaufswagen hinzufügen“ und „Gefällt mir“ in eine hellere blaue Farbe ändern. Dies sollte sich in einem "Seitenladevorgang"befinden, da wir die Komponenten der Kopfzeile ändern.
Die Bezeichnung von „Aktuellste Produkte 2019“ zu „Schärfste Produkte 2019“ und die Textfarbe in Violett ändern.

Um diese Ziele auszuführen, klicken Sie im VEC auf Compose und wenden Sie diese Änderungen auf die Startansicht an.

Beispiel 1

Beispiel 2

Sehen wir uns das Beispiel oben an, in dem wir eine Ansicht PRODUKTSEITE-2 erstellt haben. Unser Ziel ist es, die Bezeichnung „Preis“ in „Verkaufspreis“ und die Farbe in Rot zu ändern.

Klicken Sie auf Browse und dann auf den Link Products in der Kopfzeile.
Klicken Sie einmal auf Load More , um zur zweiten Zeile mit Produkten zu gelangen.
Klicken Sie auf Compose.
Wenden Sie die Aktionen an, um die Textbeschriftung in „Verkaufspreis“ und die Farbe in Rot zu ändern.

Beispiel 2

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.

Klicken Sie auf Browse.
Fügen Sie dem Warenkorb einige Produkte hinzu.
Klicken Sie oben rechts auf das Warenkorbsymbol.
Klicken Sie auf „Zur Kasse gehen“.
Klicken Sie auf das Optionsfeld „Expresszustellung“.
Klicken Sie auf Compose.
Ändern Sie die Schaltfläche von „Bezahlen“ in „Bestellung abschließen“ und die Farbe in Rot.

Beispiel 3

NOTE

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 ist, wenn Ihre Site geladen wird. Alle Ihre Ansichten und Aktionen werden zwischengespeichert, sodass nachfolgende Benutzeraktionen auf Ihrer Site keine Server-Aufrufe zum Abrufen von Angeboten Trigger. 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:

Für einen abgemeldeten oder anonymen Benutzer zeigen Sie die neueste Unternehmensförderung, z. B. das Hero-Angebot "Ein Monat kostenlos"auf http://www.telecom.com/home.
Einem angemeldeten Benutzer soll ein Upgrade-Werbeangebot für Benutzer angezeigt werden, deren Verträge anstehen, 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", das in http://www.telecom.com/home angezeigt wird, wobei der Name der Ansicht "Abgemeldet Home"lautet.
A/B-Aktivität mit der Meldung "Sie haben Anspruch auf ein kostenloses Telefon!" Angebot für Zielgruppen mit dem Parameter "loggedIn=true", das in http://www.telecom.com/loggedIn/home angezeigt wird, wobei der Ansichtsname "Angemeldet Hero-Angebot"lautet.

Betrachten wir einmal diesen Benutzerablauf:

Ein anonymer, abgemeldeter Benutzer landet auf Ihrer Seite.
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.
at.js 2.x ruft dann die Ansicht "Abgemeldet Home"und die Aktion, die das Angebot "Ein Monat kostenlos"anzeigt, ab und speichert es im Cache.
Wenn triggerView("Logged Out Home") aufgerufen wird, wird das Angebot "Ein Monat kostenlos"aus dem Cache abgerufen und das Angebot wird ohne einen Server-Aufruf angezeigt.
Der Benutzer klickt nun auf "Anmelden"und gibt seine Anmeldeinformationen ein.
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 dann unsere Ansicht "Angemeldet"abrufen und die Meldung "Sie haben Anspruch auf ein kostenloses Telefon!"anzeigen? 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
        },
      }
    ]
  },
});

Übergeben Sie die Antwort von getOffers() an applyOffers() und jetzt werden alle Ansichten und Aktionen, die mit "loggedIn = true"verknüpft sind, den at.js-Cache 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.

Target-Ablauf

Schritt

Beschreibung

triggerView() wird in der Einzelseiten-App aufgerufen, um eine Ansicht wiederzugeben und Aktionen anzuwenden, die visuelle Elemente ändern, die mit der Ansicht zusammenhängen.

Gezielte Inhalte für die Ansicht werden aus dem Cache gelesen.

Die zielgerichteten Inhalte werden so schnell wie möglich bereitgestellt, ohne dass Standardinhalte aufflackern.

Die Benachrichtigungsanfrage wird an den Target-Profilspeicher gesendet, damit der Besucher in der Aktivität erfasst und die Metrik erhöht wird.

Analysedaten werden an den Datenerfassungsserver gesendet.

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.

NOTE

Wenn Sie keine Benachrichtigungen zur Impressions-Zählung bei jedem Auslösen einer Ansicht an Adobe Analytics senden möchten, geben Sie {page: false} an die Funktion triggerView() weiter, damit die Impressions-Zählung nicht erhöht wird, wenn eine Ansicht mehrmals für eine Komponente ausgelöst wird, die ständig neu gerendert wird. Beispiel:

adobe.target.triggerView("PRODUCTS-PAGE-2", {page:false})

Unterstützte Aktivitäten

Aktivitätstyp

Unterstützt?

A/B-Test

Recommendations als Angebot
in A/B-Test- und Erlebnis-Targeting-Aktivitäten (XT)

Automatische Zuordnung

Erlebnis-Targeting

Multivarianz-Test

Nein

Automatisches Targeting

Nein

Automatisierte Personalisierung

Nein

Recommendations

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 Move to Page Load Event . 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?

Analytics for Target (A4T)

Experience Cloud Audiences

Kundenattribute

AEM-Experience Fragments

Unterstützte Funktionen supported-features

Funktion

Unterstützt?

Arbeitsbereiche und Eigenschaften

QA-Links

Form-Based Experience Composer

Nein

Benutzerspezifischer Code

VEC-Optionen

Alle

Klick-Tracking

Bereitstellung mehrerer Aktivitäten

Seitenbereitstellungs-Einstellungen für SPA VEC page-delivery-settings

Mit den Einstellungen für Page Delivery können Sie Regeln konfigurieren, um zu bestimmen, wann eine Target-Aktivität für eine Zielgruppe qualifiziert und ausgeführt werden soll.

Um über den dreiteiligen geleiteten VEC-Arbeitsablauf zur Aktivitätserstellung auf die Page Delivery-Optionen zuzugreifen, klicken Sie im Schritt Experiences auf Configure (Zahnradsymbol) > Page Delivery.

Dialogfeld „Seitenbereitstellung“

Beispielsweise qualifiziert sich eine Target-Aktivität gemäß den oben gezeigten Page Delivery-Einstellungen und wird ausgeführt, wenn ein Besucher direkt auf https://www.adobe.com oder landet, wenn ein Besucher auf eine URL gelangt, 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 SPA jedoch anders funktioniert, müssen die Einstellungen für Page Delivery so konfiguriert werden, dass alle Aktionen auf die Ansichten angewendet werden können, wie in der Aktivität SPA VEC definiert.

Anwendungsfall

Im Folgenden wird ein Anwendungsfall beschrieben:

Bedienfeld für SPA-VEC-Änderungen

Folgende Änderungen wurden vorgenommen:

Die Hintergrundfarbe in der Startansicht unter der URL wurde geändert: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/.
Die Schaltflächenfarbe in der Produktansicht unter der URL wurde geändert: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products.

Was würde unter Berücksichtigung des obigen Beispiels passieren, wenn wir Page Delivery-Einstellungen so konfigurieren, dass nur Folgendes eingeschlossen ist: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/ in einer SPA mit at.js 2.x?

Dialogfeld „Seitenbereitstellung“

Die folgende Abbildung zeigt den Target-Ablauf: Seitenladeanfrage in at.js 2.x:

Target-Ablauf: Seitenladeanfrage in at.js 2.0

Customer Journey Nr. 1

Ein Benutzer navigiert direkt zu https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/.
at.js 2.x sendet eine Abfrage an die Edge, um festzustellen, ob eine Aktivität für die URL ausgeführt werden muss: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/.
In Schritt 6 gibt Target Edge die Aktionen für die Startseiten- und Produktansicht zurück, sodass sie im Browser zwischengespeichert werden.

Ergebnis: Der Benutzer sieht die grüne Hintergrundfarbe in der Startansicht. Wenn der Benutzer dann zu "https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products"navigiert, wird die blaue Hintergrundfarbe der Schaltfläche angezeigt, da die Aktion im Browser unter der Produktansicht zwischengespeichert wird.

Hinweis: Der Benutzer, der zu https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products navigiert ist, hat kein Laden der Seite Trigger.

Customer Journey Nr. 2

Ein Benutzer navigiert direkt zu https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products.
at.js 2.x sendet eine Abfrage an die Edge, um festzustellen, ob eine Aktivität für die URL ausgeführt werden muss: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products.
Für https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products sind keine Aktivitäten qualifiziert.
Da es keine Aktivitäten gibt, müssen auch keine Aktionen und Ansichten zwischengespeichert werden, damit at.js 2 x ausgelöst werden kann.

Ergebnis: Selbst wenn Sie triggerView() für die Produktansicht definiert haben und eine Aktion für die Produktansicht über den SPA VEC durchgeführt haben, wird die erwartete Aktion nicht angezeigt, da Sie keine Regel erstellt haben, die https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products in den Einstellungen für die Seitenbereitstellung enthielt.

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 Journey und Pfade bedenken, die ein Benutzer nehmen kann, um zu einer Seite zu gelangen, auf der Sie eine A/B-Test- oder Erlebnis-Targeting-Aktivität (XT) anzeigen möchten.

Um das oben stehende Problem zu beheben, können Sie beispielsweise die Basis-URL in den Seitenbereitstellungs-Einstellungen spezifizieren:

Dialogfeld „Seitenbereitstellung“

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, an die Page Delivery-Regeln zu denken.

Meldung zu den Seitenbereitstellungs-Einstellungen

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 Page Delivery-Regeln korrekt angewendet werden.

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

video poster

https://video.tv.adobe.com/v/34777?captions=ger

Weitere Informationen finden Sie unter Verwenden des Visual Experience Composer für Einzelseiten-Apps (SPA VEC) in Adobe Target .

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654