Installation de la couche de données client Adobe

L’installation de la couche de données client (ACDL) Adobe comprend deux parties :

Créer le tableau de couche de données initialize

Ajoutez la ligne suivante avant tout code qui effectue un transfert vers la couche de données :

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

Cette ligne crée le tableau s’il n’existe pas et le conserve s’il existe. Incluez-le dans chaque script qui envoie vers la couche de données, et pas seulement dans le premier. Les scripts peuvent se charger dans n’importe quel ordre et la ligne garantit que chaque script effectue une transmission vers le même tableau sans le remplacer.

Après cette ligne, les données push, les événements et les fonctions avec push() :

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

Jusqu’au chargement de l’ACDL, push() est la méthode de tableau JavaScript standard et le tableau fonctionne comme une file d’attente. Lorsque l’ACDL se charge, il traite les éléments en file d’attente dans l’ordre. Voir File d’attente et historique.

Choisir une méthode d’installation methods

Chargez le fichier ACDL sur chaque page avec l’une des méthodes suivantes :

Extension de balise tags

L’extension de balise Adobe Client Data Layer charge l’ACDL lorsque votre bibliothèque de balises se charge, sauf si la page la charge déjà. Vous n’avez pas besoin d’ajouter la bibliothèque à vos modèles de page. Le code de votre site doit toujours créer le tableau de couche de données et transférer les données. Voir Configurer l’extension de la couche de données client Adobe.

Balise de script script

Téléchargez la bibliothèque à partir de npm (voir npm) et hébergez adobe-client-data-layer.min.js sur votre site. Puis chargez-le dans le <head> de chaque page avec les attributs async et defer :

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

Les navigateurs qui prennent en charge async exécutent le script dès qu’il est téléchargé, sans bloquer la page. Comme ACDL traite tout ce qui était en file d’attente avant son chargement, vos données sont en sécurité même si d’autres scripts sont envoyés en premier à la couche de données.

L’exemple suivant illustre une page où un script intégré et un script externe sont tous deux transmis à la couche de données avant le chargement de l’ACDL :

<!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>

Le script externe /js/myscripts.js crée également le tableau avant d’effectuer la transmission :

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

Les réseaux de diffusion de contenu npm publics, tels que unpkg et jsDelivr, servent également le fichier de bibliothèque. Si vous chargez le fichier à partir d’un réseau CDN tiers, épinglez une version exacte dans l’URL afin que le fichier ne change pas à votre insu.

npm npm

Installez le package :

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

Le package contient un script de navigateur à l’adresse dist/adobe-client-data-layer.min.js. Copiez ce fichier sur votre site et chargez-le avec une balise de script, ou importez le fichier dans votre JavaScript groupée :

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

Le script n’exporte rien. Lorsqu’il s’exécute, il configure window.adobeDataLayer.

Adobe Experience Manager aem

Les composants principaux AEM 2.9.0 et versions ultérieures incluent ACDL comme bibliothèque cliente, et les données push et événements des composants principaux pour chaque composant. Voir Utilisation de la couche de données client Adobe avec les composants principaux.

Si votre site AEM utilise également l’extension de balise ACDL, désactivez l’option Charger la bibliothèque de la couche de données client Adobe en cas d’absence afin que seul AEM charge la bibliothèque. Voir Configurer l’extension de la couche de données client Adobe.

Chargement de la bibliothèque une seule fois load-once

Chargez ACDL une fois par page. Si une seconde copie se charge, elle consigne l’avertissement suivant dans la console du navigateur et ne modifie pas la couche de données :

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

La première copie continue à fonctionner, de sorte que vos données et vos écouteurs fonctionnent toujours. Supprimez le doublon pour éviter un téléchargement supplémentaire. Les doublons sont courants lorsqu’un modèle de page et l’extension de balise chargent tous deux la bibliothèque.

Vérification de l’installation verify

Ouvrez la console de développement de votre navigateur sur une page qui charge l’ACDL et exécutez les commandes suivantes :

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

Si adobeDataLayer.version est undefined, ACDL n’a pas été chargé sur la page. Voir Dépannage.

Mise à niveau de 2.x vers 3.x upgrade

Les composants principaux de Adobe Experience Manager chargent ACDL 2.x par défaut, de sorte que de nombreux sites exécutent toujours 2.x. Examinez les modifications suivantes avant d’effectuer la mise à niveau vers la version 3.x. Pour toutes les versions, consultez les notes de mise à jour sur GitHub.

ACDL 3.0 a remplacé sa bibliothèque utilitaire interne par des fonctionnalités de navigateur intégrées. Le fichier est beaucoup plus petit, mais les exigences et le comportement de fusion ont changé :

Testez votre implémentation après la mise à niveau, en particulier le code qui envoie des tableaux ou modifie le type d’une valeur.