DocumentazioneAEMGuida dei Componenti core

Utilizzo di Adobe Client Data Layer con i Componenti core data-layer-core-components

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 Componenti core per l’utilizzo con AEM.

Come i Componenti 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 Data Layer, ma per tutti i dettagli tecnici completi si rimanda alla documentazione su GitHub.

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

Installazione e attivazione installation-activation

A partire dalla versione 2.9.0 dei Componenti core, Data Layer 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 Data Layer attivato per impostazione predefinita.

Per attivare manualmente Data Layer è necessario creare una specifica configurazione in base al contesto:

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

  2. Aggiungi una proprietà booleana denominata enabled e impostala su true.

    Posizione di DataLayerConfig nel sito di riferimento WKND

    Posizione di DataLayerConfig nel sito di riferimento WKND

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

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

    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>

  5. 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 di Data Layer nella pagina corrente:

    code language-javascript 
    window.adobeDataLayer.getState();

Componenti supportati supported-components

I seguenti componenti supportano Data Layer.

Vedi anche eventi attivati dai componenti.

Schemi di dati dei Componenti core data-schemas

Di seguito è riportato un elenco di schemi utilizzati dai Componenti core con Data Layer.

Schema Componente/Contenitore item

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 page

Lo schema Pagina viene utilizzato dal componente seguente:

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 di Data Layer.

Schema Contenitore container

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 image

Lo schema Immagine viene utilizzato dal componente seguente:

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 asset

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

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 events

I Componenti core attivano diversi eventi tramite Data Layer. La best practice per interagire con Data Layer è 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), Data Layer 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 Data Layer 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 Data Layer viene popolato con i Componenti core nella pagina, attiva un evento cmp:loaded.

Eventi attivati dal componente events-components

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
Navigazione lingua
cmp:click
Navigazione
cmp:click
Pagina
cmp:show
Schede
cmp:show e cmp:hide
Teaser
cmp:click

Informazioni sul percorso dell’evento event-path-info

Ogni evento di Data Layer attivato da un Componente core di AEM includerà un carico utile con il seguente oggetto JSON:

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

Dove <component-path> è il percorso JSON del componente in Data Layer 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 a Data Layer.

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 esplorare più dettagliatamente Data Layer e Componenti core? Guarda questa esercitazione pratica.

TIP
Per saperne di più sulla flessibilità di Data Layer, vedi le opzioni di integrazione, tra cui come abilitare Data Layer per i tuoi componenti personalizzati.
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c