[Integración]{class="badge positive"}

Integración de AEM Sites y Adobe Analytics

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

Lo que va a generar what-build

Seguimiento de datos de página

En este tutorial, va a almacenar en déclencheur una regla de etiquetas basada en un evento de la capa de datos del cliente de Adobe. AEM Además, agregue condiciones para cuándo se debe activar la regla y, a continuación, envíe los valores Nombre de página y Plantilla de página de una página de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página a Adobe Analytics.

Objetivos objective

  1. Cree una regla impulsada por evento en la propiedad de etiqueta que capture los cambios de la capa de datos
  2. Asignar propiedades de capa de datos de página a elementos de datos en la propiedad de etiqueta
  3. Recopilación y envío de datos de página a Adobe Analytics mediante la señalización de vista de página

Requisitos previos

Se requiere lo siguiente:

  • Propiedad de la etiqueta en el Experience Platform
  • Adobe Analytics: ID del grupo de informes de prueba/desarrollo y servidor de seguimiento. Consulte la siguiente documentación para crear un grupo de informes.
  • Extensión de explorador Experience Platform Debugger. Capturas de pantalla de este tutorial capturadas desde el explorador Chrome.
  • AEM (Opcional) Sitio de la con la capa de datos del cliente de Adobe habilitada. Este tutorial utiliza el sitio público WKND, pero puede usar su propio sitio.
NOTE
AEM ¿Necesita ayuda con la integración de la propiedad de etiquetas y el sitio de? Ver esta serie de vídeos.

Cambiar el entorno de etiquetas para el sitio WKND

AEM El WKND es un sitio público creado a partir de un proyecto de código abierto diseñado como referencia y tutorial para una implementación de la.

AEM En lugar de configurar un entorno de e instalar la base de código WKND, puede usar el depurador de Experience Platform para cambiar el sitio WKND activo a su propiedad de etiquetas. AEM Sin embargo, puede usar su propio sitio de la si ya tiene habilitada la capa de datos del cliente de Adobe.

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

  2. Asegúrese de que se ha creado una biblioteca JavaScriptde etiquetas inicial y de que se ha promocionado a la etiqueta entorno.

  3. Copie el código incrustado de JavaScript del entorno de etiquetas en el que se ha publicado la biblioteca.

    Copiar código incrustado de propiedad de etiqueta

  4. En el explorador, abra una pestaña nueva y vaya al Sitio WKND

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

    Depurador de Experience Platform

  6. Vaya a Etiquetas de Experience Platform > Configuración y en Códigos incrustados insertados reemplace el código incrustado existente por su código incrustado copiado del paso 3.

    Reemplazar código incrustado

  7. Habilite Registro de consola y Bloquee el depurador en la ficha WKND.

    Registro de consola

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

AEM El proyecto de referencia WKND se ha creado con componentes principales de la y tiene la 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 Sitio WKND.

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

    code language-js
    adobeDataLayer.getState();
    

    El código anterior devuelve el estado actual de la capa de datos del cliente de Adobe.

    Estado de capa de datos de Adobe

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

    code language-json
    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, usemos propiedades estándar como dc:title, xdm:language y xdm:template de la capa de datos.

    Para obtener más información, revise el esquema de página de los esquemas de datos de los componentes principales.

    note note
    NOTE
    ¿Si no ve el objeto JavaScript adobeDataLayer? Asegúrese de que la capa de datos del cliente de Adobe se ha habilitado en el sitio.

Crear una regla de carga de página

