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 tuo browser e del live Sito di riferimento WKND.

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 il comando adobeDataLayer.getState() di nuovo 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 di cui sopra esamina il event e utilizza adobeDataLayer.getState per ottenere lo stato corrente dell'oggetto che ha attivato l'evento. Il metodo helper ispeziona quindi il filter e solo se dataObject soddisfa il filtro che verrà restituito.

   ATTENZIONE

   È importante not per aggiornare il browser durante questo esercizio, altrimenti la console JavaScript viene persa.

2. Quindi, immetti un gestore eventi chiamato quando un 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);
       }
   }
   

   La teaserShownHandler chiamerà il getDataObjectHelper e passare 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 il cmp:show evento.

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

   La cmp:show l’evento viene attivato da molti componenti diversi, ad esempio quando una nuova diapositiva viene visualizzata nella Carosello o quando viene selezionata una nuova scheda nel Scheda componente.

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 del cmp:show evento:

   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, crea un gestore di eventi che viene 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 il cmp:show evento, 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:

   

   La cmp:show l'evento per la pagina viene attivato a 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 puoi registrare i listener di eventi prima o dopo Livello dati 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. Il Livello dati per impostazione predefinita attiva i callback degli eventi per gli eventi che si sono verificati nel passato nonché gli eventi 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 della pagina e inviarli ad Adobe Analytics.

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

Risorse Business.Adobe.com