What is Behavior.js?

Behavior.js is a lightweight Human-Computer Interaction (HCI) library designed to capture the "invisible" user experience. Unlike traditional analytics that focus solely on successful conversions, Behavior.js quantifies cognitive friction and user frustration in real-time without sacrificing performance.

Ideal for UX Dashboards and behavioral analysis tools where understanding the "why" behind a bounce is more important than the bounce itself.

Installation

bashnpm install behavior-js

Implementation

bash// We import directly from the linked library 
 import { initBehavior } from 'behaviorjs'; 
// In Astro, this script runs only on the client 
// The ideal approach is to wait until the page is ready 
 window.addEventListener('load', () => {
  initBehavior({
   targets: ['cta', 'nav', 'form'], // Types of elements to monitor
   providers: {
    discord: '' // Here is your Webhook
   }
  });
 }); 

Monitoring Elements

bash <button data-behavior="cta">
  Get Started
 </button>

 <a href="https://linkedin.com/in/..." data-behavior="linkedin">
  Connect on LinkedIn
 </a>

Estructura del Reporte JSON

Cada sesión finalizada genera un objeto JSON detallado con el contexto técnico y conductual del usuario.

Bloque	Propiedad Clave	Descripción
Metadata Contexto técnico	`url`	Punto de entrada de la sesión (ej: `/en`).
Metadata Contexto técnico	`screenSize`	Resolución del viewport para calcular distancias de missclicks.
Summary Métricas agregadas	`pageLoadTimeSeconds`	Velocidad de carga inicial capturada por Navigation Timing API.
	`missClicksCount`	Total de interacciones fallidas detectadas en la sesión.
	`avgVisualDiscoveryMs`	Promedio de tiempo que el usuario tardó en "encontrar" elementos clave.
Events Timeline detallado	`type`	Tipo de interacción: `scroll`, `missclick`, o `tta`.
	`behavior.isRageClick`	Flag booleano que identifica frustración por repetición rápida.
	`affordanceCheck`	Análisis visual del elemento (bordes, sombras, cursor) al momento del clic.

Nota: Los eventos de tipo scroll incluyen milestones (25%, 50%, 75%) para mapear el engagement con el contenido.

Discord Webhook Documentation