Recopilación de datos de página con Adobe Analytics

Aprenda a utilizar las funciones integradas de la capa de datos del cliente de Adobe con AEM componentes principales para recopilar datos sobre una página en Adobe Experience Manager Sites. Experience Platform Launch y la extensión de Adobe Analytics se utilizarán para crear reglas para enviar datos de página a Adobe Analytics. 🔗

Qué va a generar

En este tutorial, debe almacenar en déclencheur una regla de Launch basada en un evento de la capa de datos del cliente de Adobe, agregar condiciones para cuándo se debe activar la regla y enviar el Nombre de página y Plantilla de página de una página de AEM a Adobe Analytics.

Objetivos

1. Cree una regla basada en eventos en Launch en función de los cambios realizados en la capa de datos
2. Asignación de propiedades de capa de datos de página a elementos de datos en Launch
3. Recopilar datos de página y enviarlos a Adobe Analytics con la señalización de vista de página

Requisitos previos

Se requieren las siguientes opciones:

• Propiedad Launch del Experience Platform
• ID del grupo de informes y servidor de seguimiento de Adobe Analytics/dev. Consulte la siguiente documentación para crear un nuevo grupo de informes.
• Experience Platform Debugger . Capturas de pantalla de este tutorial tomadas del navegador Chrome.
• (Opcional) AEM sitio con el Adobe Client Data Layer habilitado. Este tutorial utilizará el sitio público https://wknd.site/us/en.html, pero le recomendamos que utilice su propio sitio.

Cambiar entornos de Launch para el sitio WKND

https://wknd. es un sitio público creado sobre la base de un proyecto de código abierto diseñado como referencia y 🔗 tutorial para implementaciones de AEM.

En lugar de configurar un entorno AEM e instalar la base de código WKND, puede utilizar el depurador de Experience Platform para cambiar en https://wknd.site/ activo a su propiedad de Launch. Por supuesto, puede usar su propio sitio AEM si ya tiene Adobe Client Data Layer habilitado

1. Inicie sesión en el Experience Platform Launch y cree una propiedad de Launch (si aún no lo ha hecho).

2. Asegúrese de que se ha creado🔗 una biblioteca de Launch inicial y se ha promocionado a un entorno de Launch.

3. Copie el código de incrustación de Launch del entorno en el que se ha publicado la biblioteca.

   

4. En el explorador, abra una pestaña nueva y vaya a https://wknd.site/

5. Abra la extensión del explorador de Experience Platform Debugger .

   

6. Vaya a Launch > Configuration y en Injected Embed Codes reemplace el código de incrustación de Launch existente por su código de incrustación copiado del paso 3.

   

7. Habilite Console Logging y Lock el depurador en la pestaña WKND.

   

Comprobar la capa de datos del cliente de Adobe en el sitio WKND

El proyecto de referencia WKND se ha creado con AEM componentes principales y tiene Adobe Client Data Layer habilitado de forma predeterminada. A continuación, compruebe que la capa de datos del cliente de Adobe esté habilitada.

1. Vaya a https://wknd.site.

2. Abra las herramientas para desarrolladores del explorador y vaya a la Consola. Ejecute el siguiente comando:

   adobeDataLayer.getState();
   

   Esto devuelve el estado actual de la capa de datos del cliente de Adobe.

   

3. Expanda la respuesta e inspeccione la entrada page. Debería ver un esquema de datos como el siguiente:

   page-2eee4f8914:
       @type: "wknd/components/page"
       dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
       dc:title: "WKND Adventures and Travel"
       repo:modifyDate: "2020-08-31T21:02:21Z"
       repo:path: "/content/wknd/us/en.html"
       xdm:language: "en-US"
       xdm:tags: ["Attract"]
       xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"
   

   Para enviar datos de página a Adobe Analytics se utilizan propiedades estándar derivadas del Page schema, dc:title, xdm:language y xdm:template de la capa de datos.

   NOTA

   ¿No ve el objeto adobeDataLayer javascript? Asegúrese de que la capa de datos del cliente de Adobe esté habilitada en el sitio.

