Web SDK installieren installing-the-sdk
Es werden drei Möglichkeiten zur Installation des Adobe Experience Platform Web SDK unterstützt:
- Die bevorzugte Methode zur Verwendung des Adobe Experience Platform Web SDK besteht über die Datenerfassungs-Benutzeroberfläche oder die Experience Platform-Benutzeroberfläche.
- Das Adobe Experience Platform Web SDK ist auch in einem Inhaltsbereitstellungsnetzwerk (Content Delivery Network, CDN) verfügbar, das Sie verwenden können.
- Verwenden Sie die NPM-Bibliothek, die EcmaScript 5- und EcmaScript 2015-Module (ES6) exportiert.
Option 1: Installieren der Tag-Erweiterung
Die Dokumentation zur Tag-Erweiterung finden Sie unter Dokumentation zu Tags
Option 2: Installieren der vordefinierten eigenständigen Version
Die vordefinierte Version ist in einem CDN verfügbar. Sie können die Bibliothek im CDN direkt auf Ihrer Seite referenzieren oder sie herunterladen und in Ihrer eigenen Infrastruktur hosten. Es ist in minimierten und nicht minimierten Formaten verfügbar. Die nicht minimierte Version ist für Debugging-Zwecke hilfreich.
URL-Struktur: https://cdn1.adoberesources.net/alloy/[VERSION]/alloy.min.js ODER legierungen.js für die nicht minimierte Version.
Beispiel:
- Minimiert: https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js
- Nicht minimiert: https://cdn1.adoberesources.net/alloy/2.14.0/alloy.js
Code hinzufügen adding-the-code
Die vordefinierte eigenständige Version erfordert einen "Basis-Code", der direkt zur Seite hinzugefügt wird. Kopieren Sie den folgenden "Basis-Code"so weit wie möglich in den <head> -Tag Ihrer HTML:
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js" async></script>
Der "Basis-Code"erstellt eine globale Funktion mit dem Namen alloy. Verwenden Sie diese Funktion, um mit dem SDK zu interagieren. Wenn Sie der globalen Funktion einen anderen Namen geben möchten, ändern Sie die alloy name wie folgt:
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["mycustomname"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js" async></script>
In diesem Beispiel wird die globale Funktion in mycustomname anstatt alloy umbenannt.
window gefunden wurde.Dieser Basis-Code lädt neben der Erstellung einer globalen Funktion auch zusätzlichen Code, der in einer externen Datei (alloy.js) enthalten ist, die auf einem Server gehostet wird. Standardmäßig wird dieser Code asynchron geladen, damit Ihre Web-Seite so leistungsfähig wie möglich ist. Dies ist die empfohlene Implementierung.
Unterstützen von Internet Explorer support-internet-explore
Dieses SDK verwendet Versprechen, die eine Methode zur Mitteilung des Abschlusses asynchroner Aufgaben darstellen. Die Promise Die vom SDK verwendete Implementierung wird nativ von allen Ziel-Browsern unterstützt, mit Ausnahme von Internet Explorer. So verwenden Sie das SDK in Internet Explorer, müssen Sie window.Promise Polyfill.
So stellen Sie fest, ob Sie bereits über ein window.Promise-Polyfill verfügen:
- Öffnen Sie Ihre Website in Internet Explorer.
- Öffnen Sie die Debugging-Konsole des Browsers.
- Typ
window.Promisein die Konsole ein und drücken Sie die Eingabetaste.
Wenn etwas anderes als undefined angezeigt wird, verfügen Sie vermutlich bereits über ein window.Promise-Polyfill. Eine weitere Möglichkeit, um festzustellen, ob ein window.Promise-Polyfill vorliegt, ist das Laden Ihrer Website nach Abschluss der oben genannten Installationsanweisungen. Wenn das SDK einen Fehler ausgibt, in dem ein Promise erwähnt wird, verfügen Sie vermutlich über kein window.Promise-Polyfill.
Wenn Sie festgestellt haben, müssen Sie ein Polyfill window.Promise, fügen Sie das folgende Skript-Tag über dem zuvor bereitgestellten Basis-Code ein:
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
Dieses Tag lädt ein Skript, das sicherstellt, dass window.Promise ist eine gültige Implementierung von Promise.
Promise.prototype.finally.Synchrones Laden der JavaScript-Datei loading-javascript-synchronously
Wie im Abschnitt beschrieben Code hinzufügen, lädt der Basis-Code, den Sie kopiert und in die HTML Ihrer Website eingefügt haben, eine externe Datei. Die externe Datei enthält die Kernfunktionalität des SDK. Jeder Befehl, den Sie beim Laden dieser Datei ausführen möchten, wird in die Warteschlange gestellt und nach dem Laden der Datei verarbeitet. Das asynchrone Laden der Datei ist die leistungsfähigste Installationsmethode.
Unter bestimmten Umständen möchten Sie die Datei jedoch möglicherweise synchron laden. Dadurch wird verhindert, dass der Rest des HTML-Dokuments vom Browser analysiert und gerendert wird, bis die externe Datei geladen und ausgeführt wurde. Diese zusätzliche Verzögerung vor der Anzeige von Primärinhalten für Nutzer wird in der Regel nicht empfohlen, kann aber je nach den Umständen sinnvoll sein.
Um die Datei synchron statt asynchron zu laden, entfernen Sie das async-Attribut aus dem zweiten script-Tag, wie nachstehend dargestellt:
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js"></script>
Option 3: Verwenden des NPM-Pakets
Das Adobe Experience Platform Web SDK ist auch als NPM-Paket verfügbar. NPM ist der Paketmanager für JavaScript. Durch die Installation des NPM-Pakets können Sie den Build-Prozess für das Adobe Experience Platform Web SDK-JavaScript steuern. Das NPM-Paket stellt EcmaScript Version 5 Module oder EcmaScript Version 2015 (ES6) Module zur Verfügung, die im Browser ausgeführt werden sollen.
npm install @adobe/alloy
Das NPM-Paket des Adobe Experience Platform Web SDK stellt eine createInstance -Funktion. Diese Funktion wird zum Erstellen einer Instanz verwendet. Die an die Funktion übergebene Namensoption steuert das bei der Protokollierung verwendete Präfix. Im Folgenden finden Sie Beispiele für die Verwendung des -Pakets.
Verwenden des Pakets als ECMAScript 2015 (ES6)-Modul
import { createInstance } from "@adobe/alloy";
const alloy = createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });
Verwenden des Pakets als ECMAScript 5-Modul
var alloyLibrary = require("@adobe/alloy");
var alloy = alloyLibrary.createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });
Unterstützen von Internet Explorer
Das Adobe Experience Platform-SDK verwendet Versprechen, die eine Methode darstellen, um den Abschluss asynchroner Aufgaben zu kommunizieren. Die Promise Die vom SDK verwendete Implementierung wird nativ von allen Ziel-Browsern unterstützt, mit Ausnahme von Internet Explorer. So verwenden Sie das SDK in Internet Explorer, müssen Sie window.Promise Polyfill.
Eine Bibliothek, die Sie zum Polyfill-Promise verwenden können, ist Promise-Polyfill. Siehe Promise-Polyfill-Dokumentation für weitere Informationen zur Installation mit NPM.
Promise.prototype.finally.