Mejore sus sesiones de FullStory con Google Tag Manager (GTM) y FS Custom Event API

En Nimble Gravity, no somos la típica guía: vamos más allá de lo básico. Somos un socio FullStory de confianza. Reunimos conocimientos prácticos y damos forma a nuestro viaje colaborando con muchos clientes.  

Obtenga información más detallada sobre el comportamiento de los usuarios con Google Tag Manager (GTM) y la API de eventos de FullStory. En esta guía, exploraremos cómo enviar eventos personalizados y variables DataLayer para mejorar su instancia FullStory. 

¿Todavía tiene dudas sobre cómo elaborar una estrategia de eventos eficaz o enviar eventos personalizados a GA4? Explore nuestra serie de blogs para obtener información completa:  

• GA4: ¿Qué son los eventos personalizados?
• GA4: Información sobre eventos personalizados

 ¿Qué es FullStory? 

FullStory es una herramienta que ayuda a las empresas a comprender cómo interactúan los usuarios con sus sitios web. Ayuda a mejorar el sitio web proporcionando información sobre el comportamiento de los usuarios mediante el registro de sesiones, mapas de calor, embudos de conversión y seguimiento de errores. 

¿Qué son los eventos personalizados en FullStory? 

FullStory viene con eventos preestablecidos y te permite crear eventos personalizados basados en acciones del usuario con selectores CSS o texto de botones. La API de FullStory añade una capa adicional de contexto para enriquecer tus datos de eventos personalizados. 

Exploración de ejemplos de eventos personalizados: 

Descubra información valiosa:  

Adéntrese en el mundo de los eventos personalizados, donde el seguimiento de las interacciones de los usuarios adquiere un valor incalculable. Observe los botones importantes, realice un seguimiento de los envíos de formularios y mida cómo interactúan los usuarios. Las empresas pueden utilizar estos conocimientos personalizados para mejorar sus sitios web y crear una mejor experiencia de usuario. 

 Capture los momentos cruciales: 

Defina eventos personalizados con FullStory para descubrir interacciones fundamentales en su sitio web. Tanto si se trata de hacer un seguimiento de los clics en los botones CTA como de supervisar los envíos de formularios, cada interacción es importante. Capture y aproveche estos momentos cruciales para perfeccionar la experiencia del usuario. 

Adopción de funciones: 

Cree eventos personalizados para observar la adopción de funciones específicas. Utilice FullStory para comprender cómo su público adopta nuevos productos o herramientas innovadoras. Optimiza la presentación de las funciones y mejora la adopción por parte de los usuarios basándote en esta valiosa información.   

Racionalice la eficiencia de los formularios: 

Maximice la eficiencia de los formularios creando eventos personalizados para los envíos. Realice un seguimiento de las interacciones de los usuarios desde el principio hasta el final, identificando los puntos de fricción y las dudas de los usuarios. Utilice estos consejos para facilitar los formularios, reducir las tasas de rebote y mejorar la experiencia del usuario. 

¿Cómo conectar Google Tag Manager (GTM) a FullStory? 

Conectar Google Tag Manager (GTM) y FullStory 

• Integración de GTM con FullStory: 
  • Para añadir el script de seguimiento FullStory a su instancia GTM, siga estos pasos: 
    1. Vaya a su cuenta de FullStory. 
    2. Haga clic en Configuración.  
    3. Seleccione Configuración de historia completa.  
    4. Elija la opción "Usar Google Tag Manager". 

• O instale manualmente el código en su instancia GTM. 
  • Copie el código de seguimiento y cree manualmente una etiqueta HTML que se active en todas las páginas de su sitio web.

Compruebe el código para ver si FullStory está instalado en su sitio web. 

1. Abrir un navegador 
2. Ir al sitio web de las pruebas 
3. Haga clic en Inspeccionar elemento 
4.  Abrir la consola del navegador 
5. Pega el siguiente código: 
   • FS.getCurrentSessionURL('TRUE') 
     • Si FullStory está instalado, verá la grabación de la URL de su propia sesión. 

Directrices para eventos y parámetros personalizados en FullStory 

Para añadir eventos personalizados con la API Javascript FS.event, siga las convenciones de nomenclatura de FullStory para propiedades y parámetros. 

1. Compruebe los requisitos del nombre de la propiedad FullStory antes de crear su evento personalizado. 
2. Las propiedades deben seguir el patrón ident_type, empezando por un carácter alfabético. 
3. La longitud máxima de un nombre de propiedad es de 512 caracteres. 

Consejo: Si el evento no cumple los requisitos, no se capturarán. 

Requisitos del nombre de la propiedad 

Sufijo de tipo 

Significado 

Ejemplo 

str 

cadena 

{ 
"nickname_str": "boo" 
} 

int 

entero 

{ 
"PasswordResets_int": 49 
} 

real 

real 

{ 
"amtAbandonedInCart_real": 3.84 
} 

fecha 

fecha en formato ISO-8601 UTC 

{ 
"initialSignupDate_date": 
new Date("2014-03-11T13:19:23Z") 
} 

bool 

booleano 

{ 
"didSelfServiceSignup_bool": true 
} 

strs 

lista de cadenas 

{ 
"cartIds_strs": ["a123", “b456”] 
} 

ints 

lista de números enteros 

{ 
"ids_ints": [123, 456, 789] 
} 

reales 

lista de reales 

{ 
"coordinates_reals": [40.7, -74.0] 
} 

fechas 

lista de fechas en formato ISO-8601 UTC 

