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

Ejecute el comando adobeDataLayer.getState() de nuevo 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 event y utiliza el adobeDataLayer.getState para obtener el estado actual del objeto que activó el evento. A continuación, el método de ayuda inspecciona el filter y solo si el actual dataObject cumple los criterios de filtro que se devuelven.

A continuación, introduzca un controlador de eventos al que se llame cuando Teaser el componente se muestra dentro de un Carrusel.

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

El teaserShownHandler llama a la función getDataObjectHelper y pasa un filtro de wknd/components/teaser como el @type para filtrar eventos activados por otros componentes.

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

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

El cmp:show se activa por muchos componentes diferentes, como cuando se muestra una nueva diapositiva en la Carrusel o cuando se selecciona una nueva pestaña en la Ficha componente.

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

Para dejar de escuchar el cmp:show evento, elimine 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 para filtrar el evento.

A continuación, inserte un detector de eventos en la capa de datos para detectar el cmp:show evento, 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 cmp:show el evento de la página se activa cada vez que se carga la página en la parte superior de la misma. 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 detectores de eventos antes o después Una vez inicializada la capa de datos, 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 la pasado y eventos en la futuro. Es posible filtrar los eventos del pasado o del futuro. Encontrará más información en la documentación.