← Volver a tutoriales

PostHog para medir el embudo de tu MVP sin tocar el backend

Aprende a instalar PostHog en tu MVP, crear un evento de registro y visualizar el embudo de conversión sin escribir una sola línea de backend.

Si estás lanzando un MVP, necesitas saber cuántos usuarios llegan al registro, activan su cuenta y hacen la acción clave. PostHog te entrega análisis de producto, embudos y grabaciones de sesión con una sola herramienta. Lo mejor: no necesitas configurar un servidor ni pagar un plan caro para empezar. En este tutorial vas a conectar PostHog a tu app, enviar un evento de registro y ver el embudo de conversión en menos de 30 minutos.

Qué es PostHog y por qué usarlo en tu MVP

PostHog es una plataforma de análisis de producto open source. A diferencia de Google Analytics, está pensada para equipos de producto: mides eventos, creas embudos, ves grabaciones de sesión y activas funciones con feature flags. Para un MVP, la ventaja es clara: puedes instalar el snippet en tu frontend y empezar a recibir datos sin configurar un backend. Además, su plan gratuito incluye 1 millón de eventos al mes, suficiente para validar una idea.

No lo uses si tu MVP es una API pura sin interfaz web o móvil, porque el SDK de frontend no capturará eventos automáticamente. En ese caso, necesitarías el SDK de Python, Node o Go. Pero para una landing page, una app web o una app móvil híbrida, es perfecto.

Qué necesitas antes de empezar

  • Una cuenta gratuita en PostHog Cloud (posthog.com) o una instancia self-hosted con Docker.
  • Un proyecto web con HTML, React, Vue o similar. Sirve también una app móvil con React Native o Flutter.
  • Acceso al código de tu frontend para pegar el snippet.
  • Un navegador con consola de desarrollador para verificar que los eventos se envían.

Paso a paso: mide el embudo de registro de tu MVP

  1. Crea un proyecto en PostHog. Ve a app.posthog.com, inicia sesión y crea un proyecto nuevo. Copia el API key que aparece en Project Settings > API Keys.
  2. Instala el snippet en tu frontend. En la página de configuración de PostHog, elige “JavaScript” y copia el snippet con tu API key. Pégalo en la etiqueta <head> de tu HTML o en el index.html de tu framework. Si usas React, puedes instalar el paquete posthog-js con npm y llamar a posthog.init en el inicio de tu app.
  3. Envía un evento de registro. Cuando un usuario haga clic en tu botón “Registrarse”, llama a posthog.capture('signup'). Si el registro ocurre después de confirmar el email, captura ese evento en el frontend cuando la API devuelva éxito. Ejemplo:
    fetch('/api/register', { method: 'POST', body: JSON.stringify({ email }) })
      .then(res => res.json())
      .then(() => posthog.capture('signup_complete'));
  4. Crea un embudo en PostHog. Ve a la pestaña “Funnels” y haz clic en “New”. Agrega dos pasos: primero el evento signup y segundo el evento signup_complete. Define la ventana de tiempo, por ejemplo, 7 días. PostHog te mostrará cuántos usuarios pasan de un paso al otro.
  5. Verifica que los eventos llegan. Abre la consola de tu navegador y escribe posthog.capture('test_event'). Ve a “Events” en PostHog y confirma que aparece. Si no, revisa que el snippet esté antes de tu código y que no haya bloqueadores de anuncios interfiriendo.
  6. Comparte el embudo con tu equipo. En el embudo, haz clic en “Share” y copia el enlace. Así tu socio o cofundador puede ver la conversión sin acceso a la cuenta.

Ejemplo concreto: tienda de velas artesanales

Imagina que tienes una tienda en línea de velas artesanales y quieres saber cuántos visitantes llegan a comprar. En tu página de producto, captura product_viewed; en el carrito, cart_added; y en el botón de pagar, checkout_started. Con PostHog creas un embudo con esos tres pasos. Si ves que el 80% abandona entre product_viewed y cart_added, el problema puede ser el precio o la descripción. Si el abandono está entre cart_added y checkout_started, revisa el flujo de pago. Así tomas decisiones con datos, no con corazonadas.

Errores frecuentes al usar PostHog en un MVP

  • Instalar el snippet después de tu código. El snippet debe cargarse primero para que la función posthog.capture exista. Si lo pones al final del body, los eventos tempranos se pierden.
  • No probar en modo local. En desarrollo, usa posthog.init('YOUR_KEY', { debug: true }) para ver en consola si los eventos se envían.
  • Crear demasiados eventos. Al principio, limítate a 3-5 eventos clave: registro, activación, acción principal. No necesitas capturar cada clic.
  • Olvidar el contexto. Si tu MVP es una app móvil, usa el SDK de React Native o Flutter. No intentes usar el snippet web en una WebView porque los eventos no se asociarán correctamente.

Cuándo no usar PostHog y qué hacer después

Si tu producto es una API pura o un script del lado del servidor sin interfaz, PostHog no es la herramienta más directa. Prefiere un servicio como Plausible para visitas simples o implementa un evento personalizado con tu backend. Pero si ya tienes una interfaz, PostHog es gratis y rápido de integrar. El siguiente paso es configurar un feature flag con PostHog para desplegar una nueva función solo para un porcentaje de usuarios. Eso te permite validar cambios sin arriesgar la experiencia de todos.

Con este tutorial ya sabes cómo medir el embudo de tu MVP con PostHog. No necesitas un equipo de datos ni escribir backend. Solo pega un snippet, captura eventos y mira el embudo. Empieza con un evento hoy y en una semana tendrás datos para decidir qué mejorar.