Prácticas recomendadas para el seguimiento de aplicaciones de una sola página (SPA) en Adobe Analytics

En este documento, describiremos varias prácticas recomendadas que debe seguir y tener en cuenta a medida que utiliza Adobe Analytics para rastrear aplicaciones de una sola página (SPA). Este documento se centrará en el uso de Adobe Experience Platform Launch, que es el método de implementación recomendado.

NOTAS INICIALES:

• Los elementos siguientes asumirán que está utilizando Experience Platform Launch para implementar en el sitio. Las consideraciones seguirían existiendo si no utiliza Experience Platform Launch, pero tendría que adaptarlas a su método de implementación.
• Todas las SPA son diferentes, por lo que es posible que tenga que modificar algunos de los siguientes elementos para adaptarlos a sus necesidades, pero quisimos compartir algunas prácticas recomendadas con usted; cosas que debe tener en cuenta al implementar Adobe Analytics en páginas de SPA.

Diagrama sencillo del trabajo con SPA en Experience Platform Launch

NOTA: Como se ha indicado, este es un diagrama simplificado de cómo se gestionan las páginas de SPA en una implementación de Adobe Analytics mediante Experience Platform Launch. En las secciones siguientes de esta página, analizaremos los pasos y cualquier tema que debe considerar cuidadosamente o sobre el que debe actuar.

Configuración de la capa de datos

Cuando se carga contenido nuevo en una página de SPA, o cuando se realiza una acción en una página de SPA, una de las primeras cosas que debe hacer es actualizar la capa de datos. Esto debe suceder ANTES de que el evento personalizado se active y active las reglas en Experience Platform Launch, de modo que Experience Platform Launch pueda recoger los nuevos valores de la capa de datos e insertarlos en Adobe Analytics.

A continuación se muestra una capa de datos de ejemplo, cuyos elementos podrían cambiarse al cambiar la vista o la acción en su SPA. Por ejemplo, en un cambio de pantalla completo/mayoritario, sería común cambiar un elemento "pageName", de modo que el nuevo se pueda capturar en Experience Platform Launch y enviarse a Adobe Analytics.

<script>
    digitalData = {
        pageInstanceID: "Launch Demo Site",
        page:{
            pageInfo:{
                pageID: '2745374',
                pageName: 'acs demo - product listing page'
            },
            attributes:{
                project: "Experience Platform Launch Project"
            }
        },
        user : [ {
          "profile" : [ {
            "attributes" : {
              "gender" : "male",
              "age" : "35"
            }
          } ]
        }],
        libraries : {
          adobe : {
            launch : {
              state : 0, // 0 = not loaded , 1 = loaded
              domain : "assets.adobedtm.com"
            }
          }
        }

     };
    </script>

Configuración de eventos personalizados y escucha en Experience Platform Launch

Cuando se carga contenido nuevo en la página o cuando se produce una acción en el sitio, se recomienda informar a Experience Platform Launch para que pueda ejecutar una regla y enviar datos a Analytics. Hay un par de formas diferentes de hacerlo: Llamada directa reglas o Eventos personalizados.

• Reglas de llamada directa: en Experience Platform Launch, puede configurar una regla de llamada directa que se ejecute cuando se llame directamente desde la página. Si la carga de la página o la acción en el sitio es muy sencilla, o si es única y puede ejecutar un conjunto específico de instrucciones cada vez (establezca eVar4 en X y active event2 cada vez), puede utilizar una llamada directa regla. Consulte la documentación Experience Platform Launch sobre la creación de reglas de llamada directa.
• Eventos personalizados: Para obtener más funcionalidad y para poder adjuntar dinámicamente una carga útil con diferentes valores, debe configurar eventos JavaScript personalizados y escucharlos en Experience Platform Launch, donde puede utilizar la carga útil para establecer variables y enviar los datos a Adobe Analytics. Es más probable que necesite esta funcionalidad y, por lo tanto, esta opción se considera la práctica recomendada. Sin embargo, cada función del sitio puede determinar qué método es el más adecuado. En este documento avanzaremos suponiendo que necesite utilizar este método de eventos personalizado.

Ejemplos: En 🔗 ESTE documento de ayuda, hay vínculos a sitios de SPA de muestra que se han implementado Analytics (y otras soluciones de Experience Cloud), así como documentos que describen lo que se ha implementado. En estos ejemplos de SPA se han utilizado los siguientes eventos personalizados:

• event-view-start: Este evento debe activarse al inicio de la vista del estado que se está cargando.
• event-view-end: Este evento debe activarse incluso cuando se ha producido un cambio de vista/estado y todos los componentes de SPA de la página han terminado de cargarse. Este es el evento que generalmente activa una llamada a Adobe Analytics.
• event-action-trigger: Este evento se debe activar cuando se produzca cualquier evento en la página excepto en la carga de vista/estado. Podría ser un evento de clic o un cambio de contenido más pequeño sin un cambio de vista.

Consulte las páginas o documentos a los que se hace referencia para obtener más información sobre cómo y cuándo se activan. No es necesario que utilice estos mismos nombres de evento, pero la funcionalidad que se enumera aquí es una práctica recomendada. El siguiente vídeo muestra un sitio de muestra y dónde en Experience Platform Launch para escuchar los eventos personalizados.

Ejecución de s.t() o s.tl() en la Experience Platform Launch Regla

