Utilizzo di Adobe Client Data Layer con i componenti core AEM overview

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.

NOTE
Abilitare Adobe Client Data Layer nel sito AEM? Consulta le istruzioni.

Esplorare Data Layer

Puoi avere un'idea della funzionalità integrata di Adobe Client Data Layer utilizzando gli strumenti per sviluppatori del browser e il sito di riferimento WKND attivo.

NOTE
Screenshot prese dal browser Chrome.
  1. Passa a https://wknd.site/us/en.html

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

    code language-js
    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.

    Risposta Adobe Data Layer

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

    code language-js
    window.adobeDataLayer.push({
        "component": {
            "training-data": {
                "title": "Learn More",
                "link": "learn-more.html"
            }
        }
    });
    
  4. Eseguire nuovamente il comando adobeDataLayer.getState() e trovare la voce per training-data.

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

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

    Restituire solo una voce di dati di un singolo componente

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:

    code language-js
    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 esamina l'oggetto event e utilizza il metodo adobeDataLayer.getState per ottenere lo stato corrente dell'oggetto che ha attivato l'evento. Il metodo helper esamina filter e solo se l'attuale dataObject soddisfa i criteri di filtro viene restituito.

    note caution
    CAUTION
    È importante not aggiornare il browser durante questo esercizio, altrimenti la console JavaScript andrà persa.
  2. Quindi, immetti un gestore eventi chiamato quando viene visualizzato un componente Teaser in un Carosello.

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

    La funzione teaserShownHandler chiama la funzione getDataObjectHelper e passa un filtro di wknd/components/carousel/item come @type per filtrare gli eventi attivati da altri componenti.

  3. Quindi, invia un listener di eventi sul livello dati per l'ascolto dell'evento cmp:show.

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

    L'evento 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 nel componente Scheda.

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

    Attiva/disattiva carosello e visualizza il listener di eventi

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

    code language-js
    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:

    code language-js
    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 per filtrare l'evento viene utilizzato il tipo di risorsa wknd/components/page.

  8. Quindi, invia un listener di eventi sul livello dati per l'ascolto dell'evento cmp:show, chiamando pageShownHandler.

    code language-js
    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:

    Dati visualizzazione pagina

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

    Una delle caratteristiche esclusive di Adobe Client Data Layer è la possibilità di registrare i listener di eventi prima o dopo l'inizializzazione di Data Layer, in modo da 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 nel passato e per gli eventi nel futuro. È possibile filtrare gli eventi dal passato o dal futuro. Ulteriori informazioni sono disponibili nella documentazione.

Passaggi successivi

Sono disponibili due opzioni per continuare l'apprendimento: la prima consiste nell'estrarre raccogliere i dati della pagina e inviarli all'esercitazione di Adobe Analytics 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 additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d