Show Menu
THEMEN×

Implementieren von Einzelseiten-Apps

Herkömmliche Websites funktionierten auf Navigationsmodellen von Seite zu Seite, die ansonsten als Mehrseitige Anwendungen bezeichnet wurden, bei denen Website-Entwürfe eng an urls gekoppelt wurden und Übergänge von einer Webseite zu einer anderen benötigten. Moderne Webanwendungen wie z. B. Einzelseiten-Apps (SPAs) nutzen stattdessen ein Modell, das die Rendering-Funktion der Browseroberfläche beschleunigt, wodurch oft keine Neuladungen der Seite erforderlich sind. Diese Erlebnisse werden oft durch Kundeninteraktionen wie Bildläufe, Klicks und Cursorbewegungen ausgelöst. Mit der Entwicklung neuer Ideen im modernen Web hat sich auch die Relevanz herkömmlicher allgemeiner Ereignisse (z. B. das Laden der Seite) zur Implementierung von Personalisierung und Experimenten verringert.
at. js 2. x bietet umfangreiche Funktionen, mit denen Ihr Unternehmen Personalisierung auf der nächsten Generation clientseitiger Technologien durchführen kann. Diese Version konzentriert sich auf die Verbesserung von at.js, um harmonische Interaktionen mit SPAs zu ermöglichen.
Hier einige Vorteile für die Verwendung von at. js 2. x, die in früheren Versionen nicht verfügbar sind:
  • Möglichkeit zur Zwischenspeicherung aller Angebote beim Seitenladen, um mehrere Server-Aufrufe auf einen einzelnen Server-Aufruf zu reduzieren
  • Drastische Verbesserung der Erlebnisse Ihrer Endbenutzer auf Ihrer Site, da Angebote sofort über den Cache angezeigt werden, ohne dass durch herkömmliche Server-Aufrufe Latenz entsteht
  • Einfache Einrichtung mit einmaliger, einzeiliger Codeeingabe und Entwicklerunterstützung, sodass Ihre Marketing-Experten A/B- und Erlebnis-Targeting(XT)-Aktivitäten über VEC in Ihrer SPA erstellen und ausführen können

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 dieses Unternehmens 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.
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 wir at. js 2. x installieren. Diese Version von at. js wurde mit spas entwickelt. Frühere Versionen von at.js und mbox.js unterstützen Adobe Target-Ansichten und VEC für SPAs nicht.
    Laden Sie at. js 2. x über die Adobe Target-Benutzeroberfläche unter Einrichten > Implementierung herunter. 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 aktuelle Funktion von at. js 2. x triggerView() auf Ihren Sites.
    Nachdem Sie die Ansichten Ihrer SPA definiert haben, wo Sie einen A/B- oder XT-Test durchführen möchten, implementieren Sie die triggerView() Funktion at. js 2. x mit den Ansichten, die als Parameter übergeben wurden. 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 „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);
   }
 }
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);
   }
 }

at. js 2. x-Systemdiagramme

Die folgenden Diagramme helfen Ihnen, den Arbeitsablauf von at. js 2. x mit Ansichten zu verstehen und die Einzelseitenintegration zu verbessern. Eine bessere Einführung der in at. js 2. x verwendeten Konzepte finden Sie unter Implementierung der Einzelseitenanwendung.
Schritt
Details
1
Ein Aufruf gibt die Experience Cloud ID zurück, falls sich der Benutzer authentifiziert hat. Bei einem weiteren Aufruf wird die Kunden-ID synchronisiert.
2
Die Bibliothek at.js wird synchron geladen und im Dokumentenkörper verborgen.
at.js kann auch asynchron mit einem optionalen Pre-hiding-Snippet geladen werden, das auf der Seite implementiert wird.
3
Es wird eine Seitenlade-Anfrage durchgeführt, in der alle konfigurierten Parameter (MCID, SDID und Kunden-ID) enthalten sind.
4
Profilskripte werden ausgeführt und anschließend in den Profilspeicher eingespeist. Der Speicher ruft geeignete Zielgruppen aus der Zielgruppenbibliothek ab (beispielsweise über Adobe Analytics, Zielgruppen-Management etc. bereitgestellte Zielgruppen).
Kundenattribute werden in einem Batch-Prozess an den Profilspeicher übermittelt.
5
Basierend auf den URL-Anfrageparametern und den Profildaten entscheidet Target, welche Aktivitäten und Erlebnisse für die aktuelle Seite und zukünftige Ansichten an den Besucher zurückgegeben werden sollen.
6
Zielgerichteter Inhalt wird zurück an die Seite übermittelt. Dieser enthält optional Profilwerte für eine weitere Personalisierung.
Die zielgerichteten Inhalte auf der aktuellen Seite werden so schnell wie möglich bereitgestellt, ohne dass Standardinhalte aufflackern.
Zielgerichtete Inhalte für Ansichten, die als Ergebnis von Benutzeraktionen in einer SPA, die im Browser zwischengespeichert wird, angezeigt werden. Die SPA kann sofort ohne zusätzlichen Serveraufruf angewendet werden, wenn die Ansichten durch triggerView() ausgelöst werden.
7
Analytics-Daten werden an Datenerfassungsserver übermittelt.
8
Zielgerichtete Daten werden über die SDID mit Analytics-Daten abgeglichen und im Analytics-Berichtspeicher abgelegt.
Analytics-Daten können dann sowohl in Analytics als auch in Target eingesehen werden. Möglich ist dies mithilfe von Berichten des Typs Analytics for Target (A4T).
Egal, wo triggerView() in Ihrer SPA implementiert ist, werden die Ansichten und Aktionen aus dem Cache abgerufen und dem Benutzer ohne Serveraufruf gezeigt. triggerView() sendet außerdem eine Benachrichtigungsanfrage an das Target-Backend, um Impressions-Zählungen zu erhöhen und aufzuzeichnen.
Schritt
Details
1
triggerView() wird in der Einzelseiten-App aufgerufen, um eine Ansicht wiederzugeben und Aktionen anzuwenden, die visuelle Elemente ändern.
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.

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

