Utilizzo di Adobe Client Data Layer con i componenti core AEM

Adobe Client Data Layer introduce un metodo standard per raccogliere e memorizzare i dati sull’esperienza di un visitatore in una pagina web e semplifica l’accesso a tali dati. Adobe Client Data Layer è indipendente dalla piattaforma, ma è completamente integrato nei Componenti core per l’utilizzo con AEM.

Esplorare Data Layer

Puoi avere un’idea della funzionalità integrata di Adobe Client Data Layer semplicemente utilizzando gli strumenti per sviluppatori del browser e la versione live Sito di riferimento WKND.

1. Accedi a https://wknd.site/us/en.html

2. Apri gli strumenti per sviluppatori e immetti il comando seguente nel Console:

   window.adobeDataLayer.getState();
   

   Per visualizzare lo stato corrente del livello dati su un sito AEM, controlla la risposta. Dovresti visualizzare informazioni sulla pagina e sui singoli componenti.

   

3. Invia un oggetto dati al livello dati immettendo quanto segue nella console:

   window.adobeDataLayer.push({
       "component": {
           "training-data": {
               "title": "Learn More",
               "link": "learn-more.html"
           }
       }
   });
   

4. Esegui il comando adobeDataLayer.getState() e trova la voce per training-data.

5. Quindi aggiungi un parametro percorso per restituire solo lo stato specifico di un componente:

   window.adobeDataLayer.getState('component.training-data');
   

   

Utilizzo degli eventi

È consigliabile attivare qualsiasi codice personalizzato basato su un evento dal livello dati. Quindi, esplora la registrazione e l’ascolto di diversi eventi.

1. Immetti il seguente metodo helper nella console:

   function getDataObjectHelper(event, filter) {
       if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
           var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
           if (dataObject != null) {
               for (var property in filter) {
                   if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                       return;
                   }
                   return dataObject;
               }
           }
       }
       return;
   }
   

   Il codice di cui sopra esamina event e utilizza adobeDataLayer.getState per ottenere lo stato corrente dell'oggetto che ha attivato l'evento. Quindi il metodo helper controlla filter e solo se l'attuale dataObject soddisfa i criteri di filtro restituiti.

   ATTENZIONE

   È importante non per aggiornare il browser durante questo esercizio, altrimenti il JavaScript della console andrà perso.

2. Quindi, immetti un gestore eventi chiamato quando un Teaser componente è visualizzato all'interno di un Carosello.

   function teaserShownHandler(event) {
       var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/teaser"});
       if(dataObject != null) {
           console.log("Teaser Shown: " + dataObject['dc:title']);
           console.log(dataObject);
       }
   }
   

   Il teaserShownHandler la funzione chiama il getDataObjectHelper e trasmette un filtro di wknd/components/teaser come @type per filtrare gli eventi attivati da altri componenti.

3. Quindi, invia un listener di eventi sul livello dati per ascoltare cmp:show evento.

   window.adobeDataLayer.push(function (dl) {
        dl.addEventListener("cmp:show", teaserShownHandler);
   });
   

   Il cmp:show viene attivato da molti componenti diversi, ad esempio quando viene visualizzata una nuova diapositiva nel Carosello o quando viene selezionata una nuova scheda in Linguetta componente.

4. Sulla pagina, attiva le diapositive del carosello e osserva le istruzioni della console:

   

5. Per interrompere l'ascolto di cmp:show rimuovere il listener di eventi dal livello dati

   window.adobeDataLayer = window.adobeDataLayer || [];
   window.adobeDataLayer.push(function(dl) {
       dl.removeEventListener("cmp:show", teaserShownHandler);
   });
   

6. Torna alla pagina e commuta le diapositive del carosello. Tieni presente che non vengono registrate altre istruzioni e che l’evento non viene ascoltato.

7. Quindi, crea un gestore eventi chiamato quando viene attivato l'evento di visualizzazione della pagina:

   function pageShownHandler(event) {
       var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
       if(dataObject != null) {
           console.log("Page Shown: " + dataObject['dc:title']);
           console.log(dataObject);
       }
   }
   

   Tieni presente che il tipo di risorsa wknd/components/page viene utilizzato per filtrare l’evento.

8. Quindi, invia un listener di eventi sul livello dati per ascoltare cmp:show evento, chiamando pageShownHandler.

   window.adobeDataLayer = window.adobeDataLayer || [];
   window.adobeDataLayer.push(function (dl) {
        dl.addEventListener("cmp:show", pageShownHandler);
   });
   

9. Dovresti vedere immediatamente un’istruzione della console attivata con i dati della pagina:

   

   Il cmp:show per la pagina viene attivato al caricamento di ogni pagina nella parte superiore della pagina. Potresti chiedere, perché è stato attivato il gestore eventi, quando la pagina è già stata chiaramente caricata?

   Una delle funzionalità esclusive di Adobe Client Data Layer è la possibilità di registrare i listener di eventi prima di o dopo Data Layer è stato inizializzato, aiuta ad evitare le race condition.

   Data Layer mantiene una matrice di coda di tutti gli eventi che si sono verificati in sequenza. Per impostazione predefinita, Data Layer attiva i callback di eventi per gli eventi che si sono verificati in passato ed eventi in futuro. È possibile filtrare gli eventi dal passato o dal futuro. Per ulteriori informazioni consulta la documentazione.

Passaggi successivi

Ci sono due opzioni per continuare l’apprendimento, la prima, controlla il raccogliere i dati della pagina e inviarli ad Adobe Analytics tutorial che illustra l’utilizzo di Adobe Client Data Layer. La seconda opzione consiste nell'apprendere come Personalizzare Adobe Client Data Layer con i componenti AEM

Risorse aggiuntive

• Documentazione di Adobe Client Data Layer
• Utilizzo della documentazione di Adobe Client Data Layer e Componenti core