Uso de la capa de datos del cliente de Adobe con los componentes principales
El objetivo de la capa de datos del cliente de Adobe es reducir el esfuerzo por instrumentar sitios web mediante un método estandarizado para exponer y acceder a cualquier tipo de datos para cualquier script.
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 ofrece información general sobre cómo los componentes principales interactúan con la capa de datos, pero los detalles técnicos completos se aplazan hasta la documentación de GitHub.
TIPDATA_LAYER_INTEGRATION.md en el repositorio de componentes principales.Instalación y activación
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 de cliente de AEM y no es necesario realizar ninguna instalación. Todos los proyectos generados por el tipo de archivo del proyecto de AEM versión 24+ incluyen una capa de datos activada de forma predeterminada.
Para activar manualmente la capa de datos debe crear una configuración de reconocimiento de contexto para ello:
-
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- Donde cada nodo tiene un
jcr:primaryTypeestablecido ennt:unstructured.
-
Agregue una propiedad boolean llamada
enabledy configúrela entrue.
Ubicación de DataLayerConfig en el sitio de referencia WKND
-
Agregue una propiedad
sling:configRefal nodojcr:contentdel sitio debajo de/content(p. ej./content/<mySite>/jcr:content) y configúrelo en/conf/<mySite>desde el paso anterior. -
Una vez habilitada, puede comprobar la activación cargando una página del sitio fuera del editor, por ejemplo, utilizando la opción Ver como publicado en el editor. Inspeccione el origen de la página y la etiqueta
<body>deben incluir un atributodata-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 para desarrolladores del explorador y el objeto JavaScript
adobeDataLayerdebería estar disponible en la consola. Introduzca el siguiente comando para obtener el estado de la capa de datos de su página actual:window.adobeDataLayer.getState();
Componentes compatibles
Los siguientes componentes son compatibles con la capa de datos.
Consulte también los eventos activados por los componentes.
Esquemas de datos de componentes principales
A continuación se muestra una lista de esquemas que los componentes principales utilizan con la capa de datos.
Esquema de componente/elemento del contenedor
El esquema de componente/elemento de contenedor se utiliza en los siguientes componentes:
El esquema de componente/elemento del 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 de componente/elemento del contenedor:
cmp:click
Esquema de página
El esquema de página se utiliza en el siguiente componente:
El esquema de 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 envía desde JavaScript en línea justo debajo de la etiqueta de apertura <body>, lo que lo convierte en el primer evento de la cola de eventos de la capa de datos.
Esquema del contenedor
Los siguientes componentes utilizan el esquema del contenedor:
El esquema del 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:clickcmp:showcmp:hide
Esquema de imagen
El esquema de imagen se utiliza en el siguiente componente:
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
Esquema de recursos
El esquema de recursos se utiliza dentro del componente de 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
Esquema de fragmento de contenido
El esquema de fragmento de contenido lo utiliza el componente Fragmento de contenido.
El esquema de fragmento de contenido se define de la siguiente manera.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
elements // array of the Content Fragment elements
}
El esquema utilizado para el elemento Fragmento de contenido es el siguiente.
{
xdm:title // title
xdm:text // text
}
Eventos de componentes principales
Hay varios eventos en los que los componentes principales se activan a través de la capa de datos. La práctica recomendada para interactuar con la capa de datos es registrar un detector de eventos y luego realizar una acción según el tipo de evento o el componente que activó el evento. Esto evitará posibles problemas de especie con scripts asincrónicos.
A continuación se muestran los eventos predeterminados ofrecidos por los componentes principales de AEM:
cmp:click: al hacer clic en un elemento activo (un elemento que tiene un atributodata-cmp-clickable), la capa de datos activa un eventocmp:click.cmp:showycmp:hide: la manipulación del acordeón (expandir/contraer), el carrusel (botones de siguiente/anterior) y los componentes de pestañas (selección de pestañas) hace que la capa de datos activecmp:showy se produzca un eventocmp:hide, respectivamente. También se envía un eventocmp:showal cargar la página y se espera que sea el primer evento.cmp:loaded: Cuando se rellene la capa de datos con los componentes principales de la página, la capa de datos activará un eventocmp:loaded.