Crear una regla de página cargada

La capa de datos del cliente de Adobe es una capa de datos controlada por evento. Cuando se carga la capa de datos AEM Page, se déclencheur un evento cmp:show. Cree una regla que se active según el evento cmp:show .

1. Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.

2. Vaya a la sección Rules de la interfaz de usuario de Launch y, a continuación, haga clic en Crear nueva regla.

   

3. Asigne a la regla el nombre Página cargada.

4. Haga clic en Events Add para abrir el asistente Event Configuration.

5. En Tipo de evento seleccione Código personalizado.

   

6. Haga clic en Abrir editor en el panel principal e introduzca el siguiente fragmento de código:

   var pageShownEventHandler = function(evt) {
      // defensive coding to avoid a null pointer exception
      if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
         //trigger Launch Rule and pass event
         console.debug("cmp:show event: " + evt.eventInfo.path);
         var event = {
            //include the path of the component that triggered the event
            path: evt.eventInfo.path,
            //get the state of the component that triggered the event
            component: window.adobeDataLayer.getState(evt.eventInfo.path)
         };
   
         //Trigger the Launch Rule, passing in the new `event` object
         // the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
         // i.e `event.component['someKey']`
         trigger(event);
      }
   }
   
   //set the namespace to avoid a potential race condition
   window.adobeDataLayer = window.adobeDataLayer || [];
   //push the event listener for cmp:show into the data layer
   window.adobeDataLayer.push(function (dl) {
      //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
      dl.addEventListener("cmp:show", pageShownEventHandler);
   });
   

   El fragmento de código anterior agregará un detector de eventos insertando una función en la capa de datos. Cuando se activa el evento cmp:show, se llama a la función pageShownEventHandler . En esta función se añaden algunas comprobaciones de coherencia y se crea un nuevo event con el estado más reciente de la capa de datos para el componente que activó el evento.

   Después de llamar a trigger(event). trigger() es un nombre reservado en Launch y “déclencheur” de la regla de Launch. Pasamos el objeto event como parámetro que, a su vez, se expone con otro nombre reservado en Launch denominado event. Los elementos de datos de Launch ahora pueden hacer referencia a varias propiedades como esta: event.component['someKey'].

7. Guarde los cambios.

8. A continuación, en Actions, haga clic en Add para abrir el asistente Action Configuration.

9. En Tipo de acción, elija Código personalizado.

   

10. Haga clic en Abrir editor en el panel principal e introduzca el siguiente fragmento de código:

    console.debug("Page Loaded ");
    console.debug("Page name: " + event.component['dc:title']);
    console.debug("Page type: " + event.component['@type']);
    console.debug("Page template: " + event.component['xdm:template']);
    

    El objeto event se pasa desde el método trigger() llamado en el evento personalizado. component es la página actual derivada de la capa de datos getState en el evento personalizado. Recuerde desde antes el Page schema expuesto por la capa de datos para ver las distintas claves expuestas fuera del cuadro.

11. Guarde los cambios y ejecute una compilación en Launch para promocionar el código al entorno utilizado en el sitio AEM.

    NOTA

    Puede resultar muy útil utilizar el Adobe Experience Platform Debugger para cambiar el código incrustado a un entorno Development.

12. Vaya a su sitio AEM y abra las herramientas para desarrolladores para ver la consola. Actualice la página y verá que se han registrado los mensajes de la consola:

    

Crear elementos de datos

A continuación, cree varios elementos de datos para capturar valores diferentes de la capa de datos del cliente de Adobe. Como se ha visto en el ejercicio anterior, hemos visto que es posible acceder a las propiedades de la capa de datos directamente a través del código personalizado. La ventaja de utilizar elementos de datos es que se pueden reutilizar en todas las reglas de Launch.

Recuerde desde versiones anteriores del Page schema expuesto por la capa de datos:

Los elementos de datos se asignarán a las propiedades @type, dc:title y xdm:template.

