Utilisation de la couche de données client Adobe avec les composants principaux data-layer-core-components
L’objectif de la couche de données client Adobe est de réduire les efforts d’instrumentalisation des sites web en fournissant une méthode normalisée afin d’exposer et d’accéder à tout type de données pour tout script.
La couche de données client Adobe est indépendante de la plateforme, mais elle est entièrement intégrée aux composants principaux pour l’utilisation avec AEM.
Tout comme les composants principaux, le code de la couche de données client Adobe est disponible sur GitHub avec sa documentation destinée aux développeurs. Ce document donne un aperçu de la façon dont les composants principaux interagissent avec la couche de données ; les détails techniques complets sont disponibles dans la documentation GitHub.
DATA_LAYER_INTEGRATION.md dans le référentiel des composants principaux.Installation et activation installation-activation
Depuis la version 2.9.0 des composants principaux, la couche de données est distribuée avec les composants principaux sous la forme d’une bibliothèque cliente AEM et aucune installation n’est nécessaire. Tous les projets générés par l’archétype de projets AEM v. 24+ incluent par défaut une couche de données activée.
Pour activer manuellement la couche de données, vous devez créer une configuration contextuelle :
-
Créez la structure suivante dans le dossier
/conf/<mySite>, où<mySite>est le nom du projet de votre site :/conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig- Où chaque nœud a une valeur
jcr:primaryTypedéfinie surnt:unstructured.
-
Ajoutez une propriété booléenne appelée
enabledet définissez-la surtrue.
Emplacement de DataLayerConfig dans le site de référence WKND
-
Ajoutez une propriété
sling:configRefsur le nœudjcr:contentde votre site ci-dessous/content(par exemple,/content/<mySite>/jcr:content) et définissez-la sur/conf/<mySite>par rapport à l’étape précédente. -
Une fois une fonctionnalité activée, vous pouvez vérifier son activation en chargeant une page du site en dehors de l’éditeur, par exemple en utilisant l’option Afficher comme publié(e) dans l’éditeur. Inspectez la source de la page. La balise
<body>doit contenir un attributdata-cmp-data-layer-enabled.code language-html <body class="page basicpage" id="page-id" data-cmp-data-layer-enabled> <script> window.adobeDataLayer = window.adobeDataLayer || []; adobeDataLayer.push({ page: JSON.parse("{\x22page\u002D6c5d4b9fdd\x22:{\x22xdm:language\x22:\x22en\x22,\x22repo:path\x22:\x22\/content\/wknd\/language\u002Dmasters\/en.html\x22,\x22xdm:tags\x22:[],\x22xdm:template\x22:\x22\/conf\/wknd\/settings\/wcm\/templates\/landing\u002Dpage\u002Dtemplate\x22,\x22@type\x22:\x22wknd\/components\/page\x22,\x22dc:description\x22:\x22WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.\x22,\x22dc:title\x22:\x22WKND Adventures and Travel\x22,\x22repo:modifyDate\x22:\x222020\u002D09\u002D29T07:50:13Z\x22}}"), event:'cmp:show', eventInfo: { path: 'page.page\u002D6c5d4b9fdd' } }); </script> -
Vous pouvez également ouvrir les outils de développement de votre navigateur. Dans la console, l’objet JavaScript
adobeDataLayerdoit être disponible. Saisissez la commande suivante pour obtenir l’état de la couche de données de votre page actuelle :code language-javascript window.adobeDataLayer.getState();
Composants pris en charge supported-components
Les composants suivants prennent en charge la couche de données.
Reportez-vous également aux événements déclenchés par les composants.
Schémas de données des composants principaux data-schemas
Voici une liste de schémas que les composants principaux utilisent avec la couche de données.
Schéma d’élément de composant/conteneur item
Le schéma d’élément de composant/conteneur est utilisé dans les composants suivants :
Le schéma d’élément de composant/conteneur est défini comme suit.
id: { // component ID
@type // resource type
repo:modifyDate // last modified date
dc:title // title
dc:description // description
xdm:text // text
xdm:linkURL // link URL
parentId // parent component ID
}
L’événement suivant correspond au schéma d’élément de composant/conteneur :
cmp:click
Schéma de page page
Le schéma de page est utilisé par le composant suivant :
Le schéma de page est défini comme suit.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
xdm:tags // page tags
repo:path // page path
xdm:template // page template
xdm:language // page language
}
Un événement cmp:show est déclenché au chargement de la page. Cet événement est distribué à partir du code JavaScript intégré immédiatement au-dessous de la balise d’ouverture <body>, ce qui en fait le premier événement de la file d’attente des événements de la couche de données.
Schéma de conteneur container
Le schéma de conteneur est utilisé par les composants suivants :
Le schéma de conteneur est défini comme suit.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
shownItems // array of the displayed item IDs
}
Les événements suivants correspondent au schéma de conteneur :
cmp:clickcmp:showcmp:hide
Schéma d’image image
Le schéma d’image est utilisé par le composant suivant :
Le schéma d’image est défini comme suit.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
image // asset detail (see below section)
}
L’événement suivant correspond au schéma d’image :
cmp:click
Schéma de ressource asset
Le schéma de ressource est utilisé dans le composant Image.
Le schéma de ressource est défini comme suit.
id: {
repo:id // asset UUID
repo:path // asset path
@type // asset resource type
xdm:tags // asset tags
repo:modifyDate
}
L’événement suivant correspond au schéma de ressource :
cmp:click
Schéma de fragment de contenu content-fragment
Le schéma Fragment de contenu est utilisé par le composant Fragment de contenu.
Le schéma Fragment de contenu est défini comme suit.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
elements // array of the Content Fragment elements
}
Le schéma utilisé pour l’élément Fragment de contenu est le suivant.
{
xdm:title // title
xdm:text // text
}
Événements des composants principaux events
Un certain nombre d’événements sont déclenchés par les composants principaux au moyen de la couche de données. La bonne pratique pour interagir avec la couche de données consiste à enregistrer un listener d’événement, puis à effectuer une action en fonction du type d’événement et/ou du composant qui a déclenché l’événement. Il est ainsi possible d’éviter les conditions de concurrence potentielle avec des scripts asynchrones.
Vous trouverez ci-dessous les événements prêts à l’emploi fournis par les composants principaux d’AEM :
cmp:click: Lorsque vous cliquez sur un élément cliquable (élément doté d’un attributdata-cmp-clickable), la couche de données déclenche un événementcmp:click.cmp:showetcmp:hide: Manipuler les composants d’accordéon (développer/réduire), de carrousel (boutons Suivant/Précédent) et d’onglets (sélection par onglets) provoque le déclenchement des événementscmp:showetcmp:hide, respectivement, par la couche de données. Un événementcmp:showest également distribué au chargement de la page et devrait être le premier.cmp:loaded: Dès que la couche de données est remplie avec les composants principaux sur la page, elle déclenche un événementcmp:loaded.
Événements déclenchés par le composant events-components
Les tableaux suivants répertorient les composants principaux standard qui déclenchent des événements avec ces événements.
cmp:show et cmp:hidecmp:clickcmp:clickcmp:show et cmp:hidecmp:clickcmp:clickcmp:showcmp:show et cmp:hidecmp:clickInfos sur le chemin de l’événement event-path-info
Chaque événement de la couche de données déclenché par un composant principal d’AEM inclura une charge utile associée à l’objet JSON suivant :
eventInfo: {
path: '<component-path>'
}
Où <component-path> est le chemin JSON vers le composant de la couche de données qui a déclenché l’événement. La valeur, disponible dans event.eventInfo.path, est importante, car il est possible de l’utiliser comme paramètre pour adobeDataLayer.getState(<component-path>). Elle sert à récupérer l’état actuel du composant qui a déclenché l’événement, ce qui permet au code personnalisé d’accéder à des données supplémentaires et de les ajouter à la couche de données.
Par exemple :
function logEventObject(event) {
if(event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
console.debug("The component that triggered this event: ");
console.log(dataObject);
}
}
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", logEventObject);
});
Tutoriel
Souhaitez-vous explorer plus en détail la couche de données et les composants principaux ? Consultez ce tutoriel pratique.