Installieren der Adobe Client-Datenschicht

Die Installation der Adobe Client-Datenschicht (ACDL) umfasst zwei Teile:

Erstellen des Datenschicht-Arrays initialize

Fügen Sie vor jedem Code, der an die Datenschicht gesendet wird, die folgende Zeile hinzu:

window.adobeDataLayer = window.adobeDataLayer || [];

Diese Zeile erstellt das Array, wenn es nicht existiert, und behält es, wenn es existiert. Fügen Sie sie in jedes Skript ein, das an die Datenschicht weiterleitet, nicht nur an die erste. Skripte können in beliebiger Reihenfolge geladen werden. Die Zeile stellt sicher, dass jedes Skript an dasselbe Array gesendet wird, ohne es zu überschreiben.

Nach dieser Zeile übertragen Sie Daten, Ereignisse und Funktionen mit push():

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({ page: { title: "Home" } });

Bis zum Laden der ACDL ist push() die standardmäßige JavaScript-Array-Methode, und das Array funktioniert als Warteschlange. Beim Laden von ACDL werden die Elemente in der Warteschlange der Reihe nach verarbeitet. Siehe Warteschlange und ​.

Installationsmethode auswählen methods

Laden Sie ACDL auf jeder Seite mit einer der folgenden Methoden:

Tag-Erweiterung tags

Die Adobe Client-Datenschicht-Tag-Erweiterung lädt ACDL, wenn Ihre Tag-Bibliothek geladen wird, es sei denn, die Seite lädt sie bereits. Sie müssen die Bibliothek nicht zu Ihren Seitenvorlagen hinzufügen. Ihr Site-Code muss weiterhin das Datenschicht-Array erstellen und Daten per Push übertragen. Siehe Konfigurieren der Adobe Client-Datenschicht-Erweiterung.

Skript-Tag script

Laden Sie die Bibliothek von npm (siehe npm) herunter und hosten Sie adobe-client-data-layer.min.js auf Ihrer Site. Laden Sie sie dann in die <head> jeder Seite mit den Attributen async und defer :

<script src="/js/adobe-client-data-layer.min.js" async defer></script>

In Browsern mit -Unterstützung async das Skript direkt beim Herunterladen ausgeführt, ohne die Seite zu blockieren. Da ACDL alles verarbeitet, was vor dem Laden in die Warteschlange gestellt wurde, sind Ihre Daten sicher, auch wenn andere Skripte zuerst auf die Datenschicht übertragen.

Das folgende Beispiel zeigt eine Seite, auf der sowohl ein Inline-Skript als auch ein externes Skript in die Datenschicht übertragen werden, bevor ACDL geladen wird:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My page</title>
    <script src="/js/myscripts.js" defer></script>
    <script>
      window.adobeDataLayer = window.adobeDataLayer || [];
      window.adobeDataLayer.push({ page: { title: "My page" } });
    </script>
    <script src="/js/adobe-client-data-layer.min.js" async defer></script>
  </head>
  <body>
    <h1>My page</h1>
  </body>
</html>

Das externe Skript erstellt /js/myscripts.js auch das -Array, bevor es gepusht wird:

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({ user: { loggedIn: false } });

Öffentliche npm-CDNs wie unpkg und jsDelivr dienen ebenfalls zur Bereitstellung der Bibliotheksdatei. Wenn Sie sie von einem CDN eines Drittanbieters laden, heften Sie eine exakte Version an die URL, damit sich die Datei nicht ohne Ihr Wissen ändert.

npm npm

Installieren Sie das Paket:

npm install @adobe/adobe-client-data-layer

Das Paket enthält ein Browser-Skript unter dist/adobe-client-data-layer.min.js. Kopieren Sie diese Datei entweder auf Ihre Site und laden Sie sie mit einem Skript-Tag oder importieren Sie die Datei in Ihre gebündelte JavaScript:

import "@adobe/adobe-client-data-layer/dist/adobe-client-data-layer.min.js";

Das Skript exportiert nichts. Wenn er ausgeführt wird, richtet er window.adobeDataLayer ein.

Adobe Experience Manager aem

AEM-Kernkomponenten 2.9.0 und höher enthalten ACDL als Client-Bibliothek und Kernkomponenten, die Daten und Ereignisse für jede Komponente per Push übertragen. Siehe Verwenden der Adobe Client-Datenschicht mit den Kernkomponenten.

Wenn Ihre AEM-Site auch die ACDL-Tag-Erweiterung verwendet, deaktivieren Sie die Option Laden der Adobe Client-Datenschichtbibliothek, falls nicht vorhanden sodass nur AEM die Bibliothek lädt. Siehe Konfigurieren der Adobe Client-Datenschicht-Erweiterung.

Bibliothek nur einmal laden load-once

Laden Sie ACDL einmal pro Seite. Wenn eine zweite Kopie geladen wird, wird die folgende Warnung in der Browser-Konsole protokolliert und die Datenschicht wird nicht geändert:

Adobe Client Data Layer v3.0.1 has already been imported/initialized on this page. You may be erroneously loading it a second time.

Die erste Kopie wird weiterhin ausgeführt, sodass Ihre Daten und Listener weiterhin funktionieren. Entfernen Sie das Duplikat, um den zusätzlichen Download zu vermeiden. Duplikate sind häufig, wenn sowohl eine Seitenvorlage als auch die Tag-Erweiterung die Bibliothek laden.

Überprüfen der Installation verify

Öffnen Sie die Entwicklerkonsole Ihres Browsers auf einer Seite, auf der ACDL geladen wird, und führen Sie die folgenden Befehle aus:

adobeDataLayer.version     // For example, "3.0.1"
adobeDataLayer.getState()  // The computed state of everything pushed so far

Wenn adobeDataLayer.version undefined ist, wurde ACDL nicht auf der Seite geladen. Siehe Fehlerbehebung.

Upgrade von 2.x auf 3.x upgrade

Adobe Experience Manager-Kernkomponenten laden standardmäßig ACDL 2.x, sodass auf vielen Sites weiterhin 2.x ausgeführt wird. Überprüfen Sie die folgenden Änderungen, bevor Sie auf 3.x aktualisieren. Informationen zu allen Versionen finden Sie in den Versionshinweisen auf GitHub.

ACDL 3.0 ersetzte die interne Dienstprogramm-Bibliothek durch integrierte Browser-Funktionen. Die Datei ist viel kleiner, aber die Anforderungen und das Verhalten bei der Zusammenführung haben sich geändert:

Testen Sie die Implementierung nach dem Upgrade, insbesondere Code, der Arrays pusht oder den Typ eines Werts ändert.