Uso de la capa de datos del cliente de Adobe AEM con los componentes principales de overview

Vaya a https://wknd.site/us/en.html

Abra las herramientas para desarrolladores e introduzca el siguiente comando en la consola:

window.adobeDataLayer.getState();

AEM Para ver el estado actual de la capa de datos en un sitio de datos, compruebe la respuesta de un sitio de datos en el que se haya realizado una inspección. Debería ver información sobre la página y los componentes individuales.

Inserte un objeto de datos en la capa de datos introduciendo lo siguiente en la consola:

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

Vuelva a ejecutar el comando adobeDataLayer.getState() y busque la entrada para training-data.

A continuación, añada un parámetro de ruta para devolver solo el estado específico de un componente:

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

Introduzca el siguiente método de ayuda en la consola:

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;
}

El código anterior inspecciona el objeto event y utiliza el método adobeDataLayer.getState para obtener el estado actual del objeto que activó el evento. Entonces, el método auxiliar inspecciona filter y solo si el dataObject actual cumple los criterios de filtro que se devuelve.

A continuación, escriba un controlador de eventos al que se llame cuando se muestre un componente Teaser en un Carrusel.

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 función teaserShownHandler llama a la función getDataObjectHelper y pasa un filtro de wknd/components/carousel/item como @type para filtrar los eventos activados por otros componentes.

A continuación, inserte un detector de eventos en la capa de datos para detectar el evento cmp:show.

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

El evento cmp:show se activa mediante muchos componentes diferentes, como cuando se muestra una nueva diapositiva en el Carrusel o cuando se selecciona una nueva pestaña en el componente Tab.

En la página, alterne las diapositivas del carrusel y observe las instrucciones de la consola:

Para dejar de escuchar el evento cmp:show, quite el detector de eventos de la capa de datos

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

Vuelva a la página y cambie las diapositivas del carrusel. Observe que no se registran más instrucciones y que el evento no se escucha.

A continuación, cree un controlador de eventos al que se llame cuando se active el evento Página mostrada:

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

Observe que el tipo de recurso wknd/components/page se usa para filtrar el evento.

A continuación, inserte un detector de eventos en la capa de datos para escuchar el evento cmp:show y llamar a pageShownHandler.

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

Debería ver inmediatamente una instrucción de consola activada con los datos de la página:

El evento cmp:show de la página se activa en cada carga de página en la parte superior de la página. Podría preguntar, ¿por qué se activó el controlador de eventos cuando claramente la página ya se ha cargado?

Una de las características únicas de la capa de datos del cliente de Adobe es que puede registrar los detectores de eventos antes o después de que la capa de datos se haya inicializado, lo que ayuda a evitar las condiciones de carrera.

La capa de datos mantiene una matriz de colas de todos los eventos que se han producido en secuencia. La capa de datos almacenará en déclencheur de forma predeterminada las llamadas de retorno de eventos para los eventos que se produjeron en el último y los eventos en el futuro. Es posible filtrar los eventos del pasado o del futuro. Encontrará más información en la documentación.