Conozca algunas prácticas recomendadas para implementar Adobe Analytics en aplicaciones de una sola página (SPA). Esto incluye el uso de Experience Platform Tags, el método de implementación recomendado.
NOTAS INICIALES:
NOTA: 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 Tags. En las secciones siguientes se identifican los pasos y los problemas que se deben tener en cuenta.
Cuando se carga contenido nuevo o se produce una acción en una página de una SPA, actualice primero la capa de datos. Esto debe suceder antes de un evento personalizado que active la ejecución de una regla en Experience Platform Tags. Esto garantiza que los valores correctos de la capa de datos se inserten en las etiquetas y, a continuación, en Adobe Analytics.
La siguiente es una capa de datos de muestra. Cualquiera de estos elementos puede cambiar según la vista inicial o el cambio posterior de la vista, dado que se ha realizado una acción en la página de su SPA. Por ejemplo, en un cambio de vista completo o mayoritario, es un requisito común pasar un valor “pageName” único para diferenciar entre las vistas de la creación de informes de 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>
Cuando se carga contenido nuevo o se produce una acción en la página de la SPA, se debe informar a las etiquetas de Experience Platform para que ejecuten una regla que envíe datos a Analytics. Hay un par de enfoques para esto: Reglas de llamada directa o Eventos personalizados.
Ejemplos: en este documento de ayuda, hay vínculos a sitios de SPA de muestra que implementan Analytics y otras soluciones de Experience Cloud. En estos ejemplos, se emplean los siguientes eventos personalizados:
Consulte las páginas y los documentos a los que se hace referencia arriba para obtener más información acerca de cómo y cuándo se activan estos eventos. No es necesario que utilice los mismos nombres de evento en la implementación. El caso de uso funcional del método usado es esencial para entenderlo como la mejor práctica recomendada para cada uno. El siguiente vídeo presenta una página de SPA y código de muestra en Experience Platform Tags que escucha los eventos personalizados.
Un concepto importante a entender de Analytics al trabajar con una SPA es la diferencia entre s.t()
y s.tl()
. El código activa uno de estos métodos en Experience Platform Tags para enviar datos a Analytics.
s.t(): la “t” significa “track” (seguimiento) y representa una vista de páginas. Si la vista cambia lo suficiente como para que considere que es una nueva “página”, emplee esta llamada. Establezca un valor único en la variable s.pageName y use s.t()
para enviar los datos a Analytics.
s.tl(): “tl” significa “track link” (vínculo de seguimiento) y representa un clic en vínculo o un pequeño cambio en el contenido. Si el cambio de vista es mínimo, utilice s.tl()
para pasar un valor único acerca de la interacción a Analytics. Esta variable transferida no es s.pageName, ya que esto se ignora en Analytics cuando se reciben las llamadas de s.tl()
.
SUGERENCIA: Como guía general, si la pantalla cambia en más del 50 %, utilice la llamada de vista de páginas s.t()
. De lo contrario, use s.tl()
. Sin embargo, aplique su criterio a la hora de considerar las acciones que constituyen una nueva “página” y cómo deben presentarse en los informes de Adobe Analytics.
El siguiente vídeo muestra dónde y cómo activar s.t()
o s.tl()
en Etiquetas.
Envíe los datos correctos a Analytics en el momento adecuado. En un entorno de SPA, un valor almacenado en una variable Analytics persiste y se reenvía a Analytics, potencialmente cuando ya no lo desea. Existe una función en la extensión Tags Analytics para borrar las variables y garantizar que la siguiente llamada no envíe datos de forma errónea a Analytics.
El diagrama anterior muestra las variables borradas después de que envíe los datos. En realidad, esto puede suceder antes O después de la llamada, sin embargo, sea coherente en sus reglas de Experience Platform Tags para lograr una implementación más limpia. Si borra las variables antes de ejecutar s.t()
, configure las nuevas inmediatamente después de la llamada de y, a continuación, proceda a enviar los nuevos datos a Analytics.
NOTA: No siempre es necesario borrar variables al ejecutar s.tl()
. Esta llamada requiere el uso de la variable linkTrackVars para indicar a Analytics qué variables se van a establecer. Esto sucede automáticamente en Experience Platform Tags mediante la configuración. Evita que las variables erróneas se configuren en contraste con el comportamiento con llamadas de s.t()
en un entorno de SPA. Para garantizar una implementación lo más limpia y fiable posible, es probable que sea más fácil emplear la función de borrar variables para ambas llamadas en un entorno de SPA.
El siguiente vídeo muestra dónde y cómo borrar variables en Tags.
En la extensión Tags Analytics, hay dos lugares donde se puede insertar código personalizado: las secciones Administración de la biblioteca y Configurar el rastreador mediante código personalizado.
Cualquiera de estas ubicaciones ejecuta el código contenido una vez para la carga inicial de la página de SPA. Si el código debe ejecutarse en una vista o cambio de acción, impleméntelo en la regla adecuada (por ejemplo la regla, “carga de página: event-view-end”) para garantizar que el código se ejecute cada vez que se ejecute la regla. Al crear esa acción en la regla, establezca Extensión = Principal y Tipo de acción = Código personalizado.
Algunos sitios están compuestos por una combinación de páginas tradicionales y SPA. En este caso, utilice una estrategia que funcione para ambos tipos de página. Al configurar los eventos personalizados del sitio y activar las reglas en Experience Platform Tags, asegúrese de que las visitas dobles no se envíen a Analytics en función de cambios de hash, etc. En este caso, suprima una de las vistas de página para evitar que se pasen datos duplicados a Adobe Analytics.
Si decide separar la funcionalidad en reglas únicas para obtener más control, recuerde documentarlo cuando lo haga. Si cambia una regla, realice el mismo cambio en la otra regla.
Al integrar con Target mediante A4T, confirme que las solicitudes Target y Analytics enviadas en la misma vista o acción pasan el mismo valor de parámetro SDID. Esto garantiza que los datos se sincronicen correctamente en el back-end.
Para ver estas visitas, utilice un depurador o una herramienta de monitorización de paquetes. Adobe proporciona Experience Platform Debugger para este fin. Es una extensión de Chrome que puede descargarla aquí. Target debe ejecutarse primero en la página. Esto también se puede comprobar en el depurador.