Una aplicación de una sola página (SPA) es una aplicación web o sitio web que carga todos los recursos necesarios para navegar por el sitio en la primera vez que se carga una página. A medida que el usuario hace clic en los vínculos e interactúa con la página, el contenido posterior se carga de forma dinámica. La aplicación suele actualizar la dirección URL en la barra de direcciones para reproducir la navegación tradicional por la página, pero nunca se realiza otra solicitud de página completa.
Existen algunas maneras de utilizar DTM para las aplicaciones de una sola página y en este artículo examinaremos algunas de estas opciones.
Método 1: Reglas de llamada directa (DCR)
Active una regla de llamada directa, como _satellite.track(“page view”) en todo lo que considere una vista de página, ya sea un nuevo DOM o no.
Para obtener más información sobre las reglas de llamadas directas, consulte este vínculo.
Método 2: push state o hash change
El evento pushState o hashchange se puede utilizar en aplicaciones de una sola página (SPA) en las que una página no se vuelve a cargar, pero su contenido cambia. Algunos marcos de desarrollo que se utilizan habitualmente para crear SPA son Angular y React. Este tipo de evento le permite crear reglas basadas en eventos sin necesidad de acudir a los desarrolladores. Estas reglas se activan cuando se utilizan funciones comunes en SPA, como, por ejemplo:
- Se ha modificado la ruta de URL en función del uso de la API pushState del historial HTML5.
- Se ha modificado el hash debido a que un usuario ha cambiado las vistas o las ubicaciones de la página.
Paso 1: cree una nueva regla basada en eventos y elija el tipo de evento como “Estado Push o Hashchange”
Paso 2: en la condición de regla, seleccione criterios como “Hash” y especifique el parámetro hash
Tenga en cuenta que en caso de SPA, dos o más solicitudes de imágenes se realizan en la misma página. Por lo tanto, es necesario borrar los valores de las variables establecidas anteriormente.
Para s.tl() es decir, para realizar llamadas de seguimiento de vínculos, se puede realizar lo siguiente:
- Escribir una función JavaScript sencilla para borrar las variables de Adobe.
- Configure las variables linkTrackVars y linkTrackEvents si aún no lo ha hecho en el archivo s_code.js/Medición de aplicaciones.
- Establezca los valores apropiados para el contenido modificado, específicamente, para la variable pageName.
- Una vez definidas las variables, llame la función tl().
Código de ejemplo:
s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="event1"; s.prop1="some value"; s.eVar1="another value"; s.events="event1"; s.tl(this,'o','My Link Name');
Para s.t(), las llamadas de vista de página se pueden realizar de la siguiente manera:
Borre cualquier valor del objeto s que no desee mantener. Si utiliza AppMeasurement para JavaScript, puede llamar a s.clearVars(). Si utiliza el código H, escriba una rutina simple para definir las variables en una cadena vacía.
Código de ejemplo:
s.clearVars(); s.pageName="New Page" s.prop1="some value" void(s.t());
Método 3: Regla basada en eventos personalizados
DTM también puede reaccionar ante eventos personalizados que se producen en la página. Un evento personalizado activado desde DOM se puede rastrear utilizando las reglas basadas en eventos con el tipo Evento personalizado.
Tomemos el ejemplo de un SPA de comercio electrónico en el que la idea consiste en activar llamadas de “Vista de página” cuando la persona explora desde una página a otra en SPA sin cargar una página nueva.
Paso 1: cree una nueva regla basada en eventos y elija el tipo Evento personalizado, especifique el nombre descriptivo “Custom_Page_View” para el tipo de evento activado. “#content” se especifica en el campo “Tipo de elemento o selector” ya que en ese campo se envía el evento. Seleccione la casilla de verificación Aplicar el controlador de eventos directamente al elemento, ya que, si no, la regla no se activará.
Paso 2: en la sección de la regla Analytics, marque “s.t()” en el botón de opción Seguimiento, ya que se requiere para hacer un seguimiento de una vista de página en este caso de uso.
Paso 3: Coloque el código en el sitio que crea y distribuye el evento.
Podemos hacer referencia a los datos enviados a través del evento utilizando %event.detail.pageName% en la sección Analytics de la regla.
Nota: Independientemente de cualquiera de los tres métodos anteriores utilizados, es posible que sea necesario eliminar la señalización de vista de página inicial que la herramienta Analytics desea configurar de forma predeterminada. De lo contrario, en el ejemplo anterior, donde los desarrolladores activan la regla de llamada directa o EBR en todas las vistas de página, obtendrá dos señalizaciones en la primera página y 1 en todas las páginas subsiguientes. Consulte el código de muestra para suprimir la señalización de la vista de página inicial de la herramienta Analytics.
- Añada “return false” a cualquier bloque de código personalizado de la herramienta de Analytics que se ejecute en dicha página.
