El objetivo de la capa de datos del cliente de Adobe es reducir el esfuerzo de instrumentar sitios web proporcionando un método estandarizado para exponer y acceder a cualquier tipo de datos para cualquier secuencia de comandos.
La capa de datos del cliente de Adobe no depende de la plataforma, pero está completamente integrada en los componentes principales para su uso con AEM.
Al igual que los componentes principales, el código de la capa de datos del cliente de Adobe está disponible en GitHub junto con la documentación para desarrolladores. Este documento proporciona una visión general de cómo interactúan los componentes principales con la capa de datos, pero los detalles técnicos completos se posponen a la documentación de GitHub.
Para obtener más información sobre la capa de datos del cliente de Adobe, consulte los recursos de su repositorio de GitHub.
Para obtener más información técnica sobre la integración de la capa de datos del cliente de Adobe con los componentes principales, consulte el archivo DATA_LAYER_INTEGRATION.md
en el repositorio de componentes principales.
A partir de la versión 2.9.0 de los componentes principales, la capa de datos se distribuye con los componentes principales como una biblioteca del cliente AEM y no es necesaria ninguna instalación. Todos los proyectos generados por AEM Project Archetype v. 24+ incluyen una capa de datos activada de forma predeterminada.
Para activar manualmente la capa de datos debe crear una configuración contextual para ella:
Cree la siguiente estructura debajo de la carpeta /conf/<mySite>
, donde <mySite>
es el nombre del proyecto del sitio:
/conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
jcr:primaryType
establecido en nt:unstructured
.Añada una propiedad booleana llamada enabled
y configúrela en true
.
Ubicación de DataLayerConfig en el sitio de referencia WKND
Añada una propiedad sling:configRef
en el nodo jcr:content
de su sitio debajo de /content
(por ejemplo: /content/<mySite>/jcr:content
) y establézcalo en /conf/<mySite>
desde el paso anterior.
Una vez habilitada, puede comprobar la activación cargando una página del sitio fuera del editor. Inspect el origen de la página y la etiqueta <body>
deben incluir un atributo data-cmp-data-layer-enabled
<body class="page basicpage" id="page-id" data-cmp-data-layer-enabled>
<script>
window.adobeDataLayer = window.adobeDataLayer || [];
adobeDataLayer.push({
page: JSON.parse("{\x22page\u002D6c5d4b9fdd\x22:{\x22xdm:language\x22:\x22en\x22,\x22repo:path\x22:\x22\/content\/wknd\/language\u002Dmasters\/en.html\x22,\x22xdm:tags\x22:[],\x22xdm:template\x22:\x22\/conf\/wknd\/settings\/wcm\/templates\/landing\u002Dpage\u002Dtemplate\x22,\x22@type\x22:\x22wknd\/components\/page\x22,\x22dc:description\x22:\x22WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.\x22,\x22dc:title\x22:\x22WKND Adventures and Travel\x22,\x22repo:modifyDate\x22:\x222020\u002D09\u002D29T07:50:13Z\x22}}"),
event:'cmp:show',
eventInfo: {
path: 'page.page\u002D6c5d4b9fdd'
}
});
</script>
También puede abrir las herramientas de desarrollador del explorador y, en la consola, el objeto adobeDataLayer
JavaScript debería estar disponible. Introduzca el siguiente comando para obtener el estado de la capa de datos de la página actual:
window.adobeDataLayer.getState();
A continuación se muestra una lista de esquemas que los componentes principales utilizan con la capa de datos.
El esquema Componente/Elemento de Contenedor se utiliza en los siguientes componentes:
El esquema Componente/Elemento de Contenedor se define de la siguiente manera.
id: { // component ID
@type // resource type
repo:modifyDate // last modified date
dc:title // title
dc:description // description
xdm:text // text
xdm:linkURL // link URL
parentId // parent component ID
}
El siguiente evento es relevante para el esquema del componente/elemento de Contenedor:
cmp:click
El siguiente componente utiliza el esquema Página:
El esquema Página se define de la siguiente manera.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
xdm:tags // page tags
repo:path // page path
xdm:template // page template
xdm:language // page language
}
Un evento cmp:show
se activa al cargar la página. Este evento se distribuye desde JavaScript en línea justo debajo de la etiqueta <body>
de apertura, lo que lo convierte en el evento más antiguo de la cola de eventos de capa de datos.
Los siguientes componentes utilizan el esquema de Contenedor:
El esquema de Contenedor se define de la siguiente manera.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
shownItems // array of the displayed item IDs
}
Los siguientes eventos son relevantes para el esquema del Contenedor:
cmp:click
cmp:show
cmp:hide
El siguiente componente utiliza el esquema de imagen:
El esquema de imagen se define de la siguiente manera.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
image // asset detail (see below section)
}
El siguiente evento es relevante para el esquema de imagen:
cmp:click
El esquema de recursos se utiliza dentro del componente Imagen.
El esquema de recursos se define de la siguiente manera.
id: {
repo:id // asset UUID
repo:path // asset path
@type // asset resource type
xdm:tags // asset tags
repo:modifyDate
}
El siguiente evento es relevante para el esquema de recursos:
cmp:click
Hay varios eventos que activan los componentes principales mediante la capa de datos. La mejor manera de interactuar con la capa de datos es registrar un detector de evento y luego realizar una acción basada en el tipo de evento y/o componente que activó el evento. Esto evitará posibles condiciones de carrera con scripts asincrónicos.
A continuación se muestran los eventos predeterminados proporcionados por AEM componentes principales:
cmp:click
- Al hacer clic en un elemento en el que se puede hacer clic (un elemento que tiene un data-cmp-clickable
atributo), la capa de datos activa un cmp:click
evento.cmp:show
y cmp:hide
- Manipular el acordeón (expandir/contraer), el carrusel (botones siguiente/anterior) y los componentes de fichas (selección de fichas) hace que la capa de datos se active cmp:show
y un cmp:hide
evento respectivamente. También se envía un evento cmp:show
al cargar la página y se espera que sea el primer evento.cmp:loaded
- Tan pronto como se rellena la capa de datos con los componentes principales de la página, la capa de datos activa un cmp:loaded
evento.Las siguientes tablas lista los componentes principales estándar que activan eventos junto con esos eventos.
Componente | Eventos |
---|---|
Acordeón | cmp:show y cmp:hide |
Botón | cmp:click |
Ruta de navegación | cmp:click |
Carrusel | cmp:show y cmp:hide |
Navegación por idiomas | cmp:click |
Navegación | cmp:click |
Página | cmp:show |
Pestañas | cmp:show y cmp:hide |
Teaser | cmp:click |
Cada evento de capa de datos activado por un componente principal de AEM incluirá una carga útil con el siguiente objeto JSON:
eventInfo: {
path: '<component-path>'
}
Donde <component-path>
es la ruta JSON al componente en la capa de datos que activó el evento. El valor, disponible mediante event.eventInfo.path
, es importante ya que se puede utilizar como parámetro de adobeDataLayer.getState(<component-path>)
, que recupera el estado actual del componente que activó el evento, permitiendo que el código personalizado acceda a datos adicionales y los agregue a la capa de datos.
Por ejemplo:
function logEventObject(event) {
if(event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
console.debug("The component that triggered this event: ");
console.log(dataObject);
}
}
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", logEventObject);
});
¿Desea explorar la capa de datos y los componentes principales con más detalle? Consulte este tutorial práctico.
Para explorar más a fondo la flexibilidad de la capa de datos, consulte las opciones de integración, incluida la forma de habilitar la capa de datos para los componentes personalizados.