Tipo de recurso de componente

1. Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.

2. Vaya a la sección Data Elements y haga clic en Create New Data Element.

3. Para Nombre, introduzca Tipo de recurso de componente.

4. Para Tipo de elemento de datos seleccione Código personalizado.

   

5. Haga clic en Abrir editor e introduzca lo siguiente en el editor de código personalizado:

   if(event && event.component && event.component.hasOwnProperty('@type')) {
       return event.component['@type'];
   }
   

   Guarde los cambios.

   NOTA

   Recuerde que el objeto event está disponible y tiene ámbitos según el evento que activó la Regla en Launch. El valor de un elemento de datos no se establece hasta que el elemento de datos esté referenciado dentro de una regla. Por lo tanto, es seguro utilizar este elemento de datos dentro de una regla como la regla Page Loaded creada en el paso anterior pero no sería seguro utilizar en otros contextos.

Nombre de página

1. Haga clic en Agregar elemento de datos.

2. Para Nombre introduzca Nombre de página.

3. Para Tipo de elemento de datos seleccione Código personalizado.

4. Haga clic en Abrir editor e introduzca lo siguiente en el editor de código personalizado:

   if(event && event.component && event.component.hasOwnProperty('dc:title')) {
       return event.component['dc:title'];
   }
   

   Guarde los cambios.

Plantilla de la página

1. Haga clic en Agregar elemento de datos.

2. Para Nombre introduzca Plantilla de página.

3. Para Tipo de elemento de datos seleccione Código personalizado.

4. Haga clic en Abrir editor e introduzca lo siguiente en el editor de código personalizado:

   if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
       return event.component['xdm:template'];
   }
   

   Guarde los cambios.

5. Ahora debe tener tres elementos de datos como parte de la regla:

   

Añadir la extensión de Analytics

A continuación, agregue la extensión de Analytics a la propiedad de Launch. ¡Necesitamos enviar estos datos a algún lugar!

1. Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.

2. Vaya a Extensions > Catalog

3. Busque la extensión Adobe Analytics y haga clic en Install

   

4. En Administración de biblioteca > Grupos de informes, introduzca los ID de los grupos de informes que desee utilizar con cada entorno de Launch.

   

   NOTA

   Está bien utilizar un grupo de informes para todos los entornos en este tutorial, pero en la vida real le recomendamos utilizar grupos de informes independientes, como se muestra en la imagen siguiente

   SUGERENCIA

   Se recomienda utilizar la opción Administrar la biblioteca por mí como configuración de Administración de biblioteca, ya que facilita en gran medida mantener la biblioteca AppMeasurement.js actualizada.

5. Marque la casilla para habilitar Usar Activity Map.

   

6. En General > Servidor de seguimiento, introduzca su servidor de seguimiento, por ejemplo: tmd.sc.omtrdc.net. Introduzca el servidor de seguimiento SSL si su sitio es compatible con https://

   

7. Haga clic en Guardar para guardar los cambios.

Añadir una condición a la regla Page Loaded

A continuación, actualice la regla Page Loaded para utilizar el elemento de datos Component Resource Type para asegurarse de que la regla solo se active cuando el evento cmp:show sea para la Page. Otros componentes pueden activar el evento cmp:show, por ejemplo, el componente Carrusel lo activará cuando cambien las diapositivas. Por lo tanto, es importante añadir una condición para esta regla.

1. En la interfaz de usuario de Launch, vaya a la regla Page Loaded creada anteriormente.

2. En Conditions haga clic en Agregar para abrir el asistente Configuración de la condición.

3. Para Tipo de condición seleccione Value Comparison.

4. Defina el primer valor del campo de formulario en %Component Resource Type%. Puede utilizar el icono del elemento de datos para seleccionar el elemento de datos Component Resource Type. Deje el comparador establecido en Equals.

