Installer le SDK

Il existe trois façons d’utiliser le SDK Web de Adobe Experience Platform :

  1. La méthode préférée pour utiliser le SDK Web de Adobe Experience Platform est l’utilisation de Adobe Experience Platform Launch.
  2. Adobe Experience Platform Web SDK est également disponible sur un réseau CDN (Content diffusion Network) que vous pouvez utiliser.
  3. Utilisez la bibliothèque NPM qui exporte les modules EcmaScript 5 et EcmaScript 2015 (ES6).

Option 1 : Installation de l’extension Adobe Experience Platform Launch

Pour obtenir de la documentation sur l’extension Adobe Experience Platform Launch, consultez la documentation de lancement.

Option 2 : Installation de la version autonome prédéfinie

La version prédéfinie est disponible sur un CDN. Vous pouvez référencer la bibliothèque sur le CDN directement sur votre page, ou la télécharger et l’héberger sur votre propre infrastructure. Il est disponible dans des formats minimisés et non minimisés. La version non réduite est utile pour le débogage.

Structure d’URL : https://cdn1.adoberesources.net/alloy/[VERSION]/alloy.min.js OU alliage.js pour la version non réduite.

Par exemple :

Ajouter le code

La version autonome prédéfinie requiert un "code de base" ajouté directement à la page. Copiez et collez le "code de base" suivant le plus haut possible dans la balise <head> de votre code 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.4.0/alloy.min.js" async></script>

Le "code de base" crée une fonction globale nommée alloy. Utilisez cette fonction pour interagir avec le SDK. Si vous souhaitez nommer la fonction globale autre chose, modifiez le nom alloy comme suit :

<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.4.0/alloy.min.js" async></script>

Dans cet exemple, la fonction globale est renommée mycustomname, au lieu de alloy.

IMPORTANT

Pour éviter des problèmes potentiels, utilisez un nom contenant au moins un caractère qui n’est pas un chiffre et qui n’entre pas en conflit avec le nom d’une propriété existant déjà sur window.

Ce code de base, en plus de créer une fonction globale, charge également le code supplémentaire contenu dans un fichier externe (alloy.js) hébergé sur un serveur. Par défaut, ce code est chargé de manière asynchrone pour permettre à votre page web d’être aussi performante que possible. Il s’agit de l’implémentation recommandée.

Prise en charge d’Internet Explorer

Ce SDK utilise des promesses, qui sont une méthode de communication de l’achèvement des tâches asynchrones. L’implémentation Promise utilisée par le SDK est prise en charge en mode natif par tous les navigateurs de cible, à l’exception de Internet Explorer. Pour utiliser le SDK sur Internet Explorer, vous devez avoir window.Promise polyrempli.

Pour déterminer si window.Promise est déjà polyfillé :

  1. Ouvrez votre site Web dans Internet Explorer.
  2. Ouvrez la console de débogage du navigateur.
  3. Saisissez window.Promise dans la console, puis appuyez sur Entrée.

Si autre chose que undefined s’affiche, window.Promise est déjà polyfillé. Une autre façon de déterminer si window.Promise est polyfillé consiste à charger votre site web après avoir suivi les instructions d’installation ci-dessus. Si le SDK renvoie une erreur à propos d’une promesse, il est probable que window.Promise n’ait pas été polyfillé.

Si vous avez déterminé que vous devez polyfill window.Promise, incluez la balise de script suivante au-dessus du code de base fourni précédemment :

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

Cette balise charge un script qui garantit que window.Promise est une implémentation Promise valide.

REMARQUE

Si vous choisissez de charger une autre implémentation Promise, veillez à ce qu’elle prenne en charge Promise.prototype.finally.

Chargement synchrone du fichier JavaScript

Comme expliqué dans la section Ajoutant le code, le code de base que vous avez copié et collé dans le code HTML de votre site Web charge un fichier externe. Le fichier externe contient les principales fonctionnalités du SDK. Toute commande que vous tentez d’exécuter pendant le chargement de ce fichier est mise en file d’attente puis traitée après le chargement du fichier. Le chargement asynchrone du fichier est la méthode d’installation la plus performante.

Dans certaines circonstances, toutefois, vous pouvez vouloir charger le fichier de manière synchrone (des informations supplémentaires sur ces circonstances seront documentées ultérieurement). Cela empêche le reste du HTML d’être analysé et rendu par le navigateur jusqu’à ce que le fichier externe ait été chargé et exécuté. Ce délai supplémentaire avant l’affichage du contenu principal pour les utilisateurs est généralement déconseillé, mais peut être pertinent en fonction des circonstances.

Pour charger le fichier de manière synchrone plutôt qu’asynchrone, supprimez l’attribut async de la deuxième balise script, comme illustré ci-dessous :

<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.4.0/alloy.min.js"></script>

Option 3 : Utilisation du package NPM

Adobe Experience Platform Web SDK est également disponible sous la forme d’un package NPM. 🔗 NPM est le gestionnaire de packages pour JavaScript. L'installation du package NPM vous permet de contrôler le processus de création du script JavaScript du SDK Web de Adobe Experience Platform. Le package NPM expose les modules EcmaScript version 5 ou les modules EcmaScript version 2015 (ES6) destinés à être exécutés dans le navigateur.

npm install @adobe/alloy

Le package NPM du Adobe Experience Platform Web SDK expose une fonction createInstance. Cette fonction est utilisée pour créer une instance. L’option de nom transmise à la fonction contrôle le préfixe utilisé dans la journalisation. Vous trouverez ci-dessous des exemples d’utilisation du package.

Utilisation du package en tant que module ECMAScript 2015 (ES6)

import { createInstance } from "@adobe/alloy";
const alloy = createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });

Utilisation du package en tant que module ECMAScript 5

var alloyLibrary = require("@adobe/alloy");
var alloy = alloyLibrary.createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });

Prise en charge d’Internet Explorer

Le SDK Adobe Experience Platform utilise des promesses, qui sont une méthode de communication de l’achèvement des tâches asynchrones. L’implémentation Promise utilisée par le SDK est prise en charge en mode natif par tous les navigateurs de cible, à l’exception de Internet Explorer. Pour utiliser le SDK sur Internet Explorer, vous devez avoir window.Promise polyrempli.

Une bibliothèque que vous pouvez utiliser pour polyremplir la promesse est promettre-polyremplir. Consultez la documentation promettre-polyfill pour plus d'informations sur la façon d'installer avec NPM.

REMARQUE

Si vous choisissez de charger une autre implémentation Promise, veillez à ce qu’elle prenne en charge Promise.prototype.finally.

Sur cette page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now