Nachdem Sie die Installation von at. js 2. x abgeschlossen und zu Ihrer Site hinzugefügt triggerView() haben, führen Sie zum Ausführen von A/B- und XT-Aktivitäten VEC aus. Weitere Informationen finden Sie unter Visual Experience Composer für Einzelseiten-Apps (SPAs).
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.

Verwenden Sie triggerview, um sicherzustellen, dass A 4 T richtig mit at. js 2. x und spas funktioniert.

Um sicherzustellen, dass Analytics for Target (A 4 T) ordnungsgemäß mit at. js arbeitet, müssen Sie dieselbe SDID in der Target-Anforderung und in der Analytics-Anforderung senden.
Best Practices in Bezug auf spas:
  • Verwenden Sie benutzerdefinierte Ereignisse, um zu benachrichtigen, dass in der Anwendung interessante Ereignisse auftreten.
  • Auslösen eines benutzerspezifischen Ereignisses vor dem Start der Ansicht
  • Auslösen eines benutzerspezifischen Ereignisses, wenn die Anzeige abgeschlossen wird
at. js 2. x wurde eine neue API -triggerview () -Funktion hinzugefügt. Sie sollten at. js triggerView() darüber informieren, dass eine Ansicht mit dem Rendern beginnt.
Um zu sehen, wie benutzerspezifische Ereignisse kombiniert werden, sehen wir at. js 2. x und Analytics ein Beispiel. In diesem Beispiel wird davon ausgegangen, dass die HTML-Seite die Besucher-API, gefolgt von at. js 2. x und appmeasurement enthält.
Nehmen wir an, dass die folgenden benutzerspezifischen Ereignisse vorhanden sind:
  • at-view-start - Wenn die Ansicht beginnt
  • at-view-end - Wenn die Anzeige abgeschlossen wird
Um sicherzustellen, dass A 4 T mit at. js 2. x arbeitet,
Der Starthandler für die Ansicht sollte wie folgt aussehen:
document.addEventListener("at-view-start", function(e) {
  var visitor = Visitor.getInstance("<your Adobe Org ID>");
  
  visitor.resetState();
  adobe.target.triggerView("<view name>");
});
Der Ansichtshandler sollte etwa wie folgt aussehen:
document.addEventListener("at-view-end", function(e) {
  // s - is the AppMeasurement tracker object
  s.t();
});
Sie müssen die at-view-start Ereignisse und at-view-end Ereignisse auslösen. Diese Ereignisse sind nicht Teil von benutzerspezifischen at. js-Ereignissen.
Obwohl diese Beispiele javascript-Code verwenden, kann all dies vereinfacht werden, wenn Sie einen Tag-Manager verwenden, z. B. Adobe Launch.
Wenn die vorhergehenden Schritte folgen, sollten Sie eine robuste A 4 T-Lösung für spas haben.

Schulungsvideos

Weitere Informationen dazu finden Sie in den folgenden Videos:

Funktionsweise von at. js 2. x


See Understanding how at.js 2.x works for more information.

at. js 2. x in einem SPA implementieren


Verwendung von VEC für SPAs in Adobe Target