El seguimiento de frustración resalta tres interacciones de alta señal que casi siempre indican problemas de UX: rage clicks, dead clicks y error clicks. Úsalo como atajo de triaje hacia las páginas y elementos que confunden o se rompen para tus visitantes reales.
Qué se rastrea
Se capturan tres patrones de clic automáticamente en cuanto se activa el feature flag.
| Tipo | Definición |
|---|---|
| Rage click | 3 o más clics en 600 ms sobre el mismo elemento o un área de 30×30 px. El usuario está pulsando algo que parece clicable pero no responde. |
| Dead click | Un clic sobre un elemento no interactivo sin ningún cambio en el DOM durante 1 segundo. Parece clicable, no lo es. |
| Error click | Un clic que disparó un error de JavaScript en los siguientes 100 ms. El clic rompió algo. |
Estos tres tipos de clic forman el conjunto completo que el tracker captura hoy. No hay configuración adicional: cuando el feature flag está activado, el tracker vigila automáticamente los tres.
Garantías de privacidad
Los eventos de frustración solo almacenan señales de diagnóstico sobre el elemento al que se hizo clic — nunca el contenido de la página que lo rodea.
Lo que se captura:
- El selector CSS del elemento y una breve ruta DOM (p. ej.
main > section > button.checkout-confirm) - La etiqueta o texto visible del elemento, limitado a 100 caracteres (p. ej. la palabra «Enviar» en un botón)
- El rol ARIA y el aria-label del elemento, si están presentes
- El estilo
cursorcalculado del elemento (se usa para detectar la incoherencia «parece clicable pero no lo es») - Las coordenadas del clic relativas al viewport
- La URL y el título de la página
- El tipo de frustración y la marca temporal
- Los IDs de sesión y de visitante que ya utiliza el resto de tu analítica
Lo que no se captura: valores de formulario, contenido de archivos, el contenido de otros elementos de la página ni cualquier otro dato personal. Todas las cadenas están acotadas defensivamente. Si un visitante tiene activado Global Privacy Control, el seguimiento de frustración se omite, igual que el resto del procesamiento conductual.
Activarlo para un sitio web
- Abre Ajustes → Avanzado del sitio que quieras seguir.
- Desplázate hasta Feature Flags y activa Frustration Tracking.
- Recarga cualquier página abierta del sitio para que el tracker tome el nuevo flag (se refresca automáticamente en unos 5 minutos).
El interruptor está limitado al plan Pro y superiores.
Dónde verlo
Abre la pestaña Errors en tu panel y cambia a la subpestaña Frustration.
Verás tres paneles:
- Spotlight — una tarjeta destacada en la parte superior que selecciona automáticamente el problema con mayor prioridad en función del número de eventos, los usuarios únicos afectados, la actualidad y si comenzó después de tu último despliegue. La tarjeta abre con una frase Qué ocurrió en lenguaje claro («Un visitante hizo clic en el elemento etiquetado 'Enviar' en /checkout pero no pasó nada»), una causa probable, un botón Copiar selector con un clic, un fragmento Reproducir en DevTools listo para pegar y un botón Copiar para ticket que empaqueta todo para entregárselo a un desarrollador.
- Tendencia de frustración — tres tarjetas sparkline (Rage / Dead / Error), una por tipo, con los conteos de eventos en el rango seleccionado. Cambia a un gráfico de líneas combinado con el conmutador Cards / Lines arriba a la derecha.
- Top hotspots — una worklist ordenable donde cada fila es un único elemento roto en una única página. Cada fila muestra el selector, la ruta de la página, la etiqueta visible del elemento y los conteos por tipo. Haz clic en cualquier fila para expandirla: la misma frase en lenguaje claro, copiar el selector, ver eventos recientes y (para error clicks) el error JS asociado en línea. Los clics sobre contenedores de fondo (clics que subieron por burbujeo a
<main>,<body>o<html>desde espacios vacíos) llevan una etiqueta Background atenuada para que puedas ignorarlos de un vistazo.
Puedes filtrar por tipo de frustración (Rage / Dead / Error), prefijo de URL y rango temporal (1h / 24h / 7d / 30d).
Cómo leer el panel
La tabla «Top hotspots» es tu worklist. Cada fila es un único elemento roto en una única página, ordenable por prioridad.
La tarjeta Spotlight y cada fila expandida comparten el mismo diseño de triaje:
- Una frase Qué ocurrió en lenguaje claro — legible para cualquier persona del equipo, sin conocimientos técnicos.
- Un diagnóstico de Causa probable ajustado al tipo de clic y a las señales visibles del elemento. El panel lee el estilo
cursory el nombre de la etiqueta del elemento para señalar los casos evidentes («el CSS dice clicable, pero la etiqueta no es un botón — conviértelo en un<button>o<a>real», o «estado de carga atascado — el handler puede lanzar una excepción silenciosa»), en lugar de mostrarte una definición genérica. - Un fragmento Reproducir en DevTools — pégalo en la consola de la página y cada elemento coincidente recibirá un contorno rojo y una línea de log
[zenovay] match, para que localices al instante el elemento roto. - Un botón Copiar selector (para saltar al inspector de elementos de DevTools) y un botón Copiar para ticket (para entregar todo el contexto — página, elemento, tipo, conteos, corrección sugerida — en un único pegado a una persona desarrolladora).
- Para error clicks: el mensaje de error de JavaScript enlazado y un botón Copiar fingerprint para saltar a la pestaña Errors.
- Los últimos eventos sobre el mismo elemento con coordenadas de viewport e IDs de sesión.
La tarjeta Spotlight selecciona automáticamente el problema de mayor prioridad usando:
priority = (rage × 3 + dead × 1.5 + error × 5) × ln(unique_users + 1) × recency_boost
El boost de actualidad es 1.5× dentro de las últimas 24 h. Los clics en contenedores de fondo se despriorizan con fuerza, de forma que nunca aparecen como Spotlight. Si un hotspot comenzó después de tu último despliegue de GitHub, la fila recibe una insignia NEW ámbar — casi siempre es una regresión.
Consejos de triaje
- Empieza por el Spotlight. Lee la frase en lenguaje claro, revisa el diagnóstico de causa probable, copia el fragmento de DevTools y pégalo en la consola de la página — el elemento roto quedará resaltado.
- Pásalo a una persona desarrolladora en un solo pegado. Si eres PM o fundador·a y detectas un problema, el botón Copiar para ticket empaqueta página, elemento, tipo de clic, conteos y corrección sugerida en un único mensaje listo para pegar en Linear, Jira o Slack.
- Atento a la insignia NEW. Los hotspots marcados como nuevos desde tu último despliegue son casi siempre regresiones que conviene corregir primero.
- Combina rage con error. Los rage clicks sobre el mismo selector que un error click apuntan a una excepción real — corrige el error JS y la rage suele desaparecer con él.
- Los dead clicks revelan expectativas. Una página donde muchos visitantes hacen clic en el mismo div te indica qué esperaban que fuera clicable. O lo haces interactivo, o eliminas la pista visual (p. ej.
cursor: pointer). - Salta las filas Background. Las filas etiquetadas como Background son clics caídos en espacios vacíos que han subido hasta un contenedor; rara vez indican un bug real.
Limitaciones
- Los eventos de frustración se conservan durante aproximadamente 90 días y luego se purgan automáticamente. Son señales de triaje, no un archivo permanente — investiga los hotspots mientras estén frescos.
- La captura está limitada en el tracker para evitar conteos descontrolados en páginas rotas — verás una muestra representativa, no cada clic.
- Los hotspots agregan toda la ventana de datos almacenados; el gráfico respeta el rango temporal seleccionado.