Integración de AEM Sites y Adobe Analytics

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

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

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

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

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

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.

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

Vaya a Sitio WKND.

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

adobeDataLayer.getState();

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

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

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

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

Asigne un nombre a la regla Página cargada.

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

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

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 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'].

Guarde los cambios.

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

Para el campo Tipo de acción, elija Código personalizado.

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

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.

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.

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:

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

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

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

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

Haga clic en el botón 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.

Haga clic en el botón Agregar elemento de datos

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

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

Haga clic en el botón 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.

Haga clic en el botón Agregar elemento de datos

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

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

Haga clic en el botón 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.

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

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

Ir a Extensiones > Catálogo

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

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

Marque la casilla para habilitar Usar Activity Map.

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

Haga clic en Guardar para guardar los cambios.

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

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

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

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

Establezca el segundo valor en wknd/components/page.

Guarde los cambios.

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

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

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

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

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

Guarde los cambios.

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

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

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

• 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

Guarde todos los cambios y cree su biblioteca de etiquetas, promocionando al entorno adecuado.

Abra el sitio WKND en su explorador.

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

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.

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:

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

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

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

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.

Vaya a una página de artículo como Australia occidental. Observe que Nombre de página y Tipo de plantilla cambian.