Documentação

Analytics (PostHog)

Analytics de produto com PostHog — tracking no cliente e no servidor, eventos e o dashboard de analytics.

Abrir emChatGPT (abre em uma nova aba)Claude (abre em uma nova aba)Cursor (abre em uma nova aba)Analytics de produto com PostHog — tracking no cliente e no servidor, eventos e o dashboard de analytics.

O Motoko Base usa PostHog para analytics de produto. O PostHog é separado do Sentry (erros) — não misture os dois.

Official docs: PostHog documentation

Setup

  1. Crie um projeto PostHog
  2. Copie a Project API key (captura no cliente)
  3. Para o dashboard de Analytics (/dashboard/analytics), crie também uma Personal API key com Query Read
  4. Defina as 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)

Sem o project token, analytics fica desabilitado — o app funciona normalmente.

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 do cliente: src/instrumentation-client.ts. O servidor usa um singleton de módulo — fail-open, nunca lança.

Events

Os nomes de eventos ficam em src/lib/analytics/events.ts:

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

Convenção: {object}_{past_tense_verb} (minúsculas, underscores).

Add a custom event

  1. Adicione o nome do evento a ANALYTICS_EVENTS em events.ts
  2. Adicione propriedades tipadas a AnalyticsEventProperties (opcional)
  3. Capture na camada correta:
// 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: { ... } });

As propriedades são limpas antes do envio (src/lib/analytics/scrub.ts) — sem senhas, tokens ou URLs brutas com segredos.

Analytics dashboard

/dashboard/analytics executa queries HogQL via src/lib/analytics/query.ts. Requer POSTHOG_PERSONAL_API_KEY + POSTHOG_PROJECT_ID. Os resultados são cacheados ~60s por usuário.

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 as env vars do PostHog.