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.
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.
Se requieren las siguientes opciones:
¿Necesita ayuda para integrar Launch y su sitio AEM? Ver esta serie de vídeo.
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
Inicie sesión en el Experience Platform Launch y crear una propiedad de Launch (si aún no lo ha hecho).
Asegúrese de que haya un lanzamiento inicial Se ha creado la biblioteca y promocionados a un lanzamiento entorno.
Copie el código de incrustación de Launch del entorno en el que se ha publicado la biblioteca.
En el explorador, abra una pestaña nueva y vaya a https://wknd.site/
Abra la extensión del explorador de Experience Platform Debugger .
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.
Habilitar Registro de consola y Bloqueo Debugger en la ficha 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.
Vaya a https://wknd.site.
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.
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.
No vea el adobeDataLayer
objeto javascript? Asegúrese de que la variable Capa de datos del cliente de Adobe habilitada del sitio.
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.
Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.
Vaya a la Reglas en la interfaz de usuario de Launch y, a continuación, haga clic en Crear nueva regla.
Asigne un nombre a la regla Página cargada.
Haga clic en Eventos Agregar para abrir el Configuración de eventos asistente.
En Tipo de evento select 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 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']
.
Guarde los cambios.
Siguiente en Acciones click Agregar para abrir el Configuración de la acción asistente.
En 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.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.
Guarde los cambios y ejecute un versión en Launch para promocionar el código a la variable entorno en su sitio AEM.
Puede ser muy útil usar la variable Adobe Experience Platform Debugger para cambiar el código incrustado a un Desarrollo entorno.
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:
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:title
y xdm:template
propiedades.
Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.
Vaya a la Elementos de datos y haga clic en Crear nuevo elemento de datos.
Para Nombre enter Tipo de recurso de componente.
Para Tipo de elemento de datos select Código personalizado.
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.
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.
Haga clic en Añadir elemento de datos.
Para Nombre enter Nombre de la página.
Para Tipo de elemento de datos select Código personalizado.
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.
Haga clic en Añadir elemento de datos.
Para Nombre enter Plantilla de página.
Para Tipo de elemento de datos select Código personalizado.
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.
Ahora debe tener tres elementos de datos como parte de la regla:
A continuación, agregue la extensión de Analytics a la propiedad de Launch. ¡Necesitamos enviar estos datos a algún lugar!
Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.
Vaya a Extensiones > Catálogo
Busque la variable Adobe Analytics extensión 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 Launch.
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
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.
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://
Haga clic en Guardar para guardar los cambios.
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.
En la interfaz de usuario de Launch, vaya a la Página cargada regla creada anteriormente.
En Condiciones click Agregar para abrir el Configuración de condición asistente.
Para Tipo de condición select Value Comparison.
Defina el primer valor del campo de formulario en %Component Resource Type%
. Puede utilizar el icono del elemento de datos para seleccionar el Tipo de recurso de componente elemento de datos. Deje el comparador configurado en
Equals
.
Establezca el segundo valor en wknd/components/page
.
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!
Guarde los cambios.
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.
En el Página cargada regla remove el Core - Custom Code acción (las instrucciones de consola):
En Acciones (Actions), haga clic en Agregar para agregar una nueva acción.
Configure las variables Extensión escriba a Adobe Analytics y establezca la variable Tipo de acción a Establecer variables
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 para seleccionar el Plantilla de página elemento.
Desplácese hacia abajo, debajo Configuración adicional set Nombre de la página al elemento de datos Nombre de la página:
Guarde los cambios.
A continuación, añada una acción adicional a la derecha del Adobe Analytics: Establecer variables tocando el botón plus icono:
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()
.
Guarde los cambios. La variable Página cargada ahora debe tener la siguiente configuración:
cmp:show
evento.Guarde todos los cambios y cree la biblioteca de Launch, promociéndola al entorno adecuado.
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.
Abra el Sitio WKND en su navegador.
Haga clic en el icono de Debugger para abrir Experience Platform Debugger.
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.
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:
Desplácese hacia abajo y expanda Solicitudes de red. Debería poder encontrar la variable evar configurado para la variable Plantilla de página:
Vuelva al explorador y abra la consola del desarrollador. Haga clic en Carrusel en la parte superior de la página.
Observe en la consola del explorador la declaración de la consola:
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.
Si no ve ningún registro de consola, asegúrese de que Registro de consola está marcado en Launch en Experience Platform Debugger.
Vaya a una página de artículos como Australia Occidental. Observe que Nombre de página y Tipo de plantilla cambian.
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.
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.