Documentación

Analytics (PostHog)

Analytics de producto con PostHog — tracking cliente y servidor, eventos y el dashboard de analytics.

Abrir enChatGPT (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)Cursor (se abre en una pestaña nueva)Analytics de producto con PostHog — tracking cliente y servidor, eventos y el dashboard de analytics.

Motoko Base usa PostHog para analytics de producto. PostHog es independiente de Sentry (errores) — no los mezcles.

Official docs: PostHog documentation

Setup

  1. Crea un proyecto PostHog
  2. Copia la Project API key (captura en el cliente)
  3. Para el dashboard de Analytics (/dashboard/analytics), crea también una Personal API key con Query Read
  4. Define las env vars:
VariableScopePurpose
NEXT_PUBLIC_POSTHOG_PROJECT_TOKENClientEvent capture
NEXT_PUBLIC_POSTHOG_HOSTClientIngest host (US/EU)
POSTHOG_PERSONAL_API_KEYServerHogQL queries
POSTHOG_PROJECT_IDServerProject ID for queries
POSTHOG_HOSTServerAPI host for queries (not ingest)

Sin el project token, analytics está deshabilitado — la app funciona con normalidad.

Client vs server tracking

LayerModuleUse for
Clientsrc/lib/analytics/client.tsBrowser events (sign-in, sign-up)
Serversrc/lib/analytics/server.tsServer actions, webhooks (links, files, billing)

Init del cliente: src/instrumentation-client.ts. El servidor usa un singleton de módulo — fail-open, nunca lanza.

Events

Los nombres de eventos viven en src/lib/analytics/events.ts:

export const ANALYTICS_EVENTS = {
  userSignedUp: "user_signed_up",
  linkCreated: "link_created",
  fileUploaded: "file_uploaded",
  checkoutStarted: "checkout_started",
  // ...
} as const;

Convención: {object}_{past_tense_verb} (minúsculas, guiones bajos).

Add a custom event

  1. Añade el nombre del evento a ANALYTICS_EVENTS en events.ts
  2. Añade propiedades tipadas a AnalyticsEventProperties (opcional)
  3. Captura desde la capa correcta:
// Client component
import { captureClientEvent } from "@/lib/analytics/client";
captureClientEvent(ANALYTICS_EVENTS.linkCreated, { link_id, slug, destination_host });

// Server action
import { captureServerEvent } from "@/lib/analytics/server";
captureServerEvent({ distinctId: userId, event: ANALYTICS_EVENTS.linkCreated, properties: { ... } });

Las propiedades se limpian antes del envío (src/lib/analytics/scrub.ts) — sin contraseñas, tokens ni URLs crudas con secretos.

Analytics dashboard

/dashboard/analytics ejecuta consultas HogQL vía src/lib/analytics/query.ts. Requiere POSTHOG_PERSONAL_API_KEY + POSTHOG_PROJECT_ID. Los resultados se cachean ~60s por usuario.

Where to change this

WhatWhere
Event taxonomysrc/lib/analytics/events.ts
Client capturesrc/lib/analytics/client.ts
Server capturesrc/lib/analytics/server.ts
Config & enable checkssrc/lib/analytics/config.ts
Dashboard queriessrc/lib/analytics/query.ts
Analytics UIsrc/features/analytics/

Environment Variables — todas las env vars de PostHog.