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

La capa de datos del cliente de Adobe presenta un método estándar para recopilar y almacenar datos sobre una experiencia de visitante en una página web y, a continuación, facilitar el acceso a estos datos. 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.

Explorar la capa de datos

Puede hacerse una idea de la funcionalidad integrada de la capa de datos del cliente de Adobe con las herramientas para desarrolladores del navegador y de la lista de Sitio de referencia WKND.

1. Vaya a https://wknd.site

2. Abra las herramientas para desarrolladores e introduzca el siguiente comando en la sección Consola:

   window.adobeDataLayer.getState();
   

   Inspect proporciona la respuesta para ver el estado actual de la capa de datos en un sitio AEM. Debería ver información sobre la página y los componentes individuales.

   

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

4. Ejecutar el comando adobeDataLayer.getState() y busque la entrada para training-data.

5. 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');
   

   

Uso de eventos

Se recomienda almacenar en déclencheur cualquier código personalizado basado en un evento de la capa de datos. A continuación, explore la posibilidad de registrar y escuchar diferentes eventos.

1. 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 inspeccionará la variable event y utilice la variable adobeDataLayer.getState para obtener el estado actual del objeto que activó el evento. El método de ayuda inspeccionará entonces la variable filter y solo si la variable dataObject cumple con el filtro que se devolverá.

   PRECAUCIÓN

   Es importante not para actualizar el explorador a lo largo de este ejercicio, de lo contrario se pierde el JavaScript de la consola.

2. A continuación, introduzca un controlador de eventos al que se llama cuando se Teaser 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);
       }
   }
   

   La variable teaserShownHandler llamará a la función getDataObjectHelper y pasar un filtro de wknd/components/teaser como el @type para filtrar eventos activados por otros componentes.

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

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

   La variable cmp:show se activa mediante distintos componentes, como cuando se muestra una nueva diapositiva en la variable Carrusel o cuando se selecciona una pestaña nueva en la Tabulación componente.

4. En la página , cambie las diapositivas de carrusel y observe las instrucciones de la consola:

   

5. Elimine el detector de eventos de la capa de datos para dejar de escuchar el evento cmp:show evento:

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

6. Vuelva a la página y active las diapositivas de carrusel. Observe que no se registran más instrucciones y que el evento no se está escuchando.

7. A continuación, cree un controlador de eventos al que se llame cuando se active el evento que se muestra en la página:

   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 utiliza para filtrar el evento.

8. A continuación, inserte un detector de eventos en la capa de datos para detectar la cmp:show , llamando a la función pageShownHandler.

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

9. Debería ver inmediatamente una sentencia de consola activada con los datos de página:

   

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

   Esta es una de las características únicas de la capa de datos del cliente de Adobe, en la que puede registrar oyentes de eventos before o after se ha inicializado la capa de datos. Se trata de una característica esencial para evitar condiciones de carrera.

   La capa de datos mantiene una matriz de cola de todos los eventos que se han producido en secuencia. De forma predeterminada, la capa de datos déclencheur las llamadas de retorno de eventos para los eventos que se produjeron en la variable pasado así como los eventos en la variable futuro. Es posible filtrar los eventos al pasado o al futuro. Encontrará más información en la documentación.

Siguientes pasos

Consulte el siguiente tutorial para aprender a utilizar la capa de datos del cliente de Adobe impulsada por eventos para recopilar datos de página y enviarlos a Adobe Analytics.

O aprenda a Personalización de la capa de datos del cliente de Adobe con componentes AEM

Recursos adicionales

• Documentación de capa de datos del cliente de Adobe
• Uso de la capa de datos del cliente de Adobe y la documentación de componentes principales

Recursos de Business.Adobe.com