DokumentationTarget-Entwicklerhandbuch

Funktionsweise von „at.js“

Last update: Tue Dec 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Entwickler

Zur Client-seitigen Implementierung von Adobe Target müssen Sie die JavaScript-Bibliothek „at.js“ verwenden.

Bei Client-seitigen Implementierungen von Adobe Target stellt Target die mit einer Aktivität verknüpften Erlebnisse direkt dem Client-Browser bereit. Der Browser entscheidet, welches Erlebnis angezeigt werden soll, und zeigt es an. Bei einer Client-seitigen Implementierung können Sie einen WYSIWYG-Editor, Visual Experience Composer (VEC) oder eine nicht visuelle Schnittstelle, den formularbasierten Experience Composer, verwenden, um Ihre Tests und Personalisierungserlebnisse zu erstellen.

Was ist at.js?

Die at.js-Bibliothek ist die Implementierungsbibliothek für die Client-seitige Implementierung von Adobe Target. Die at.js-Bibliothek sorgt für kürzere Seitenladezeiten bei Web-Implementierungen und bietet bessere Implementierungsoptionen für Single-Page-Anwendungen. „at.js“ ist die empfohlene Implementierungsbibliothek und wird häufig mit neuen Funktionen aktualisiert. Es wird empfohlen, dass alle -Kunden die neueste Version von at.js) implementieren oder.

Weitere Informationen finden Sie unter JavaScript-Bibliotheken in Target.

In der Targetunten dargestellten Implementierung sind die folgenden Adobe Experience Cloud-Lösungen implementiert: Analytics, Target und Audience Manager. Darüber hinaus werden die folgenden Experience Cloud Core Services implementiert: Adobe Experience Platform, Audiences und Visitor ID Service.

Was ist der Unterschied zwischen at.js 1.x- und at.js 2.x-Workflow-Diagrammen?

Weitere Informationen zu den Unterschieden, die in 2.x im Vergleich zu 1.x eingeführt wurden, finden Sie unter Aktualisieren von at.js 1.x auf at.js 2.x.

Grob betrachtet gibt es einige Unterschiede zwischen den beiden Versionen:

  • at.js 2.x hat kein globales Mbox-Anfragekonzept, sondern stellt Anfragen beim Laden der Seite. Eine Anfrage beim Laden der Seite kann als Anfrage zum Abrufen von Inhalten verstanden werden, die beim ersten Laden Ihrer Website angewendet werden soll.
  • at.js 2.x verwaltet ein Konzept mit dem Namen Views, das für Einzelseitenanwendungen (SPA) verwendet wird. at.js 1.x kennt dieses Konzept nicht.

Diagramme in at.js 2.x

Die folgenden Diagramme helfen Ihnen, den Workflow von at.js 2.x mit Views zu verstehen und zu verstehen, wie dies die SPA-Integration verbessert. Eine bessere Einführung in die in at.js 2.x verwendeten Konzepte finden Sie unter Implementieren von Einzelseiten-Apps.

(Klicken Sie auf das Bild, um es auf die volle Breite zu erweitern.)

Target-Fluss mit at.js 2.x {modal="regular"}

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 fließen dann in die Profile Store ein. Der Store fordert qualifizierte Zielgruppen aus dem Audience Library an (z. B. Zielgruppen, die von Adobe Analytics, Audience Manager freigegeben wurden usw.).
Kundenattribute werden in einem Batch-Prozess an Profile Store ü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 angezeigt werden, werden im Browser zwischengespeichert, sodass die SPA sofort ohne zusätzlichen Server-Aufruf angezeigt werden kann, wenn die Ansichten durch triggerView() ausgelöst werden.
7
Analytics-Daten werden an Data Collection Server gesendet.
8
Zielgruppendaten werden über die SDID mit Analytics-Daten abgeglichen und in den Analytics-Reporting-Speicher verarbeitet.
Analytics Daten können dann sowohl in Analytics als auch in Target über (A4T)-Berichte angezeigt werden.

Wo immer triggerView() auf Ihrer SPA implementiert ist, werden die Views und Aktionen jetzt aus dem Cache abgerufen und den Benutzenden ohne Serveraufruf angezeigt. triggerView() sendet außerdem eine Benachrichtigungsanfrage an das Target-Backend, um Impressions-Zählungen zu erhöhen und aufzuzeichnen. Weitere Informationen zu at.js für SPAs mit Ansichten finden Sie unter Implementieren von Einzelseiten-Apps.

(Klicken Sie auf das Bild, um es auf die volle Breite zu erweitern.)

