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

Seguimiento de datos de página

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:

NOTA

¿Necesita ayuda para integrar Launch y su sitio AEM? Consulte esta serie de vídeos.

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.

    Copiar código incrustado de Launch

  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 .

    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.

    Reemplazar código incrustado

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

    Registro de consola

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.

    Estado de la capa de datos del 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.

    Crear 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.

    Asigne un nombre a la regla y añada el evento de Custom Code

  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.

    Tipo de acción de 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:

    Mensajes de la consola Carga de página

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.

    Tipo de recurso de componente

  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:

    Elementos de datos en 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

    Extensión de Adobe Analytics

  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.

    Especifique los ID de los grupos de informes

    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.

    Habilitar Activity Map de uso

  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://

    Especifique los servidores de seguimiento

  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 data-element icon para seleccionar el elemento de datos Component Resource Type. Deje el comparador establecido en Equals.

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

    Configuración de la condición para la regla de carga de página

    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):

    Eliminar acción de código personalizado

  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

    Configurar extensión de acción en variables definidas de Analytics

  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 Icono de elementos de datos para seleccionar el elemento Plantilla de página.

    Establecer como plantilla de página eVar

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

    Nombre de página Configuración de variable de entorno

    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:

    Añadir una acción de Launch adicional

  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().

    Acción Send Beacon Adobe Analytics

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

    Configuración de lanzamiento final

    • 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 Experience platform 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:

    Depurador de pestañas de Analytics

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

    Evar y conjunto de nombres 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.

    Pulsar en la página de carrusel

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

    Condición no cumplida

    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.

En esta página