La capa de datos del cliente de Adobe es una capa de datos impulsada por evento. AEM Cuando se carga la capa de datos de la página de, se genera un déclencheur de evento cmp:show. Cree una regla que se active cuando el evento cmp:show se active desde la capa de datos de página.

  1. Vaya a Experience Platform AEM y luego a la propiedad de etiquetas integrada con el sitio de.

  2. Vaya a la sección Reglas en la interfaz de usuario de la propiedad de etiquetas y haga clic en Crear nueva regla.

    Crear regla

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

  4. En la subsección Eventos, haga clic en Agregar para abrir el asistente Configuración de eventos.

  5. Para el campo Tipo de evento, seleccione Código personalizado.

    Asigne un nombre a la regla y agregue el evento de código personalizado

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

    code language-js
    var pageShownEventHandler = function(evt) {
       // defensive coding to avoid a null pointer exception
       if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
          //trigger the Tag Rule and pass event
          console.log("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 Tag Rule, passing in the new `event` object
          // the `event` obj can now be referenced by the reserved name `event` by other Tag 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 agrega un detector de eventos al insertar 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 agregan algunas comprobaciones y se construye un nuevo(a) event con el estado más reciente de la capa de datos del componente que activó el evento.

    Finalmente se llama a la función trigger(event). La función trigger() es un nombre reservado en la propiedad de etiqueta y déclencheur la regla. El objeto event se pasa como parámetro, que a su vez se expone con otro nombre reservado en la propiedad de etiqueta. Los elementos de datos de la propiedad de etiqueta ahora pueden hacer referencia a varias propiedades mediante fragmentos de código como event.component['someKey'].

  7. Guarde los cambios.

  8. A continuación, en Acciones, haga clic en Agregar para abrir el asistente de Configuración de la acción.

  9. Para el campo 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:

    code language-js
    console.log("Page Loaded ");
    console.log("Page name: " + event.component['dc:title']);
    console.log("Page type: " + event.component['@type']);
    console.log("Page template: " + event.component['xdm:template']);
    

    El objeto event se ha pasado desde el método trigger() llamado en el evento personalizado. En este caso, component es la página actual derivada de la capa de datos getState en el evento personalizado.

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

    note note
    NOTE
    Puede resultar útil usar el Adobe Experience Platform Debugger para cambiar el código incrustado a un entorno Development.
  12. AEM Vaya al sitio de la y abra las herramientas para desarrolladores para ver la consola. Actualice la página y debería ver que se han registrado los mensajes de la consola:

Mensajes de consola cargados 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, 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 las reglas de etiquetas.

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

Tipo de medio de componente

  1. Vaya a Experience Platform AEM y luego a la propiedad de etiquetas integrada con el sitio de.

  2. Vaya a la sección Elementos de datos y haga clic en Crear nuevo elemento de datos.

  3. Para el campo Nombre, escriba el Tipo de recurso de componente.

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

    Tipo de recurso de componente

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('@type')) {
        return event.component['@type'];
    }
    
  6. Guarde los cambios.

    note note
    NOTE
    Recuerde que el objeto event está disponible y con ámbito en función del evento que activó la regla en la propiedad de etiqueta. No se establece el valor de un elemento de datos hasta que se haga referencia al elemento de datos 1} en una regla. Por lo tanto, es seguro usar este elemento de datos dentro de una regla como la regla Page Loaded creada en el paso anterior pero no sería seguro usarla en otros contextos.

Nombre de página

  1. Haga clic en el botón Agregar elemento de datos

  2. Para el campo Nombre, ingrese Nombre de página.

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

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    
  5. Guarde los cambios.

