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.

CONSEJO

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.

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 AEM y no es necesario realizar ninguna instalación. Todos los proyectos generados por el AEM tipo de archivo del proyecto v. 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 ella:

  1. 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:primaryType establecido en nt:unstructured.

  2. Agregue una propiedad booleana llamada enabled y configúrela en true.

    Ubicación de DataLayerConfig en el sitio de referencia WKND

    Ubicación de DataLayerConfig en el sitio de referencia WKND

  3. Agregue una propiedad sling:configRef al nodo jcr:content del sitio debajo de /content (p. ej. /content/<mySite>/jcr:content) y configúrelo en /conf/<mySite> desde el paso anterior.

  4. Una vez habilitada, puede verificar la activación cargando una página del sitio fuera del editor, por ejemplo, utilizando la opción Ver como publicado en el 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>

  5. También puede abrir las herramientas para desarrolladores del explorador y, en la consola, el objeto JavaScript adobeDataLayer debería estar disponible. Introduzca el siguiente comando para obtener el estado de la capa de datos de su página actual:

    window.adobeDataLayer.getState();

Componentes admitidos

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 elemento de componente/contenedor

El esquema Componente/Elemento de contenedor se utiliza en los siguientes componentes:

El esquema Componente/Elemento 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 elemento componente/contenedor:

  • cmp:click

Esquema de página

El esquema de página se utiliza en el siguiente componente:

El esquema Page 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 <body> de apertura, lo que lo convierte en el primer evento de la cola de eventos de la capa de datos.

Esquema de contenedor

Los siguientes componentes utilizan el esquema de contenedor :

El esquema Container 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

Esquema de imagen

El esquema Image se utiliza en el siguiente componente:

El esquema Image 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 Asset se utiliza dentro del componente Image.

El esquema de Asset 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 déclencheur 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 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 se déclencheur en un cmp:click evento.
  • cmp:show y cmp:hide : la manipulación del acordeón (expandir/contraer), el carrusel (botones siguientes/anteriores) y los componentes de pestañas (selección de tabulaciones) hace que la capa de datos se déclencheur cmp:show y se produzca 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 en la página, la capa de datos déclencheur un cmp:loaded evento.

Eventos activados por el componente

En las tablas siguientes se enumeran los componentes principales estándar que generan déclencheur en eventos junto con esos eventos.

Componente Evento(s)
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

Información de ruta de evento

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 a través de 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, lo que permite que el código personalizado acceda a datos adicionales y los añada 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);
});

Tutorial

¿Quiere explorar la capa de datos y los componentes principales con más detalle? Consulte este tutorial práctico.

CONSEJO

Para explorar más en profundidad la flexibilidad de la capa de datos, revise las opciones de integración, incluido cómo habilitar la capa de datos para los componentes personalizados.

En esta página

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now