Integración de AEM Sites y Adobe Analytics

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

Asegúrese de que haya una etiqueta JavaScript inicial se ha creado la biblioteca y se promocionan 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 navegue hasta 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 reemplazar el código incrustado existente con su código incrustado copiado del paso 3.

Activar Registro de consola y Bloquear Use el depurador en la pestaña WKND.

Vaya a Sitio WKND.

Abra las herramientas para desarrolladores del explorador y vaya al 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 el 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"

Para enviar datos de página a Adobe Analytics, usemos las propiedades estándar como dc:title, xdm:language, y xdm:template de la capa de datos.

Para obtener más información, consulte Esquema de página de los Esquemas de datos de componentes principales.

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

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

Asignar un nombre a la regla Página cargada.

En el Eventos , haga clic en Añadir para abrir Configuración de eventos asistente.

Para Tipo de evento , seleccione Código personalizado.

Clic 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 de inserción de una función en la capa de datos. Cuándo cmp:show se activa el pageShownEventHandler se llama a la función. En esta función, se añaden algunas comprobaciones de coherencia y una nueva event se construye con la última estado de la capa de datos para el componente que activó el evento.

Finalmente, la trigger(event) se llama a la función. El trigger() función es un nombre reservado en la propiedad etiqueta y déclencheur la regla. El event El objeto 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.

Siguiente debajo de Acciones click Añadir para abrir Configuración de acción asistente.

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

Clic 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 event se pasa desde el trigger() método invocado en el evento personalizado. Aquí, el component es la página actual derivada de la capa de datos getState en el evento personalizado.

Guarde los cambios y ejecute un generar en la propiedad tag para promocionar el código a entorno AEM se utiliza 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 Elementos de datos y haga clic en Crear nuevo elemento de datos.

Para el Nombre , introduzca la variable Tipo de medio de componente.

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

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

Clic Añadir elemento de datos botón

Para el Nombre , introduzca Nombre de página.

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

Clic 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 Añadir elemento de datos botón

Para el Nombre , introduzca Plantilla de página.

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

Clic 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 el Adobe Analytics y haga clic en Instalar

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

Marque la casilla para habilitar Usar Activity Map.

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

Clic Guardar para guardar los cambios.

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

En Condiciones click Añadir para abrir Configuración de condición asistente.

Para Tipo de condición , seleccione Value Comparison opción.

Establezca el primer valor del campo de formulario en %Component Resource Type%. Puede utilizar el icono de elemento de datos para seleccionar Tipo de medio de componente elemento de datos. Deje el comparador configurado como. Equals.

Establezca el segundo valor en wknd/components/page.

Guarde los cambios.

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

En la subsección Acciones, haga clic en Añadir para añadir una nueva acción.

Configure las variables Extensión escriba a Adobe Analytics y configure el Tipo de acción hasta Establecer variables

En el panel principal, seleccione un disponible eVar y se establece como el valor del elemento de datos Plantilla de página. Uso del icono Elementos de datos para seleccionar Plantilla de página Elemento.

Desplazarse hacia abajo, debajo de Configuración adicional set Nombre de página al elemento de datos Nombre de página:

Guarde los cambios.

A continuación, añada una acción adicional a la derecha de Adobe Analytics: Establecer variables pulsando el botón plus icono:

Configure las variables Extensión escriba a Adobe Analytics y configure el Tipo de acción hasta 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. El Página cargada La regla debe tener la configuración siguiente:

• 1. Escuche el cmp:show evento.
• 2. Compruebe que el evento se activó mediante una página.
• 3. Establecer variables de Analytics para Nombre de página y Plantilla de página
• 4. Envío de 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 el explorador.

Haga clic en el icono 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 Registro de consola está marcada.

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

Desplazarse hacia abajo y expandir Solicitudes de red. Debería ser capaz de encontrar el evar configure para el Plantilla de página:

Vuelva al explorador y abra la consola de desarrollador. Haga 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 hace un déclencheur a cmp:show evento pero debido a nuestra comprobación de la Tipo de medio de componente, no se activa ningún evento.

Navegue hasta una página de artículo como Australia Occidental. Observe que Nombre de página y Tipo de plantilla cambian.