Plantilla de la página

  1. Haga clic en el botón Agregar elemento de datos

  2. Para el campo Nombre, ingrese Plantilla de página.

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

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
        return event.component['xdm:template'];
    }
    
  5. Guarde los cambios.

  6. 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, añada la extensión de Analytics a la propiedad de etiquetas para enviar datos a un grupo de informes.

  1. Vaya a Experience Platform AEM y luego a la propiedad de etiquetas integrada con el sitio de.

  2. Ir a Extensiones > Catálogo

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

    Extensión de Adobe Analytics

  4. En Administración de biblioteca > Grupos de informes, introduzca los identificadores de los grupos de informes que desee usar en cada entorno de etiquetas.

    Escriba los identificadores del grupo de informes

    note note
    NOTE
    Es aceptable utilizar un grupo de informes para todos los entornos en este tutorial, pero en la vida real le recomendamos utilizar grupos de informes separados, como se muestra en la siguiente imagen
    note tip
    TIP
    Se recomienda usar la opción Administrar la biblioteca por mí como la configuración de Administración de bibliotecas, ya que facilita la tarea de 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, ingrese su servidor de seguimiento, por ejemplo, tmd.sc.omtrdc.net. Escriba su servidor de seguimiento SSL si su sitio admite https://

    Introduzca 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 Página cargada para usar el elemento de datos Tipo de recurso de componente para garantizar que la regla solo se active cuando el evento cmp:show sea para Página. Otros componentes pueden activar el evento cmp:show; por ejemplo, el componente Carrusel lo activa cuando cambian las diapositivas. Por lo tanto, es importante agregar una condición para esta regla.

  1. En la interfaz de usuario de la propiedad Etiqueta, navegue hasta la regla Página cargada creada anteriormente.

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

  3. Para el campo Tipo de condición, seleccione la opción Comparación de valores.

  4. Establezca el primer valor del campo de formulario en %Component Resource Type%. Puede usar el icono de elemento de datos icono de elemento de datos para seleccionar el elemento de datos Tipo de recurso de componente. Deje el comparador establecido en Equals.

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

    Configuración de condición para regla cargada en la página

    note note
    NOTE
    Es posible agregar 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 utilizar nuestro elemento de datos.
  6. Guarde los cambios.

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

Actualmente, la regla Página cargada simplemente genera una instrucción de consola. A continuación, utilice los elementos de datos y la extensión de Analytics para establecer variables de Analytics como una acción en la regla Página cargada. También establecemos 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, quite la acción Core - Custom Code (las instrucciones de la consola):

    Quitar acción de código personalizado

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

  3. Establezca el tipo de Extension en Adobe Analytics y establezca Action Type en Set Variables

    Establecer extensión de acción en variables de conjunto de Analytics

  4. En el panel principal, seleccione un eVar disponible y establézcalo como el valor del elemento de datos Plantilla de página. Utilice el icono de elementos de datos icono de elementos de datos para seleccionar el elemento Plantilla de página.

    Establecer como plantilla de página de eVar

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

    Conjunto de variables de entorno con nombre de página

  6. Guarde los cambios.

  7. A continuación, agregue una acción adicional a la derecha de Adobe Analytics - Set Variables tocando el icono plus:

    Agregar una acción adicional de regla de etiqueta

  8. Establezca el tipo de Extension en Adobe Analytics y establezca Action Type en Send Beacon. Dado que esta acción se considera una vista de página, deje el seguimiento predeterminado establecido en s.t().

    Enviar acción de Adobe Analytics de señalización

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

    Configuración final de la regla de etiquetas

    • 1. Escuche el evento cmp:show.
    • 2. Compruebe que el evento se activó mediante una página.
    • 3. estableció variables de Analytics para Nombre de página y Plantilla de página
    • 4. Enviar la señalización de vista de página de Analytics
  10. Guarde todos los cambios y cree su biblioteca de etiquetas, promocionando 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, debería poder ver las variables de seguimiento de Analytics mediante Experience Platform Debugger.

  1. Abra el sitio WKND en su 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 etiqueta a su entorno de desarrollo, tal como se describió anteriormente, y de que Registro de consola esté activado.

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

    Debugger de ficha de Analytics

  5. Desplácese hacia abajo y expanda Solicitudes de red. Debería poder encontrar el conjunto evar para la plantilla de página:

    Evar y conjunto de nombres de página

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

    Clic en la página de carrusel

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

    No se cumple la condición

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

    note note
    NOTE
    Si no ve ningún registro de consola, asegúrese de que Registro de consola esté marcado en Etiquetas de Experience Platform en Experience Platform Debugger.
  8. Vaya a una página de artículo como Australia occidental. Observe que Nombre de página y Tipo de plantilla cambian.

Enhorabuena.

Acaba de utilizar la capa de datos del cliente de Adobe impulsada por evento y las etiquetas en Experience Platform AEM para recopilar datos de página de un sitio de 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 evento para rastrear clics de componentes específicos en un sitio de Adobe Experience Manager.

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d