Utilizzo di Adobe Client Data Layer con AEM componenti core

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

Esplorare il livello dati

Puoi ottenere un'idea delle funzionalità integrate di Adobe Client Data Layer solo utilizzando gli strumenti per sviluppatori del browser e il sito di riferimento WKND live.

1. Passa a https://wknd.site

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

   window.adobeDataLayer.getState();
   

   Inspect la risposta per visualizzare lo stato corrente del livello di dati su un sito AEM. Dovresti visualizzare informazioni sulla pagina e sui singoli componenti.

   

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

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

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

5. Quindi aggiungi un parametro di 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 eventi diversi.

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 riportato sopra controllerà l'oggetto event e utilizzerà il metodo adobeDataLayer.getState per ottenere lo stato corrente dell'oggetto che ha attivato l'evento. Il metodo helper esaminerà quindi i criteri filter e verrà restituito solo se l'elemento dataObject corrente soddisfa il filtro.

   ATTENZIONE

   Sarà importante non aggiornare il browser durante questo esercizio, altrimenti il JavaScript della console verrà perso.

2. Quindi, immetti un gestore eventi che verrà chiamato quando un componente Teaser viene 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 chiamerà il metodo getDataObjectHelper e trasmetterà 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 l'evento cmp:show.

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

   L’evento cmp:show viene attivato da molti componenti diversi, ad esempio quando una nuova diapositiva viene visualizzata nel componente Carosello o quando è selezionata una nuova scheda nel componente Tab .

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

   

5. Rimuovi il listener di eventi dal livello dati per interrompere l'ascolto dell'evento cmp:show:

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

6. Torna alla pagina e attiva le diapositive del carosello. Osserva che non vengono più registrate istruzioni e che l’evento non viene ascoltato.

7. Quindi, immetti un gestore di eventi che verrà chiamato quando l'evento di visualizzazione della pagina viene attivato:

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

   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 l'evento cmp:show, chiamando pageShownHandler.

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

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

   

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

   Questa è una delle caratteristiche uniche di Adobe Client Data Layer, in quanto è possibile registrare listener di eventi prima o dopo che il livello dati è stato inizializzato. Questa è una caratteristica fondamentale per evitare le condizioni di razza.

   Il livello dati mantiene una matrice di coda di tutti gli eventi che si sono verificati in sequenza. Per impostazione predefinita, il Livello dati attiva i callback degli eventi per gli eventi che si sono verificati in passato e per gli eventi in futuro. È possibile filtrare gli eventi solo in passato o in futuro. Ulteriori informazioni sono disponibili nella documentazione.

Passaggi successivi

Consulta la seguente esercitazione per scoprire come utilizzare il livello dati client Adobe basato su eventi per raccogliere i dati di pagina e inviarli ad Adobe Analytics.

Oppure scopri 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 Core Components