Présentation de la couche de données client Adobe
La couche de données client Adobe (ACDL) est une petite bibliothèque JavaScript open source qui offre à votre site web un moyen standard d’exposer les données et les événements à n’importe quel script de la page. Le code de votre site transmet les données et les événements à un tableau JavaScript nommé adobeDataLayer. Les règles de balises, le SDK Web et d’autres scripts lisent ces données et écoutent ces événements, quel que soit le moment où le script ACDL se charge.
Ce guide documente la bibliothèque ACDL. Pour utiliser l’ACDL dans l’interface utilisateur de collecte de données, consultez l’extension de balise de la couche de données client Adobe.
Pourquoi utiliser une couche de données ? why
En l’absence de couche de données, les balises récupèrent souvent les valeurs de la page, telles que le texte dans le DOM ou les paramètres dans l’URL. Ces implémentations s’interrompent lorsque la conception de la page est modifiée et elles ne peuvent collecter que les éléments affichés sur la page. Une couche de données sépare deux responsabilités :
- Le code de votre site décrit ce qui se passe sur la page, comme le nom de la page, le produit qu’un visiteur a consulté ou le formulaire qu’il a envoyé.
- Vos balises et autres scripts décident de l’utilisation de ces informations, par exemple des données à envoyer à Adobe et du moment où elles doivent être envoyées.
ACDL ajoute les fonctionnalités suivantes à ce modèle :
- Chargement asynchrone. Le code de site peut transférer les données avant le chargement du script ACDL. ACDL traite tout dans l’ordre lors de son chargement. Vous pouvez donc le charger avec
asyncoudefersans perdre de données. - Événements et écouteurs. Les scripts peuvent écouter les événements nommés ou les modifications de données, y compris les événements qui se sont produits avant l’ajout de l’écouteur.
- État calculé. ACDL fusionne chaque push de données en un seul objet que tout script peut lire à tout moment.
- Historique. La baie de disques conserve un enregistrement des données et des événements qui ont été transmis, ce qui vous aide à déboguer votre implémentation.
Fonctionnement how-it-works
L’ACDL est construit autour d’une baie JavaScript simple :
- Votre page crée le tableau
window.adobeDataLayers’il n’existe pas déjà. - Votre code de site ajoute des éléments au tableau avec
push(). Un élément peut être un objet de données, un objet d’événement ou une fonction. Avant le chargement de l’ACDL, ces éléments attendent dans le tableau comme une file d’attente. - Lorsque le script ACDL se charge, il ajoute des méthodes au tableau, telles que
getState()etaddEventListener(), et remplacepush()par sa propre version. Il traite ensuite chaque élément mis en file d’attente dans l’ordre dans lequel il a été envoyé. - À partir de là, ACDL traite chaque nouvel élément dès qu’il est envoyé. Il fusionne les données dans l’état calculé, appelle les écouteurs d’événement correspondants et conserve les données et les objets d’événement dans le tableau sous le nom de historique.
// Site code: describe what happened on the page
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
page: { title: "Home", language: "en" }
});
window.adobeDataLayer.push({ event: "page view" });
// Another script: react to what happened
window.adobeDataLayer.push(function(dl) {
dl.addEventListener("page view", function(event) {
console.log("Page title:", dl.getState("page.title"));
});
});
Étant donné que le listener utilise la portée par défaut all, il s’exécute pour l’événement page view même si cet événement a été transmis en premier.
ACDL stocke et distribue les données dans la page. Il n’envoie de données nulle part. Pour envoyer des données à Adobe, utilisez des balises ou le SDK Web pour lire à partir de la couche de données. Voir Envoyer des données de la couche de données client Adobe avec le SDK Web.
Fonctionnement d’ACDL avec d’autres outils Adobe adobe-tools
Format des données data-format
ACDL ne nécessite pas de structure de données spécifique. Vous pouvez pousser n’importe quel objet brut et l’ACDL le fusionne dans l’état calculé. Comme de nombreux scripts et équipes dépendent des mêmes données, tenez compte des pratiques suivantes :
- Convenez-vous d’une structure avant d’écrire dans la couche de données et documentez-la pour toutes les personnes qui envoient des données ou les lisent.
- Utilisez des valeurs compatibles JSON, telles que des chaînes, des nombres, des booléens, des objets simples et des tableaux. D’autres valeurs, telles que
Dateobjets et fonctions, ne survivent pas à la fusion. Voir Types de valeur. - Envisagez votre destination. Si vous envoyez les données à Adobe Experience Platform, vous pouvez les structurer pour qu’elles ressemblent à votre schéma XDM afin qu’il soit facile à mapper, ou conserver votre propre structure et la mapper dans le flux de données avec Préparation des données pour la collecte de données.
Configuration requise du navigateur browser-requirements
ACDL 3.x utilise la fonction structuredClone() du navigateur et la syntaxe JavaScript moderne. Elle nécessite l’un des navigateurs suivants ou une version ultérieure :
- Chrome 98
- Edge 98
- Firefox 94
- Safari 15.4
La configuration requise pour le navigateur dans ACDL 2.x est inférieure. Voir Mise à niveau de 2.x vers 3.x pour connaître les différences entre les versions.
Versions et code source source
ACDL est en open source sous la licence Apache 2.0.
- Code Source et problèmes :
adobe/adobe-client-data-layersur GitHub - Package :
@adobe/adobe-client-data-layersur npm - Notes de mise à jour : versions de GitHub
Pour vérifier quelle version est exécutée sur une page, lisez la propriété version dans la console de votre navigateur :
adobeDataLayer.version