Seguimiento del componente en el que se hizo clic con Adobe Analytics

Utilice la capa de datos del cliente de Adobe impulsada por eventos 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.

Qué va a generar

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 escuche los eventos cmp:click de los componentes Teaser y Button y envíe el ID del componente y un nuevo evento a Adobe Analytics junto con la señalización de seguimiento de vínculos.

Objetivos

1. Cree una regla impulsada por eventos en Launch basada en el evento cmp:click .
2. Filtre los diferentes eventos por tipo de recurso de componente.
3. Establezca el id de componente en el que se hizo clic y envíe Adobe Analytics de evento con la señalización de seguimiento de vínculos.

Requisitos previos

Este tutorial es una continuación de Collect page data with Adobe Analytics y supone que:

• Una propiedad de Launch con la extensión de Adobe Analytics habilitada
• ID del grupo de informes y servidor de seguimiento de Adobe Analytics/dev. Consulte la siguiente documentación para crear un nuevo grupo de informes.
• Experience Platform Debugger extensión del explorador configurada con la propiedad Launch cargada en https://wknd.site/us/en. htmlor y un sitio AEM con la capa de datos de Adobe habilitada.

Esquema Botón y teaser de Inspect

Antes de crear reglas en Launch, es útil revisar el esquema para Button y Teaser e inspeccionarlos en la implementación de la capa de datos.

1. Vaya a https://wknd.site/us/en.html

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

   

3. 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"
   

   Se basan en el Esquema de elemento componente/contenedor. La regla que crearemos en Launch utilizará este esquema.

Creación de una regla en la que se hizo clic en CTA

La capa de datos del cliente de Adobe es una capa de datos controlada por evento. Cuando se hace clic en cualquier componente principal, se envía un evento cmp:click a través de la capa de datos. A continuación, cree una regla para detectar el evento cmp:click.

1. Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.

2. Vaya a la sección Rules de la interfaz de usuario de Launch y, a continuación, haga clic en Agregar regla.

3. Asigne a la regla el nombre CTA Clic.

4. Haga clic en Events > Add para abrir el asistente Event Configuration.

5. En Tipo de evento seleccione Código personalizado.

   

6. 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 agregará un detector de eventos insertando una función en la capa de datos. Cuando se activa el evento cmp:click, se llama a la función componentClickedHandler . En esta función se añaden algunas comprobaciones de coherencia y se construye un nuevo objeto event con el estado más reciente de la capa de datos para el componente que activó el evento.

   Después de llamar a trigger(event). trigger() es un nombre reservado en Launch y “déclencheur” de la regla de Launch. Pasamos el objeto event como parámetro que, a su vez, se expone con 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'].

7. Guarde los cambios.

8. A continuación, en Actions, haga clic en Add para abrir el asistente Action Configuration.

9. En Tipo de acción, elija Código personalizado.

   

10. 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 pasa desde el método trigger() llamado en el evento personalizado. component es el estado actual del componente derivado de la capa de datos getState que activó el clic.

11. Guarde los cambios y ejecute una compilación en Launch para promocionar el código al entorno utilizado en el sitio AEM.

    NOTA

    Puede resultar muy útil utilizar el Adobe Experience Platform Debugger para cambiar el código incrustado a un entorno Development.

12. Vaya al WKND Site y abra las herramientas para desarrolladores para ver la consola. Seleccione Mantener registro.

13. Haga clic en uno de los botones de llamada a acción Teaser o Button para desplazarse a otra página.

    

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

    

Crear elementos de datos

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 que 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”.

ID de componente

1. Vaya al Experience Platform Launch y a la propiedad web integrada con el sitio AEM.

2. Vaya a la sección Data Elements y haga clic en Add New Data Element.

3. Para Name, introduzca Component ID.

