Documentazione AEM Guida dei Componenti core

Utilizzo di Adobe Client Data Layer con i componenti core

Ultimo aggiornamento: 27 giugno 2025

Creato per:

Sviluppatore
Amministratore

L’obiettivo di Adobe Client Data Layer è semplificare l’organizzazione di siti web fornendo un metodo standardizzato per visualizzare e accedere a qualsiasi tipo di dati per qualsiasi script.

Adobe Client Data Layer è indipendente dalla piattaforma, ma è completamente integrato nei iomponenti core per l’utilizzo con AEM.

Come i iomponenti core, il codice di Adobe Client Data Layer è disponibile su GitHub, insieme alla relativa documentazione per gli sviluppatori. Questo documento fornisce una panoramica dell’interazione dei componenti core con il livellod ati, ma per tutti i dettagli tecnici completi si rimanda alla documentazione su GitHub.

SUGGERIMENTO

Per ulteriori informazioni su Adobe Client Data Layer, vedi le risorse contenuto nel relativo archivio su GitHub.

Per ulteriori dettagli tecnici sull’integrazione di Adobe Client Data Layer con i componenti core, vedi il file DATA_LAYER_INTEGRATION.md nell’archivio dei componenti core.

SUGGERIMENTO

Hai preso in considerazione Edge Delivery Services per AEM?

Puoi continuare a utilizzare i metodi descritti in questo documento per i progetti esistenti. Tuttavia, per i nuovi progetti, Adobe consiglia di sfruttare Edge Delivery Services.

Installazione e attivazione

A partire dalla versione 2.9.0 dei componenti core, il livello dati viene distribuito con i componenti core come libreria client di AEM e non è necessaria alcuna installazione. Tutti i progetti generati da Archetipo progetto AEM v. 24+ includono un livello dati attivato per impostazione predefinita.

Per attivare manualmente il livello dati è necessario creare una specifica configurazione in base al contesto:

Crea la seguente struttura sotto la cartella /conf/<mySite>, dove <mySite> è il nome del progetto del sito:
- /conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
- Dove ogni nodo ha una proprietà jcr:primaryType impostata su nt:unstructured.
Aggiungi una proprietà booleana denominata enabled e impostala su true.

Posizione di DataLayerConfig nel sito di riferimento WKND
Aggiungi una proprietà sling:configRef al nodo jcr:content del sito sotto /content (ad esempio /content/<mySite>/jcr:content) e impostala su /conf/<mySite> come da passaggio precedente.

Una volta abilitata, ne puoi verificare l’attivazione caricando una pagina del sito fuori dall’editor, ad esempio utilizzando l’opzione Visualizza come pubblicato nell’editor. Verifica che la sorgente della pagina e il tag <body> includano un attributo data-cmp-data-layer-enabled

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

Puoi anche aprire gli strumenti di sviluppo del browser e nella console dovrebbe essere disponibile l’oggetto JavaScript adobeDataLayer. Immetti il seguente comando per ottenere lo stato del livello dati nella pagina corrente:
window.adobeDataLayer.getState();

Componenti supportati

I seguenti componenti supportano il livello dati.

Vedi anche eventi attivati dai componenti.

Schemi di dati dei Componenti core

Di seguito è riportato un elenco di schemi utilizzati dai componenti core con il livello dati.

Schema Componente/Contenitore

Lo schema Componente/Contenitore viene utilizzato nei seguenti componenti:

Lo schema Componente/Contenitore è definito come segue.

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
}

Il seguente evento è pertinente allo schema Componente/Contenitore:

cmp:click

Schema Pagina

Lo schema Pagina viene utilizzato dal componente seguente:

Pagina

Lo schema Pagina è definito come segue.

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 evento cmp:show viene attivato al caricamento della pagina. Questo evento viene inviato da JavaScript in linea immediatamente sotto il tag di apertura <body>, rendendolo il primo evento nella coda eventi del livello dati.

Schema Contenitore

Lo schema Contenitore viene utilizzato dai seguenti componenti:

Lo schema Contenitore è definito come segue.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    shownItems          // array of the displayed item IDs
}

I seguenti eventi sono pertinenti allo schema Contenitore:

cmp:click
cmp:show
cmp:hide

Schema Immagine

Lo schema Immagine viene utilizzato dal componente seguente:

Immagine

Lo schema Immagine è definito come segue.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    image               // asset detail (see below section)
}

Il seguente evento è pertinente allo schema Immagine:

cmp:click

Schema Risorsa

Lo schema Risorsa viene utilizzato all’interno del componente Immagine.

Lo schema Risorsa è definito come segue.

id: {
    repo:id             // asset UUID
    repo:path           // asset path
    @type               // asset resource type
    xdm:tags            // asset tags
    repo:modifyDate
}

Il seguente evento è pertinente allo schema Risorsa:

cmp:click

Schema Frammento di contenuto

Lo schema Frammento di contenuto viene utilizzato dal componente Frammento di contenuto.

Lo schema Frammento di contenuto è definito come segue.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    elements            // array of the Content Fragment elements
}

Lo schema utilizzato per l’elemento Frammento di contenuto è il seguente.

{
    xdm:title           // title
    xdm:text            // text
}

Eventi dei Componenti core

I componenti core attivano diversi eventi tramite il livello dati. La best practice per interagire con il livello dati è registrare un listener di eventi, quindi eseguire un’azione in base al tipo di evento e/o al componente che ha attivato l’evento. In questo modo, si evitano potenziali condizioni di contesa con script asincroni.

Di seguito sono riportati gli eventi predefiniti forniti dai Componenti core di AEM:

cmp:click - Facendo clic su un elemento cliccabile (un elemento che ha l’attributo data-cmp-clickable), il livello dati attiva un evento cmp:click.
cmp:show e cmp:hide - La manipolazione di Pannello a soffietto (espandi/comprimi), Carosello (pulsanti avanti/indietro) e Schede (selezione scheda) induce il livello dati ad attivare gli eventi cmp:show e cmp:hide, rispettivamente. Al caricamento della pagina, viene inviato anche un evento cmp:show, che deve essere il primo evento.
cmp:loaded - Non appena il livello dati viene popolato con i componenti core nella pagina, attiva un evento cmp:loaded.

Eventi attivati dal componente

Le tabelle che seguono riportano i Componenti core standard che attivano altri eventi insieme a quelli indicati sopra.

Componente

Evento o eventi

Pannello a soffietto

cmp:show e cmp:hide

Pulsante

cmp:click

Breadcrumb

cmp:click

Carosello

cmp:show e cmp:hide

cmp:click

cmp:click

cmp:show

cmp:show e cmp:hide

Teaser

cmp:click

Informazioni sul percorso dell’evento

Ogni evento del livello dati attivato da un Componente core di AEM includerà un payload con il seguente oggetto JSON:

eventInfo: {
    path: '<component-path>'
}

Dove <component-path> è il percorso JSON del componente nel livello dati che ha attivato l’evento. Il valore, disponibile tramite event.eventInfo.path, è importante in quanto può essere utilizzato come parametro per adobeDataLayer.getState(<component-path>) che recupera lo stato corrente del componente che ha attivato l’evento, consentendo al codice personalizzato di accedere a dati aggiuntivi e aggiungerli al livello dati.

Esempio:

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);
});

Esercitazione

Vuoi saperne di più sul livello dati e i componenti core? Guarda questa esercitazione pratica.

TIP

Per saperne di più sulla flessibilità del livello dati, vedi le opzioni di integrazione, tra cui come abilitare il livello dati per i tuoi componenti personalizzati.

recommendation-more-help