Seguimiento de componentes en los que se hizo clic con Adobe Analytics

Navegar a página principal de 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 y busque las entradas con el prefijo button- y teaser-xyz-cta. 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"

Los detalles de los datos anteriores se basan en el Esquema de componente/elemento del contenedor. La nueva regla de etiquetas utiliza este esquema.

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 Agregar regla.

Asigne un nombre a la regla CTA en la que se hizo clic.

Haga clic en Eventos > Agregar para abrir el asistente de 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 componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag 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 Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag Property 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 agrega un detector de eventos al insertar una función en la capa de datos. Cada vez que se activa el evento cmp:click, se llama a la función componentClickedHandler. En esta función, se agregan algunas comprobaciones y se construye un nuevo objeto event con el último estado 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.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);

El objeto event se ha pasado desde el método trigger() llamado en el evento personalizado. El objeto component es el estado actual del componente derivado del método de la capa de datos getState() y es el elemento que activó el clic.

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.

Vaya al sitio WKND y abra las herramientas para desarrolladores para ver la consola. Seleccione también la casilla de verificación Conservar registro.

Haga clic en uno de los botones de CTA Teaser o Button para desplazarse a otra página.

Observe en la consola del desarrollador que la regla CTA Clicked se ha activado:

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 Agregar nuevo elemento de datos.

Para el campo Nombre, escriba ID 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.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

Guarde los cambios.

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

Para el campo Nombre, escriba Título del 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('dc:title')) {
    return event.component['dc:title'];
}

Guarde los cambios.

En la interfaz de usuario de la propiedad Tag, navegue hasta la regla CTA en la que se hizo clic 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 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 Button o si el tipo de recurso era de una CTA dentro de un Teaser.

Guarde los cambios.

En la regla CTA Clicked, quitar la acción Core - Custom Code (las instrucciones de la consola):

En Acciones, haga clic en Agregar para crear una acción.

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

Establezca los siguientes valores para eVars, Props y Events:

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

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.

En Seguimiento establezca el botón de opción en s.tl().

Para el campo Tipo de vínculo, elija Vínculo personalizado y para Nombre de vínculo establezca el valor en: %Component Title%: CTA Clicked:

La configuración anterior combina la variable dinámica del elemento de datos Título del componente y la cadena estática CTA en la que se hizo clic.

Guarde los cambios. La regla CTA en la que se hizo clic debe tener la configuración siguiente:

• 1. Escuche el evento cmp:click.
• 2. Compruebe que el evento se activó mediante un botón o un teaser.
• 3. configuró variables de Analytics para que hicieran un seguimiento de ID de componente como eVar, prop y evento.
• 4. envía la señalización de seguimiento de vínculos de Analytics (y no la trata como una vista de página).

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 se compruebe Registro de consola.

Abra el menú Analytics y verifique que el grupo de informes esté establecido en su grupo de informes.

En el explorador, haga clic en uno de los botones de CTA Teaser o Button para desplazarse a otra página.

Vuelva a Experience Platform Debugger y desplácese hacia abajo para expandir Solicitudes de red > Su grupo de informes. Debería poder encontrar el conjunto eVar, prop y evento.

Vuelva al explorador y abra la consola de desarrollador. Navegue hasta el pie de página del sitio y haga clic en uno de los vínculos de navegación:

Observe que en la consola del explorador no se cumplió el mensaje "Código personalizado" para la regla "CTA en la que se hizo clic".

El mensaje anterior se debe a que el componente de navegación no almacena en déclencheur un evento cmp:click pero debido a Condición de la regla que comprueba el tipo de recurso para la que no se realiza ninguna acción.