Eventos personalizados bien hechos: 8 cosas que medir en tu app (con código)

Las pageviews te dicen quién entró. Los eventos personalizados te dicen qué hizo. Es la parte de la analítica que realmente cambia decisiones — y la que casi nadie configura. Aquí van ocho eventos que merece la pena medir, la línea que dispara cada uno, y la regla de nombres que te salvará dentro de un año.

Por qué los eventos importan más que las pageviews

Una pageview es una señal gruesa: alguien aterrizó en una URL. No te dice si hizo clic en el CTA, eligió un plan, terminó el formulario o se fue en silencio. Casi todo lo que quieres optimizar — conversión, activación, abandono — vive entre pageviews, no en ellas.

Los eventos personalizados cierran ese hueco. Una línea de JavaScript se dispara cuando ocurre algo importante. El evento es anónimo (sin PII, sin cookies), se agrega en servidor y aparece en tu dashboard junto al tráfico.

La API de eventos de Logly en una línea

Una vez que p.js está en tu sitio, el tracker expone una sola función:

window.logly('event', 'signup_completed');

Esa es toda la API. Sin SDK, sin paso de inicialización, sin objeto payload. Lanzas el nombre cuando ocurre la cosa; el Worker agrega por nombre y te muestra contadores en el dashboard. Los nombres están limitados a 100 caracteres y deben ir en snake_case minúsculas — más abajo lo desarrollo.

Ocho eventos que merece la pena medir (con código)

1. Clic en el CTA de la landing

Antes incluso de que el usuario se registre, quieres saber si el CTA principal está haciendo su trabajo. Dos eventos, uno por CTA, te da el click-through por sección.

document.querySelector('.btn-hero').addEventListener('click', function () {
  window.logly('event', 'cta_hero_click');
});

Si tienes un segundo CTA más abajo (precios, footer), dale un nombre distinto (cta_pricing_click). No los mezcles — la gracia es compararlos.

2. Signup iniciado vs signup completado

El par de eventos más útil en cualquier SaaS. La proporción entre ellos es la tasa de abandono de tu funnel de registro.

// cuando el formulario se enfoca o se abre
window.logly('event', 'signup_started');

// después de que la API confirme la creación de la cuenta
window.logly('event', 'signup_completed');

Una proporción sana rara vez pasa del 60%. Si la tuya está en el 15%, el cuello de botella es el formulario, no el tráfico.

3. Selección de plan (un evento por plan)

No dispares un único plan_selected con el nombre del plan en un payload — esos datos no aparecen en una herramienta privacy-first. Usa un evento por plan.

// página de precios
on('click', '.plan-starter', () => window.logly('event', 'plan_selected_starter'));
on('click', '.plan-pro',     () => window.logly('event', 'plan_selected_pro'));
on('click', '.plan-business',() => window.logly('event', 'plan_selected_business'));

Los verás rankeados en el dashboard. Que el plan más barato gane por 10× no es un problema; que el más caro reciba cero clics normalmente sí.

4. Suscripción a la newsletter

El truco aquí es disparar el evento después de que la suscripción tenga éxito, no al abrir el modal. La mayoría de "altas de newsletter" que reportan las herramientas son personas que abrieron el modal y nunca escribieron un email.

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const ok = await subscribe(form.email.value);
  if (ok) window.logly('event', 'newsletter_subscribed');
});

5. Clic en enlace saliente

Normalmente no obtienes una pageview por un clic que sale del sitio. Dispara un evento antes de que ocurra la navegación.

document.querySelectorAll('a[href^="http"]').forEach((a) => {
  if (a.host !== location.host) {
    a.addEventListener('click', () => {
      window.logly('event', 'outbound_' + a.host.replace(/\W/g, '_'));
    });
  }
});

El nombre del evento incluye el host de destino, así que outbound_github_com y outbound_docs_example_com aparecen separados. Útil para medir tráfico a docs, subdominios de app o sitios de partners.

6. Descarga de lead magnet / PDF

Una descarga de PDF desde un CDN no genera pageview en tu dominio. Sin evento, ese tráfico es invisible.

document.querySelector('a[href$=".pdf"]').addEventListener('click', () => {
  window.logly('event', 'download_pricing_pdf');
});

7. Profundidad de scroll en contenido largo

En un artículo de 4.000 palabras, "¿alguien llegó al final?" es una señal de engagement más honesta que el tiempo en página. Un evento al 75% de scroll, disparado una vez por sesión, basta.

let fired = false;
window.addEventListener('scroll', () => {
  if (fired) return;
  const pct = (window.scrollY + innerHeight) / document.body.scrollHeight;
  if (pct >= 0.75) {
    window.logly('event', 'article_read_75');
    fired = true;
  }
}, { passive: true });

8. Exposición a variante A/B

Si estás probando dos versiones de un hero, dispara un evento en el momento en que se renderiza la variante. Cada variante es un nombre de evento distinto. El conteo en el dashboard de hero_variant_a vs hero_variant_b es tu chequeo de tamaño muestral; emparejar cada uno con su evento de conversión (p. ej. signup_completed) es el test.

const variant = Math.random() < 0.5 ? 'a' : 'b';
renderHero(variant);
window.logly('event', 'hero_variant_' + variant);

Convención de nombres: la regla que paga sus dividendos en seis meses

Los nombres de evento son lo único que verás en el dashboard. Dedica diez segundos al nombre; te ahorrarás una hora después si no lo haces.

• minúsculas, snake_case — signup_completed, no SignupCompleted ni signup-completed.
• objeto_verbo o verbo_objeto, elige uno — elige un lado y mantenlo. Mezclar signup_completed con completed_signup significa que siempre tendrás que recordar cuál usaste.
• Prefijo por superficie — cta_hero_click, cta_pricing_click, cta_footer_click. El prefijo los agrupa de forma natural en una lista alfabética.
• Nunca metas PII ni IDs en el nombre — sin emails, sin IDs de usuario, sin números de pedido. El dashboard muestra el nombre tal cual.

Tres errores que tiran los datos a la basura

Disparar en hover o al abrir el modal. Vas a inflar contadores con gente que nunca convirtió. Dispara en el estado de éxito, no en el intento.

Un evento genérico para todo. Un único button_click sin más desglose no te dice nada. La gracia de un evento personalizado es ser específico.

Olvidarte de quitar eventos de prueba antes del lanzamiento. Cinco entradas test_event se quedarán arriba de tu dashboard durante meses. Envuélvelos en un guard o sácalos antes de deploy.

A dónde te llevan los eventos

Los eventos por separado te dan contadores. Encadenados en una secuencia — landing → clic en CTA → signup iniciado → signup completado — se convierten en un funnel, y dejas de adivinar dónde se cae la gente. Esa es la siguiente pieza del puzzle.