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

Aprenda a utilizar las funciones integradas del Adobe de la capa de datos del cliente con AEM componentes principales para recopilar datos sobre una página en Adobe Experience Manager Sites. Experience Platform Launch y Extensión de Adobe Analytics se utilizan 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 la variable Nombre de la página y Plantilla de página de una página 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? Ver esta serie de vídeo.

Cambiar entornos de Launch para el sitio WKND

https://wknd.site es un sitio público creado en función 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 switch live https://wknd.site/ a your Propiedad Launch. Por supuesto, puede usar su propio sitio AEM si ya tiene la variable Capa de datos del cliente de Adobe habilitada

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

  2. Asegúrese de que haya un lanzamiento inicial Se ha creado la biblioteca y promocionados a un lanzamiento entorno.

  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 > Configuración y Códigos incrustados insertados reemplace el código de incrustación de Launch existente por your incrustar código copiado del paso 3.

    Reemplazar código incrustado

  7. Habilitar Registro de consola y Bloqueo Debugger en la ficha WKND.

    Registro de consola

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

La variable Proyecto de referencia WKND está construido con AEM componentes principales y tiene el Capa de datos del cliente de Adobe habilitada 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 variable page entrada. 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"
    

    Utilizaremos propiedades estándar derivadas de la variable Esquema de página, dc:title, xdm:language y xdm:template de la capa de datos para enviar datos de página a Adobe Analytics.

    NOTA

    No vea el adobeDataLayer objeto javascript? Asegúrese de que la variable Capa de datos del cliente de Adobe habilitada del sitio.

Crear una regla de página cargada

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

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

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

    Crear regla

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

  4. Haga clic en Eventos Agregar para abrir el Configuración de eventos asistente.

  5. En Tipo de evento select 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 por inserción de una función en la capa de datos. Cuando la variable cmp:show se activa el evento pageShownEventHandler llamada a . En esta función se añaden algunas comprobaciones de coherencia y se añade una nueva event se construye con el último estado de la capa de datos para el componente que activó el evento.

    Después de eso trigger(event) se llama. trigger() es un nombre reservado en Launch y “déclencheur” de la regla de Launch. Pasamos el event objeto como parámetro que, a su vez, está expuesto por 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. Siguiente en Acciones click Agregar para abrir el Configuración de la acción asistente.

  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']);
    

    La variable event se pasa desde el trigger() método llamado en el evento personalizado. component es la página actual derivada de la capa de datos getState en el evento personalizado . Recuerde desde la versión anterior de Esquema de página expuestos por la capa de datos para ver las distintas claves expuestas fuera de la caja.

  11. Guarde los cambios y ejecute un versión en Launch para promocionar el código a la variable entorno en su sitio AEM.

    NOTA

    Puede ser muy útil usar la variable Adobe Experience Platform Debugger para cambiar el código incrustado a un Desarrollo entorno.

  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 la versión anterior de Esquema de página expuesto por la capa de datos:

Los elementos de datos se asignan al @type, dc:titley xdm:template propiedades.

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 Elementos de datos y haga clic en Crear nuevo elemento de datos.

  3. Para Nombre enter Tipo de recurso de componente.

  4. Para Tipo de elemento de datos select 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 la variable event El objeto está disponible y tiene ámbitos basados en el evento que activó la variable Regla en Launch. El valor de un elemento de datos no se establece hasta que el elemento de datos referenciado dentro de una regla. Por lo tanto, es seguro utilizar este elemento de datos dentro de una regla como la Página cargada regla creada en el paso anterior but no sería seguro usar en otros contextos.

Nombre de página

  1. Haga clic en Añadir elemento de datos.

  2. Para Nombre enter Nombre de la página.

  3. Para Tipo de elemento de datos select 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 Añadir elemento de datos.

  2. Para Nombre enter Plantilla de página.

  3. Para Tipo de elemento de datos select 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 Extensiones > Catálogo

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

    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 usar la variable Opción Administrar la biblioteca por mí ya que la configuración de Administración de biblioteca facilita mucho mantener la variable AppMeasurement.js biblioteca 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 variable Página cargada para usar la variable Tipo de recurso de componente elemento de datos para garantizar que la regla solo se active cuando la variable cmp:show es para la variable Página. Otros componentes pueden activar el cmp:show , por ejemplo, el componente Carrusel se 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 Página cargada regla creada anteriormente.

  2. En Condiciones click Agregar para abrir el Configuración de condición asistente.

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

  4. Defina el primer valor del campo de formulario en %Component Resource Type%. Puede utilizar el icono del elemento de datos icono de elemento de datos para seleccionar el Tipo de recurso de componente elemento de datos. Deje el comparador configurado 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 la variable 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 variable Página cargada la regla 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 un acción en el Página cargada regla. También estableceremos una acción adicional para el déclencheur del Señalización de vista de página y enviar los datos recopilados a Adobe Analytics.

  1. En el Página cargada regla remove el Core - Custom Code acción (las instrucciones de consola):

    Eliminar acción de código personalizado

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

  3. Configure las variables Extensión escriba a Adobe Analytics y establezca la variable Tipo de acción a Establecer variables

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

  4. En el panel principal, seleccione una eVar y se establecen como el valor del elemento de datos Plantilla de página. Uso del icono de elementos de datos Icono de Data Elements para seleccionar el Plantilla de página elemento.

    Establecer como plantilla de página eVar

  5. Desplácese hacia abajo, debajo Configuración adicional set Nombre de la página al elemento de datos Nombre de la 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 del Adobe Analytics: Establecer variables tocando el botón plus icono:

    Añadir una acción de Launch adicional

  7. Configure las variables Extensión escriba a Adobe Analytics y establezca la variable Tipo de acción a Send Beacon. 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 variable Página cargada ahora debe tener 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. Configure las variables de Analytics para Nombre de la página y 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 variable Página cargada envía la señalización de Analytics, debería poder ver las variables de seguimiento de Analytics mediante Experience Platform Debugger.

  1. Abra el Sitio WKND en su navegador.

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

  3. Asegúrese de que Debugger asigne la propiedad de Launch a your Entorno de desarrollo, tal como se describió anteriormente y Registro de consola está activada.

  4. Abra el menú Analytics y compruebe que el grupo de informes está configurado en your 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. Debería poder encontrar la variable evar configurado para la variable 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 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 hace el déclencheur a cmp:show evento but debido a nuestra comprobación de las 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 Launch en Experience Platform Debugger.

  8. Vaya a una página de artículos como Australia Occidental. 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