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 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
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
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
.
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.
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)
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
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} >
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.
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
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);
}
}
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 Ä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. |
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:
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 eine Ansicht PRODUKTSEITE-2 erstellt haben. Unser Ziel ist es, die Bezeichnung „Preis“ 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.
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.
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:
http://www.telecom.com/home
.http://www.telecom.com/loggedIn/home
anzeigen.Ihre Entwickler benennen die Ansichten und rufen triggerView()
wie folgt auf:
http://www.telecom.com/home
lautet der Ansichtsname „Abgemeldet Home“.
triggerView("Logged Out Home")
wird aufgerufen.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:
loggedIn= false
", um angezeigt zu werden in http://www.telecom.com/home
, wobei der Ansichtsname "Abgemeldet Home"lautet.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:
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
".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.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.
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 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})
Aktivitätstyp | Unterstützt? |
---|---|
A/B-Test | Ja |
Recommendations als Angebot bei A/B-Test- und Erlebnis-Targeting(XT)-Aktivitäten |
Ja |
Automatische Zuordnung | Ja |
Erlebnis-Targeting | Ja |
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.
Integration | Unterstützt? |
---|---|
Analytics for Target (A4T) | Ja |
Experience Cloud Audiences | Ja |
Kundenattribute | Ja |
AEM-Experience Fragments | Ja |
Funktion | Unterstützt? |
---|---|
Arbeitsbereiche und Eigenschaften | Ja |
QA-Links | Ja |
Form-Based Experience Composer | Nein |
Benutzerspezifischer Code | Ja |
VEC-Optionen | Alle |
Klick-Tracking | Ja |
Bereitstellung mehrerer Aktivitäten | Ja |
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.
Im Folgenden wird ein Anwendungsfall beschrieben:
Folgende Änderungen wurden vorgenommen:
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?
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 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
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.
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:
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.
Siehe Verwenden von Visual Experience Composer für Einzelseiten-Apps (SPA VEC) in Adobe Target für weitere Informationen.