Installation du SDK

Dernière mise à jour : 2023-11-14
  • Rubriques :
  • Web SDK
    Afficher plus sur ce sujet
  • Créé pour :
  • Developer
    User
    Admin
    Leader

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

  1. La méthode recommandée pour utiliser le SDK Web de Adobe Experience Platform consiste à utiliser l’interface utilisateur de collecte de données ou l’interface utilisateur Experience Platform.
  2. Le SDK Web de Adobe Experience Platform est également disponible sur un réseau de diffusion de contenu (CDN) 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 de balise

Pour obtenir de la documentation sur l’extension de balise, voir Documentation sur les balises

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

La version prédéfinie est disponible sur un réseau de diffusion de contenu. Vous pouvez référencer la bibliothèque sur le réseau de diffusion de contenu 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 minimisée est utile à des fins de débogage.

Structure de l’URL : https://cdn1.adoberesources.net/alloy/[VERSION]/alloy.min.js OU alloy.js pour la version non minimisée.

Par exemple :

Ajout du code

La version autonome prédéfinie nécessite un "code de base" ajouté directement à la page. Copiez et collez le "code de base" suivant le plus haut possible dans la <head> de votre 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>

Le "code de base" crée une fonction globale nommée alloy. Utilisez cette fonction pour interagir avec le SDK. Si vous souhaitez appeler autrement la fonction globale, modifiez la variable alloy name 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.14.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. La variable Promesse La mise en oeuvre utilisée par le SDK est prise en charge en mode natif par tous les navigateurs cibles, à l’exception de Internet Explorer. Pour utiliser le SDK sur Internet Explorer, vous devez window.Promise polyfillé.

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 polyfiller 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 s’assure que window.Promise est une implémentation de promesse valide.

REMARQUE

Si vous choisissez de charger une implémentation de promesse différente, assurez-vous qu’elle prend en charge Promise.prototype.finally.

Chargement synchrone du fichier JavaScript

Comme expliqué dans la section Ajout du code, le code de base que vous avez copié et collé dans le 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 une fois le fichier chargé. 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.14.0/alloy.min.js"></script>

Option 3 : utilisation du package NPM

Le SDK Web de Adobe Experience Platform est également disponible sous la forme d’un package NPM. NPM est le gestionnaire de modules pour JavaScript. L’installation du package NPM vous permet de contrôler le processus de création pour le JavaScript du SDK Web 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 SDK Web Adobe Experience Platform expose une createInstance de la fonction 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 module .

Utilisation du package comme module ECMAScript 2015 (ES6)

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

Le package NPM repose sur des modules CommonJS ; par conséquent, lors de l’utilisation d’un bundler, assurez-vous que le bundler prend en charge les modules CommonJS. Certains lots, tels que Cumul, requiert une plugin qui fournit la prise en charge de CommonJS.

Utilisation du package comme 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. La variable Promesse La mise en oeuvre utilisée par le SDK est prise en charge en mode natif par tous les navigateurs cibles, à l’exception de Internet Explorer. Pour utiliser le SDK sur Internet Explorer, vous devez window.Promise polyfillé.

Une bibliothèque que vous pouvez utiliser pour polyfiller la promesse est promesse-polyfill. Voir documentation promo-polyfill pour plus d’informations sur la procédure d’installation avec NPM.

REMARQUE

Si vous choisissez de charger une implémentation de promesse différente, assurez-vous qu’elle prend en charge Promise.prototype.finally.

Page précédente
Next page

Sur cette page