Prácticas recomendadas al rastrear 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 del 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 debe adaptarlos al método de implementación.
• Todos los SPA son diferentes, por lo que puede que tenga que modificar algunos de los siguientes elementos para adaptarlos a sus necesidades, pero queremos compartir algunas prácticas recomendadas con usted; cosas que debe tener en cuenta al implementar Adobe Analytics en páginas 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 SPA, o cuando se realiza una acción en una página 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 de 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 la SPA. Por ejemplo, en un cambio de pantalla completa/mayoritaria, sería común cambiar un elemento "pageName", para que el nuevo se pueda capturar en Experience Platform Launch y se envíe 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, le interesa informar a Experience Platform Launch para que pueda ejecutar una regla y enviar datos a Analytics. Hay un par de formas diferentes de hacerlo: reglas de Llamada directa o Eventos personalizados.

• Reglas de Llamada directa: en Experience Platform Launch, puede configurar una regla de llamada directa que se ejecuta cuando se llama 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 (configurado eVar4 a X y activado event2 cada vez), puede utilizar una regla llamada directa. Consulte Experience Platform Launch documentación sobre la creación reglas 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 ejemplo 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 mostrará un sitio de muestra y en el que Experience Platform Launch para escuchar los eventos personalizados.

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

Una de las cosas más importantes para comprender Analytics al trabajar con un 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 debe saber cuándo enviar cada uno.

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

• s.tl(): "tl" es el término que se utiliza para rastrear vínculos y se utiliza normalmente para rastrear clics o pequeños cambios en el contenido de la página, en contraposición a un cambio en la pantalla completa. Si el cambio en la página es pequeño, para que no lo considere una "página" nueva completa, utilice s.tl() y no se preocupe por configurar la variable s.pageName, ya que Analytics lo 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áginas y usar s.t(). Si el cambio en 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 Experience Platform Launch.

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 SPA, un valor rastreado en una variable Analytics puede persistir y reenviarse a Analytics, potencialmente cuando ya no lo queremos. Por este motivo, hay 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, y se borran las variables después que envía la visita. En realidad, se puede hacer antes o después de que la visita se envíe, pero debe ser coherente en sus reglas Experience Platform Launch, para que siempre se borre antes o después de configurar las variables y enviarlas. Recuerde, si va a borrar las variables antes de que ejecute s.t(), asegúrese de borrar las variables primero, luego establecer las variables nuevas y, finalmente, enviar los datos nuevos a Analytics.

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

El siguiente vídeo muestra dónde y 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 bibliotecas y la sección extra "Configurar rastreador con 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 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 correspondiente (Por ejemplo, en la "carga de página: event-view-end" regla), de modo que el código se ejecute cada vez que se ejecuta la regla. Al crear esa acción en la regla, conjunto Extensión = Principal y Tipo de acción = Código personalizado.

Sitios SPA/regulares "híbridos"

Algunos sitios son una combinación de páginas "regulares" y páginas SPA. En este caso, deberá utilizar una estrategia que funcione para ambos tipos de página. Al configurar los eventos personalizados del sitio y al activar las reglas en Experience Platform Launch, asegúrese de que no hay visitas dobles que entren en Analytics desde la página, en función de cambios hash, etc. (si es así como eligió el activador de la Experience Platform Launch regla). 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 distintas reglas para que tenga más control sobre ella, asegúrese de recordar/documentar que ha hecho esto, para que cualquier cambio en una regla se pueda hacer para la otra regla también, y así proteger su Analytics integridad de los datos.

Integración con Target a través de A4T

Un poco de atención aquí. Si se integra con Target con A4T, asegúrese de que la solicitud Target y la solicitud Analytics en el 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 analizador de protocolos de paquetes. También puede utilizar el Experience Cloud Debugger, una extensión de Chrome que se puede descargar AQUÍ. 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 SPA en los foros de Adobe
• Sitios de arquitectura de referencia para mostrar cómo implementar SPA en Experience Platform Launch

Recursos de Business.Adobe.com