{ 
"date_range_dates": [  

new Date("2014-03-11T13:19:23Z"), 

new Date("2014-08-11T13:19:23Z") ]
} 

bools 

lista de booleanos 

{ 
"preferences_bools": [true, false, true] 
} 

 
Envío de eventos personalizados desde Google Tag Manager a FullStory 

Cree una nueva etiqueta HTML en su propiedad GTM con las convenciones de nomenclatura de parámetros adecuadas. Asegúrese de que su etiqueta de evento personalizado se dispara antes de su etiqueta de script FullStory. 

•  Añada un disparador para su etiqueta, por ejemplo, disparar cuando el usuario hace clic en los botones CTA. 

FS.event('ga4Event', { 

Event_action_str: ‘Cta-click-{{JVS – GA4 Event Name Lowercase Format}}’ 

Event_category_str: ‘{{Click Classes}}’, 

Event_label_str: ‘{{Click Text}}’, 

Click_url_cd10_str: ‘{{Click URL}}’ 
}); 

Para evitar problemas, dispare su etiqueta de Evento Personalizado antes de su Etiqueta de Guión FullStory cambiando la Secuenciación de Etiquetas. 

 
¿Cómo controlar los eventos personalizados de la API en FullStory? 

Después de configurar las etiquetas de eventos personalizados en GTM: 

1. Inicie el modo de vista previa de GTM, ejecute su sitio web y abra la consola. 
2. Pruebe su evento personalizado disparando la etiqueta. 
3. En la consola, pegue FS.getCurrentSessionURL('TRUE') y haga clic en la URL devuelta. 
4. FullStory abrirá una ventana para depurar los eventos de tu sesión. 

 
Utilizaré nuestro sitio web como ejemplo: https://nimblegravity.com,  

Consejo: Si fullstory está instalado, debería ver la URL de su propia grabación de sesión 

Envío de eventos personalizados desde Google Tag Manager a FullStory 

Cree una nueva etiqueta HTML en su propiedad GTM con las convenciones de nomenclatura de parámetros adecuadas. Asegúrese de que su etiqueta de evento personalizado se dispara antes de su etiqueta de script FullStory. 

Tomando el siguiente ejemplo, tenemos tipos str, int, real.
FS.event('ga4Event', { 

Event_action_str: ‘Cta-click-{{JVS – GA4 Event Name Lowercase Format}}’ 

Event_category_str: ‘{{Click Classes}}’, 

Event_label_str: ‘{{Click Text}}’, 

Click_url_cd10_str: ‘{{Click URL}}’

}); 

Crear un evento personalizado con las directrices de los parámetros de FullStory 

Cambia la secuencia de etiquetas para que se disparen antes que la etiqueta de configuración de la historia completa. 

¿Cómo controlar los eventos personalizados de la API en FullStory? 

Después de configurar las etiquetas de eventos personalizados en GTM: 

• Inicie el modo de vista previa de GTM, ejecute su sitio web y abra la consola. 
• Pruebe su evento personalizado disparando la etiqueta. 
• En la consola, pegue FS.getCurrentSessionURL('TRUE') y haga clic en la URL devuelta. 
• FullStory abrirá una ventana para depurar los eventos de tu sesión. 
• Valida que tu evento personalizado y parámetros son enviados a FullStory. 

Comprobación de parámetros en la instancia de FullStory 

1. Ir a la configuración 
2. Haga clic en Gestión de datos 
3. Haga clic en Eventos 
4. Seleccione su evento personalizado 

Los parámetros especificados como tipos de cadena en su etiqueta de evento personalizada se mostrarán en consecuencia. 

Una vez finalizado el control de calidad, envíe el contenedor para que se apliquen los cambios. 

¿Cómo utilizar eventos API personalizados en FullStory? 

Deje tiempo para que las sesiones capturen información sobre su nuevo evento personalizado. Cree un nuevo segmento en FullStory: 

1. Seleccione Evento personalizado > Su evento personalizado > Haga clic en "refinamiento" para añadir un filtro de parámetros. 
2. FullStory devolverá las sesiones que cumplan las condiciones, permitiéndole guardar un segmento personalizado. 

Amplía tus ideas, prueba uno de los siguientes escenarios: 

Experimente con pruebas A/B 

Puede utilizar su dataLayer para crear eventos para su Test A/B. Esto le ayudará a probar diferentes variaciones de su sitio web.   

Mida las respuestas de los usuarios y perfeccione sus estrategias basándose en datos reales.  

Crear eventos a medida para la depuración de aplicaciones  

Mida los errores de su aplicación con eventos personalizados y envíelos a su instancia. De este modo, podrás identificar cuellos de botella en tu sitio web. 

Conclusión 

Mejore sus herramientas de análisis integrando los eventos personalizados de su sitio web en FullStory.  

 Llamadas clave: 

• Integración perfecta: Descubra información profunda sobre los usuarios conectando GTM con FullStory, abriendo nuevas vías para la exploración analítica. 
• Precisión en los datos: Adhiérase a las convenciones de nomenclatura de Full Story para garantizar la precisión en la captura de datos de eventos personalizados, elevando la calidad de sus análisis. 
• CONTROL DE CALIDAD: Soluciona problemas y depura de forma eficiente con el modo de vista previa de GTM y la consola del navegador, agilizando el proceso de implementación. 
• Estrategias preparadas para el futuro: Experimente con pruebas A/B y eventos de depuración de aplicaciones a medida, impulsando su estrategia analítica hacia el futuro con enfoques dinámicos y perspicaces. 
  

‍