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

Last update: Mon Apr 24 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:
Visual Experience Composer (VEC)

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.

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

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

Laden Sie at.js 2.x über die Adobe Target-Benutzeroberfläche unter herunter. Administration > Implementierung. at.js 2.x kann auch über Tags in bereitgestellt werden. Adobe Experience Platform. 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 triggerView() -Funktion mit den Ansichten, die als Parameter übergeben werden. 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 Ä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 werden einige Beispielanwendungsfälle zum Aufrufen der triggerView() -Funktion in React für unsere hypothetische E-Commerce-SPA:

Link: Startseite

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“

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.

Ä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

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 Änderungen Bereich.
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.

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 dies auszuführen, klicken Sie im VEC auf Erstellen und wenden Sie diese Änderungen auf die Home-Ansicht 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 Durchsuchen und dann auf den Link Produkte in der Kopfzeile.
Klicken Sie einmal auf Mehr laden, um zur zweiten Produktreihe zu gelangen.
Klicken Sie auf Erstellen.
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 Durchsuchen.
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 Erstellen.
Ä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:

Einem abgemeldeten oder anonymen Benutzer die neueste Unternehmensförderung zeigen, z. B. ein 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 demnächst abgeschlossen werden, 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", um angezeigt zu werden in http://www.telecom.com/home, wobei der Ansichtsname "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", um angezeigt zu werden in http://www.telecom.com/loggedIn/home, 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, um alle Ansichten abzurufen, die in aktiven Aktivitäten vorhanden sind, die sich für die Zielgruppe mit dem Parameter "loggedIn = false".
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.
Wann 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() nach 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, übergeben Sie {page: false} der triggerView() -Funktion verwenden, sodass 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
bei A/B-Test- und Erlebnis-Targeting(XT)-Aktivitäten

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

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 den SPA-VEC page-delivery-settings

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.

Dialogfeld „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.comlandet 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:

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 mit dem obigen Beispiel passieren, wenn wir Seitenbereitstellung -Einstellungen, die nur Folgendes enthalten: 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 richtet eine Abfrage an Edge, um zu sehen, ob Aktivitäten für die URL ausgeführt werden müssen: 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#/productsfestgelegt ist, 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 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 richtet eine Abfrage an Edge, um zu sehen, ob Aktivitäten für die URL ausgeführt werden müssen: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products.
Es gibt keine Aktivitäten, die qualifiziert sind für https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products.
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: Auch wenn Sie triggerView() für die Produktansicht 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 Folgendes enthält: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=de#/products in den Einstellungen für die Seitenbereitstellung.

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, die Seitenbereitstellungsregeln zu beachten.

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 Seitenbereitstellungsregeln korrekt anzuwenden sind.

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

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

Siehe Verwenden von Visual Experience Composer für Einzelseiten-Apps (SPA VEC) in Adobe Target für weitere Informationen.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654