SDK web

Para qué sirve#

El SDK web mide la experiencia real de quienes usan tu sitio: cuánto tarda en cargar cada pantalla, qué errores ven, qué pedidos al servidor fallan o tardan y qué hacen (eventos de negocio). Manda los datos a tu punto de entrada de Lymen y une cada pedido del navegador con la traza de tu servidor.

• Pesa unos 34 KB comprimido (el bundle para pegar con <script>).
• No graba sesiones ni lee lo que la gente escribe en los formularios.
• Aplica las reglas de Privacidad del portal antes de mandar nada.

Cuándo usarlo#

Cuando tenés un sitio o una aplicación web (React, Angular, Vue o simple HTML) y querés medir lo que vive cada visitante. Antes tenés que dar de alta el sitio en Aplicaciones: ahí obtenés tu clave (ly_pub_…) y el código listo para copiar.

Instalación#

Con un script (cualquier sitio)#

Pegá esto en el <head> de todas las páginas, con tu clave:

<script src="https://<tu-cuenta>-ingesta.lymen.app/lymen-sdk-web.js"
        data-sitio="ly_pub_XXXXXXXXXXXXXXXXXXXXXXXX"
        data-version="1.4.0"
        async></script>

El script se inicia solo con los atributos data-* y deja la API en window.lymen. Si necesitás llamar a la API antes de que termine de cargar, encolá las llamadas:

<script>
  window.lymenCola = window.lymenCola || [];
  lymenCola.push(['usuario', 'paciente-123']);
</script>

Con npm#

npm install lymen-sdk-web

import { iniciar } from 'lymen-sdk-web';

iniciar({
  sitio: 'ly_pub_XXXXXXXXXXXXXXXXXXXXXXXX',
  endpoint: 'https://<tu-cuenta>-ingesta.lymen.app',
  version: '1.4.0',
  propagarA: ['https://api.tu-empresa.com'],
});

Trae ESM, CommonJS y tipos de TypeScript. Llamarlo del lado del servidor (SSR) no hace nada.

Opciones#

La tabla muestra el nombre en iniciar() y, cuando existe, el atributo del script.

El portal tiene la última palabra sobre el muestreo, los clics y a qué orígenes se propaga traceparent (se suma). Un cambio en el portal llega solo, sin publicar una versión nueva del sitio.

API#

usuario(id | null)              // se hashea con SHA-256 antes de salir del navegador
evento('turno.reservado', { monto: 15000, especialidad: 'clinica' })
error(err, { 'turno.paso': 'confirmar' })   // error que ya manejaste
vista('Detalle del turno')      // vista manual
consentimiento('concedido' | 'denegado')
log('warn', 'No se pudo cargar la agenda', { 'turno.id': 9 })   // debug | info | warn | error

• Nombre de los eventos de negocio: entidad.accion, en minúsculas, números y _ (por ejemplo turno.reservado).
• log: el mensaje se corta a 4096 caracteres y pasa por Privacidad. Solo llega si en el portal está encendido Mensajes de la app.

Eventos de negocio: desde un solo lado#

Mandá un mismo evento (por ejemplo turno.reservado) desde la app o desde el backend, nunca desde los dos: Lymen junta los dos orígenes y se contaría doble. Mandalo desde donde se confirma de verdad (normalmente el backend). Desde el sitio quedan los eventos que solo existen ahí (carrito.abierto, filtro.aplicado).

Qué mide#

Los datos se envían en lotes cada 5 segundos o cada 50 elementos, y lo pendiente sale al ocultarse o cerrarse la página.

Privacidad#

• Las reglas vienen de Privacidad en el portal. El SDK las pide al iniciar y cada 10 minutos, y guarda la última copia para arrancar sin red.
• Se aplican a URLs, mensajes de error, textos y atributos: enmascaran (***), borran o hashean.
• Si el SDK nunca pudo bajar las reglas, usa unas de respaldo: DNI, email, tarjetas (solo si el número es válido) y CUIT/CUIL.
• La plataforma vuelve a aplicar Privacidad al recibir: el navegador es la primera barrera, no la única.
• No se leen los valores de formularios y el id de usuario sale hasheado.

Ejemplos#

React#

// main.tsx
import { iniciar, usuario, evento, error } from 'lymen-sdk-web';

iniciar({
  sitio: import.meta.env.VITE_LYMEN_SITIO,
  endpoint: 'https://<tu-cuenta>-ingesta.lymen.app',
  version: import.meta.env.VITE_VERSION,
  propagarA: ['https://api.tu-empresa.com'],
  rutas: ['/turnos/:id'],
});

usuario(sesion.idPaciente);   // después del login

async function confirmar() {
  try {
    await api.reservar(datos);
  } catch (e) {
    error(e, { 'turno.paso': 'confirmar' });
  }
}

React Router usa history, así que las vistas se detectan solas.

Angular#

// main.ts
import { iniciar } from 'lymen-sdk-web';

iniciar({
  sitio: environment.lymenSitio,
  endpoint: 'https://<tu-cuenta>-ingesta.lymen.app',
  version: environment.version,
  propagarA: [environment.apiUrl],
  rutas: ['/turnos/:id', '/medicos/:slug'],
});
bootstrapApplication(AppComponent, appConfig);

Para los errores que Angular atrapa antes que el navegador, implementá un ErrorHandler que llame a error(e, { origen: 'angular' }).

Problemas comunes#