Uso impulsado por eventos Adobe de la capa de datos del cliente con AEM componentes principales para rastrear clics de componentes específicos en un sitio de Adobe Experience Manager. Obtenga información sobre cómo utilizar las reglas en Experience Platform Launch para detectar eventos de clic, filtrar por componente y enviar los datos a un Adobe Analytics con una señalización de seguimiento de vínculos.
El equipo de marketing de WKND desea saber qué botones de Llamada a acción (CTA) tienen el mejor rendimiento en la página principal. En este tutorial, agregaremos una nueva regla en Experience Platform Launch que espere cmp:click
eventos desde Teaser y Botón y envíe el ID de componente y un nuevo evento a Adobe Analytics junto con la señalización de seguimiento de vínculos.
cmp:click
evento.Este tutorial es una continuación de Recopilación de datos de página con Adobe Analytics y supone que:
Antes de crear reglas en Launch, es útil revisar la esquema para Button y Teaser e inspecciónelos en la implementación de la capa de datos.
Vaya a https://wknd.site/us/en.html
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 y busque las entradas con el prefijo button-
y teaser-xyz-cta
entrada. Debería ver un esquema de datos como el siguiente:
Esquema de botón:
button-2e6d32893a:
@type: "wknd/components/button"
dc:title: "View All"
parentId: "page-2eee4f8914"
repo:modifyDate: "2020-07-11T22:17:55Z"
xdm:linkURL: "/content/wknd/us/en/magazine.html"
Esquema de teaser:
teaser-da32481ec8-cta-adf3c09db9:
@type: "wknd/components/teaser/cta"
dc:title: "Surf's Up"
parentId: "teaser-da32481ec8"
xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"
Se basan en la variable Esquema de elemento de componente/contenedor. La regla que crearemos en Launch utilizará este esquema.
La capa de datos del cliente de Adobe es una evento capa de datos controlada. Cuando se hace clic en un componente principal, se llama a una función cmp:click
se envía mediante la capa de datos. A continuación, cree una regla para escuchar la cmp:click
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 Agregar regla.
Asigne un nombre a la regla Llamada a acción: clic.
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 componentClickedHandler = 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:click 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:click into the data layer
window.adobeDataLayer.push(function (dl) {
//add event listener for `cmp:click` and callback to the `componentClickedHandler` function
dl.addEventListener("cmp:click", componentClickedHandler);
});
El fragmento de código anterior añade un detector de eventos por inserción de una función en la capa de datos. Cuando la variable cmp:click
se activa el evento componentClickedHandler
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” en 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("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);
La variable event
se pasa desde el trigger()
método llamado en el evento personalizado. component
es el estado actual del componente derivado de la capa de datos getState
que activaron el clic.
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 la Sitio WKND y abra las herramientas para desarrolladores para ver la consola. Select Mantener registro.
Haga clic en una de las Teaser o Botón Botones CTA para desplazarse a otra página.
Observe en la consola del desarrollador que la variable Llamada a acción: clic se ha activado la regla:
A continuación, cree un elemento de datos para capturar el ID y el título del componente en el que se hizo clic. Recuerde en el ejercicio anterior el resultado de event.path
era algo similar a component.button-b6562c963d
y el valor de event.component['dc:title']
era algo así como “Viaje”.
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 Añadir nuevo elemento de datos.
Para Nombre enter ID 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.path && event.path.includes('.')) {
// split on the `.` to return just the component ID
return event.path.split('.')[1];
}
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 Llamada a acción: clic regla creada en el ejercicio anterior but no sería seguro usar en otros contextos.
Vaya a la Elementos de datos y haga clic en Añadir nuevo elemento de datos.
Para Nombre enter Título 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('dc:title')) {
return event.component['dc:title'];
}
Guarde los cambios.
A continuación, actualice la variable Llamada a acción: clic para garantizar que la regla solo se active cuando la variable cmp:click
se activa para Teaser o Botón. Dado que el CTA del teaser se considera un objeto independiente en la capa de datos, es importante comprobar el objeto principal para verificar que proviene de un teaser.
En la interfaz de usuario de Launch, vaya a la Llamada a acción: clic regla creada anteriormente.
En Condiciones click Agregar para abrir el Configuración de condición asistente.
Para Tipo de condición 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')) {
// console.log("Event Type: " + event.component['@type']);
//Check for Button Type OR Teaser CTA type
if(event.component['@type'] === 'wknd/components/button' ||
event.component['@type'] === 'wknd/components/teaser/cta') {
return true;
}
}
// none of the conditions are met, return false
return false;
El código anterior primero comprueba si el tipo de recurso era de un Botón y, a continuación, comprueba si el tipo de recurso era de una CTA dentro de un Teaser.
Guarde los cambios.
Actualmente, la variable Llamada a acción: clic 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. También estableceremos una acción adicional para el déclencheur del Seguimiento de vínculos y enviar los datos recopilados a Adobe Analytics.
En el Llamada a acción: clic 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.
Establezca los siguientes valores para eVars, Props y Eventos:
evar8
- %Component ID%
prop8
- %Component ID%
event8
Aquí %Component ID%
se utiliza , ya que garantiza un identificador único para el CTA en el que se hizo clic. Una desventaja potencial del uso de %Component ID%
es que el informe de Analytics contendrá valores como button-2e6d32893a
. Uso %Component Title%
daría un nombre más descriptivo, pero el valor podría no ser único.
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.
En Seguimiento establezca el botón de radio en s.tl()
.
Para Tipo de vínculo elija Vínculo personalizado y para Nombre del vínculo establezca el valor en: %Component Title%: CTA Clicked
:
Esto combinará la variable dinámica del elemento de datos Título de componente y la cadena estática Llamada a acción: clic.
Guarde los cambios. La variable Llamada a acción: clic ahora debe tener la siguiente configuración:
cmp:click
evento.Guarde todos los cambios y cree la biblioteca de Launch, promociéndola al entorno adecuado.
Ahora que la variable Llamada a acción: clic 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.
En el explorador, haga clic en uno de los Teaser o Botón Botones CTA para desplazarse a otra página.
Vuelva a Experience Platform Debugger y desplácese hacia abajo y amplíe Solicitudes de red > Su grupo de informes. Debería poder encontrar la variable eVar, prop y evento configurado.
Vuelva al explorador y abra la consola del desarrollador. Vaya al pie de página del sitio y haga clic en uno de los vínculos de navegación:
Observe el mensaje en la consola del explorador "Código personalizado" para la regla "Llamada a acción: clic" no se cumplió.
Esto se debe a que el componente de navegación sí déclencheur un cmp:click
evento but debido a nuestra comprobación de los en contra del tipo de recurso, no se realiza ninguna acción.
Si no ve ningún registro de consola, asegúrese de que Registro de consola está marcado en Launch en Experience Platform Debugger.
Solo ha utilizado la capa de datos del cliente de Adobe impulsada por eventos y el Experience Platform Launch para rastrear clics de componentes específicos en un sitio de Adobe Experience Manager.