5. Establezca el segundo valor en wknd/components/page.

   

   NOTA

   Es posible añadir esta condición dentro de la función de código personalizado que escucha el evento cmp:show creado anteriormente en el tutorial. Sin embargo, agregarla dentro de la interfaz de usuario da más visibilidad a los usuarios adicionales que pueden necesitar realizar cambios en la regla. Además, podemos usar nuestro elemento de datos!

6. Guarde los cambios.

Establecer variables de Analytics y señalización de vista de página de déclencheur

Actualmente, la regla Page Loaded simplemente genera una sentencia de consola. A continuación, utilice los elementos de datos y la extensión de Analytics para establecer las variables de Analytics como action en la regla Page Loaded. También estableceremos una acción adicional para almacenar en déclencheur la señalización de vista de página y enviar los datos recopilados a Adobe Analytics.

1. En la regla Page Loaded remove, la acción Core - Custom Code (las instrucciones de la consola):

   

2. En Acciones, haga clic en Agregar para agregar una nueva acción.

3. Establezca el tipo Extension en Adobe Analytics y establezca el Tipo de acción en Establecer variables

   

4. En el panel principal, seleccione un eVar disponible y configúrelo como el valor del elemento de datos Plantilla de página. Utilice el icono Elementos de datos para seleccionar el elemento Plantilla de página.

   

5. Desplácese hacia abajo, en Configuración adicional establezca Nombre de página en el elemento de datos Nombre de página:

   

   Guarde los cambios.

6. A continuación, añada una acción adicional a la derecha de Adobe Analytics - Set Variables pulsando el icono plus:

   

7. Establezca el tipo Extension en Adobe Analytics y establezca el Tipo de acción en Enviar señalización. Dado que esto se considera una vista de página, deje el seguimiento predeterminado establecido en s.t().

   

8. Guarde los cambios. La regla Page Loaded debe tener ahora la siguiente configuración:

   

   • 1. Escuche el cmp:show evento.
   • 2. Compruebe que el evento se activó mediante una página.
   • 3. Establecer variables de Analytics para el nombre de página y la plantilla de página
   • 4. Envío de la señalización de vista de página de Analytics

9. Guarde todos los cambios y cree la biblioteca de Launch, promociéndola al entorno adecuado.

Validar la señalización de vista de página y la llamada de Analytics

Ahora que la regla Page Loaded envía la señalización de Analytics, debe poder ver las variables de seguimiento de Analytics mediante el depurador de Experience Platform.

1. Abra WKND Site en el explorador.

2. Haga clic en el icono de Debugger para abrir Experience Platform Debugger.

3. Asegúrese de que Debugger asigne la propiedad de Launch a su entorno de desarrollo, tal como se describió anteriormente, y que Registro de consola esté marcado.

4. Abra el menú Analytics y compruebe que el grupo de informes esté establecido en su grupo de informes. El Nombre de página también debe rellenarse:

   

5. Desplácese hacia abajo y expanda Solicitudes de red. Debe poder encontrar el evar configurado para la Plantilla de página:

   

6. Vuelva al explorador y abra la consola del desarrollador. Haga clic en el Carrusel en la parte superior de la página.

   

7. Observe en la consola del explorador la declaración de la consola:

   

   Esto se debe a que el carrusel sí genera un déclencheur de un evento cmp:show pero debido a nuestra comprobación del Tipo de recurso de componente, no se activa ningún evento.

   NOTA

   Si no ve ningún registro de consola, asegúrese de que Registro de consola esté marcado en Iniciar en el depurador de Experience Platform.

8. Vaya a una página de artículos como Western Australia. Observe que Nombre de página y Tipo de plantilla cambian.

Felicitaciones!

Solo ha utilizado la capa de datos del cliente de Adobe impulsada por eventos y el Experience Platform Launch para recopilar datos de página de datos de un sitio AEM y enviarlos a Adobe Analytics.

Siguientes pasos

Consulte el siguiente tutorial para aprender a utilizar la capa de datos del cliente de Adobe impulsada por eventos para rastrear clics de componentes específicos en un sitio de Adobe Experience Manager.