Una de las cosas más importantes que se deben comprender para Analytics al trabajar con una SPA es la diferencia entre s.t() y s.tl(). Se activará uno de estos métodos en Experience Platform Launch para enviar datos a Analytics, pero es necesario que sepa cuándo enviarlos.

• s.t() : la "t" significa "track" y es una vista de página normal. Aunque la dirección URL no cambie, ¿cambia lo suficiente la vista para que considere como una nueva "página"? Si es así, configure la variable s.pageName y utilice s.t() para enviar la llamada a Analytics

• s.tl() : "tl" significa "vínculo de seguimiento" y se utiliza normalmente para rastrear clics o pequeños cambios de contenido en la página, en contraposición a un cambio de pantalla completa. Si el cambio en la página es pequeño, para que no lo considere una nueva "página" completa, utilice s.tl() y no se preocupe por configurar la variable s.pageName, ya que Analytics la ignorará.

SUGERENCIA: Algunas personas utilizan una guía general que indica que si la pantalla cambia más del 50 %, debe considerarse una vista de página y usarla s.t(). Si el cambio a la pantalla es inferior al 50%, utilice s.tl(). Sin embargo, depende totalmente de usted y de lo que considere una nueva "página" y de cómo le gustaría rastrear su sitio en Adobe Analytics.

El siguiente vídeo muestra dónde/cómo activar s.t() o s.tl() en Launch mediante Adobe.

Borrado de variables

Al rastrear su sitio con Adobe Analytics, por supuesto, solo desea enviar los datos correctos a Analytics en el momento adecuado. En un entorno de SPA, un valor rastreado en una variable Analytics puede persistir y reenviarse a Analytics, posiblemente cuando ya no lo deseamos. Por este motivo, existe una función en la extensión Analytics Launch para borrar las variables, de modo que tenga una pizarra nueva cuando ejecute la siguiente solicitud de imagen y envíe datos a Analytics.

En el diagrama anterior, lo tenemos listado al final del proceso, borrando las variables después que envía en la visita. En realidad, se puede hacer antes o después de que la visita se envíe, pero debe ser coherente en las reglas Experience Platform Launch, de modo que siempre borre antes o después de configurar las variables y enviarlas. Recuerde, si va a borrar las variables antes de ejecutar s.t(), asegúrese de borrar las variables primero, luego establecer las variables nuevas y, finalmente, enviar los nuevos datos a Analytics.

NOTA: No siempre es necesario borrar variables al ejecutarse s.tl(), ya que s.tl() requiere el uso de la linkTrackVars variable junto a ella cada vez para indicar Analytics qué variables se van a configurar (se añaden automáticamente entre bastidores en Experience Platform Launch). Esto significa que las variables errantes no suelen aparecer al utilizar s.tl(), pero es muy recomendable cuando se utiliza s.t() en un entorno SPA. Dicho todo esto, me gustaría recomendarlo como una práctica recomendada para utilizar la función Clear Variables tanto para s.t() como para s.tl() en un entorno SPA, solo para garantizar la recopilación de datos de calidad.

El siguiente vídeo muestra dónde/cómo borrar las variables en Launch.

Consideraciones adicionales

Ventanas de código personalizado en Experience Platform Launch

En la extensión Launch Analytics hay dos lugares en los que puede insertar código personalizado: La sección administración de biblioteca y la sección adicional "Configurar rastreador usando código personalizado".

Es importante saber que cualquiera de estas ubicaciones solo va a ejecutar el código una vez, cuando la carga inicial de la página SPA se produce en la página SPA. Si necesita que el código se ejecute en un cambio de vista o en una acción de su sitio, debe agregar una Acción adicional a la regla apropiada (por ejemplo, en la "carga de página": event-view-end" rule), de modo que el código se ejecute cada vez que se ejecute rule. Al crear esa acción en la regla, establezca Extensión = Core y Tipo de acción = Custom Code.

SPA/Sitios regulares "híbridos"

Algunos sitios son una combinación de páginas "regulares" y páginas de SPA. En este caso, deberá utilizar una estrategia que funcione para ambos tipos de página. Al configurar los eventos personalizados en el sitio y activar las reglas en Experience Platform Launch, asegúrese de que no haya visitas dobles que entren en Analytics desde la página, en función de cambios hash, etc. (si así es como ha elegido activar la regla Experience Platform Launch). En este caso, deberá suprimir una de las vistas de página para que no le proporcione datos defectuosos en Adobe Analytics.

Si decide dividir la funcionalidad en reglas separadas para tener más control sobre ella, asegúrese de recordar/documentar que lo ha hecho, de modo que cualquier cambio en una regla también se pueda realizar en la otra regla, protegiendo su Analytics integridad de datos.

Integración con Target mediante A4T

Un breve llamado aquí. Si está integrando con Target mediante A4T, asegúrese de que la solicitud Target y la solicitud Analytics del mismo cambio de vista tengan el mismo SDID. Esto garantizará que los datos se sincronicen correctamente en las soluciones.

Para ver las visitas, utilice un depurador o un programa de husmeador de paquetes. También puede utilizar Experience Cloud Debugger, una extensión de Chrome que se puede descargar HERE. Target debe activarse primero en la página, por lo que también puede comprobarlo en la consola de JavaScript o en el depurador.

Recursos adicionales

• Debate sobre la SPA en los foros de Adobe
• Sitios de arquitectura de referencia para mostrar cómo implementar SPA en Experience Platform Launch