Target flow at.js 2.x triggerView {modal="regular"}

Schritt
Details
1
triggerView() wird in der SPA aufgerufen, um die View zu rendern und Aktionen zum Ändern visueller Elemente anzuwenden.
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
Eine Benachrichtigungsanfrage wird an die Target Profile Store gesendet, um den Besucher in der Aktivitäts- und Inkrementmetrik zu zählen.
5
Analytics Daten an Data Collection Servers gesendet.
6
Target Daten werden über die SDID mit Analytics Daten abgeglichen und in den Analytics-Reporting-Speicher verarbeitet. Analytics Daten können dann sowohl in Analytics als auch Target über A4T-Berichte angezeigt werden.

Video: Architekturdiagramm von at.js 2.x

at.js 2.x verbessert die Unterstützung von Adobe Target für SPAs und kann mit anderen Experience Cloud-Lösungen integriert werden. In diesem Video wird erklärt, wie alles zusammenkommt.

video poster

https://video.tv.adobe.com/v/26250/?quality=12

Weitere Informationen finden Sie unter Funktionsweise von at.js 2.x.

at.js 1.x-Diagramm

Die folgenden Diagramme helfen Ihnen, den Workflow von at.js 1.x besser zu verstehen.

(Klicken Sie auf das Bild, um es auf die volle Breite zu erweitern.)

Target-Fluss at.js 1.x {modal="regular"}

Schritt
Beschreibung
Aufruf
Beschreibung
1
Ein Aufruf gibt die Experience Cloud-ID (MCID) zurück, wenn der Benutzer authentifiziert ist; ein anderer Aufruf synchronisiert die Kunden-ID.
2
Die Bibliothek at.js wird synchron geladen und im Dokumentenkörper verborgen.
3
Es wird ein globaler Mbox-Aufruf durchgeführt, in dem alle konfigurierten Parameter, MCID, SDID und Kunden-IDs enthalten sind (optional).
4
Profilskripte werden ausgeführt und anschließend in den Profilspeicher eingespeist. Der Store fordert qualifizierte Zielgruppen aus der Zielgruppenbibliothek an (z. B. von Adobe Analytics freigegebene Zielgruppen, Audience Manager usw.).
Kundenattribute werden in einem Batch-Prozess an den Profilspeicher übermittelt.
5
Basierend auf URL, Mbox-Parametern und Profildaten wird von Target entschieden, welche Aktivitäten und Erlebnisse dem Besucher angezeigt werden sollen.
6
Zielgerichteter Inhalt wird zurück an die Seite übermittelt. Dieser enthält optional Profilwerte für eine weitere Personalisierung.
Das Erlebnis wird so schnell wie möglich ohne ein Flackern der Standardinhalte bereitgestellt.
7
Analytics-Daten werden an Datenerfassungsserver übermittelt.
8
Zieldaten werden über die SDID mit Analytics-Daten abgeglichen und in den Analytics-Reporting-Speicher verarbeitet.
Analytics-Daten können dann sowohl in Analytics als auch in Target über Analytics for Target (A4T)-Berichte angezeigt werden.

Video – Office Hours: Tipps und Übersicht zu at.js (26. Juni 2019)

Dieses Video ist eine Aufzeichnung von „Office Hours“, einer Initiative, die vom Adobe Customer Care-Team geleitet wird.

  • Vorteile der Verwendung von at.js
  • at.js-Einstellungen
  • Einstellungen bei Flackern
  • Debuggen von „at.js“
  • Bekannte Probleme
  • FAQs

video poster

https://video.tv.adobe.com/v/27959/?quality=12

Darstellung von Angeboten mit HTML-Inhalten durch at.js

Bei der Darstellung von Angeboten mit HTML-Inhalten wendet at.js den folgenden Algorithmus an:

  1. Bilder werden vorab geladen (wenn <img>-Tags in HTML-Inhalten vorhanden sind).

  2. HTML-Inhalte sind mit dem DOM-Knoten verbunden.

  3. Inline-Skripte werden ausgeführt (Code, der in <script>-Tags eingeschlossen ist).

  4. Remote-Skripte werden asynchron geladen und ausgeführt (<script>-Tags mit src-Attributen).

Wichtige Hinweise:

  • at.js garantiert nicht die Reihenfolge der Ausführung von Remote-Skripten, da diese asynchron geladen werden.
  • Inline-Skripte sollten nicht von Remote-Skripten abhängig sein, da diese später geladen und ausgeführt werden.
recommendation-more-help
6906415f-169c-422b-89d3-7118e147c4e3