4. Para Tipo de elemento de datos seleccione Código personalizado.

   

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

   NOTA

   Recuerde que el objeto event está disponible y tiene ámbitos según el evento que activó la Regla en Launch. El valor de un elemento de datos no se establece hasta que el elemento de datos esté referenciado dentro de una regla. Por lo tanto, es seguro utilizar este elemento de datos dentro de una regla como la regla CTA Clicked creada en el ejercicio anterior pero no sería seguro utilizar en otros contextos.

Título de componente

1. Vaya a la sección Data Elements y haga clic en Add New Data Element.

2. Para Name introduzca Component Title.

3. Para Tipo de elemento de datos seleccione Código personalizado.

4. 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ñadir una condición a la regla de llamada a acción en la que se ha hecho clic

A continuación, actualice la regla CTA Clicked para asegurarse de que la regla solo se active cuando el evento cmp:click se active para un teaser o un Button. 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.

1. En la interfaz de usuario de Launch, vaya a la regla Llamada a acción en la que se hizo clic creada anteriormente.

2. En Conditions haga clic en Agregar para abrir el asistente Configuración de la condición.

3. Para Tipo de condición seleccione Código personalizado.

   

4. 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 Button y, a continuación, comprueba si el tipo de recurso era de un CTA dentro de un Teaser.

5. Guarde los cambios.

Establecimiento de variables de Analytics y señalización de vínculo de seguimiento de déclencheur

Actualmente, la regla CTA Clicked 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 action. También estableceremos una acción adicional para almacenar en déclencheur el Track Link y enviar los datos recopilados a Adobe Analytics.

1. En la CTA Clic regla remove la acción Core - Custom Code (las instrucciones de la consola):

   

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

3. Establezca el tipo Extension en Adobe Analytics y establezca el Tipo de acción en Establecer variables.

4. Configure los siguientes valores para eVars, Props y Events:

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

   

   NOTA

   Aquí se utiliza %Component ID% ya que garantizará 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. Usar %Component Title% daría un nombre más descriptivo, pero es posible que el valor no sea único.

5. A continuación, añada una acción adicional a la derecha de Adobe Analytics - Set Variables pulsando el icono plus:

   

6. Establezca el tipo Extension en Adobe Analytics y establezca el Tipo de acción en Enviar señalización.

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

8. En Tipo de vínculo, elija Vínculo personalizado y, en Nombre del vínculo, establezca el valor en: %Component Title%: CTA Clicked:

   

   Esto combinará la variable dinámica del elemento de datos Component Title y la cadena estática CTA Click.

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

   

   • 1. Escuche el cmp:click evento.
   • 2. Compruebe que el evento se activó mediante un ​​teaser de botones.
   • 3. Configure variables de Analytics para para que rastreen el ID de componente como un eVar, una prop y un evento.
   • 4. Envíe la señalización del vínculo de seguimiento de Analytics (y ​​no la trate como una vista de página).

10. Guarde todos los cambios y cree la biblioteca de Launch, promociéndola al entorno adecuado.

Validación de la señalización del vínculo de seguimiento y la llamada de Analytics

Ahora que la regla CTA Click envía la señalización de Analytics, debe poder ver las variables de seguimiento de Analytics mediante el depurador de Experience Platform.

1. Abra WKND Site en el explorador.

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

3. Asegúrese de que Debugger asigne la propiedad de Launch a su entorno de desarrollo, tal como se describió anteriormente, y que Registro de consola esté marcado.

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

   

5. En el navegador, haga clic en uno de los botones de llamada a acción Teaser o Button para desplazarse a otra página.

   

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

   

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

   

8. Observe en la consola del explorador que el mensaje "Custom Code" para la regla "CTA Clicked" no se ha cumplido.

   Esto se debe a que el componente de navegación sí genera un déclencheur de un evento cmp:click pero debido a que comprobamos el valor de frente al tipo de recurso, no se realiza ninguna acción.

   NOTA

   Si no ve ningún registro de consola, asegúrese de que Registro de consola esté marcado en Iniciar en el depurador de Experience Platform.

Felicitaciones!

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.