Analytics

Análises web próprias — Vercel Web Analytics, Cloudflare Web Analytics, PostHog ou qualquer script personalizado — configuradas a partir do blume.config.ts.

O Blume injeta as análises para você a partir de um único bloco analytics no blume.config.ts. O Vercel Web Analytics, o Cloudflare Web Analytics e o PostHog têm suporte nativo, e uma válvula de escape scripts cobre todos os outros provedores — Plausible, Fathom, Google Analytics, Umami e os demais.

As análises são carregadas apenas em builds de produção. Os scripts são emitidos pelo blume build, nunca pelo blume dev, então o tráfego local nunca chega aos seus painéis e você não precisa de um projeto de “desenvolvimento” separado.

Vercel Web Analytics

Defina vercel: true para adicionar o Vercel Web Analytics. O Blume injeta o script nativo da Vercel, que é servido a partir do seu próprio domínio assim que o Web Analytics estiver ativado para o projeto no painel da Vercel.

analytics: {
  vercel: true,
}

Não são necessárias chaves — o script envia os dados para o projeto em que foi feito o deploy. Isso só coleta dados em deploys na Vercel, onde o endpoint /_vercel/insights existe.

Cloudflare Web Analytics

O Cloudflare Web Analytics tem duas formas de configuração, e só uma delas precisa de config.

Zona com proxy (configuração automática). Se a Cloudflare serve o seu site — um Worker com domínio personalizado, Pages ou qualquer zona com a nuvem laranja ativada —, ative o Web Analytics para a zona no painel da Cloudflare e pronto. A Cloudflare injeta o beacon na edge, então deixe analytics.cloudflare sem definir; configurá-lo também faria cada visualização de página ser contada duas vezes.

Qualquer outro host (configuração manual). Para um site que a Cloudflare não faz proxy, adicione o site em Web Analytics no painel, copie o token do snippet JS fornecido (o token dentro de data-cf-beacon) e passe-o aqui. O Blume renderiza a mesma tag de beacon que o snippet.

analytics: {
  cloudflare: {
    token: "0123456789abcdef0123456789abcdef",
  },
}

O token pode ser enviado para o navegador com segurança — ele só identifica o site. O beacon rastreia sozinho as mudanças no histórico, então as navegações do roteador do cliente são contadas sem nenhuma configuração extra.

PostHog

Informe a sua chave de API do projeto para adicionar o PostHog. O host padrão é o PostHog Cloud US; defina host para o EU Cloud (https://eu.i.posthog.com) ou para uma instância auto-hospedada.

analytics: {
  posthog: {
    key: "phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    host: "https://us.i.posthog.com", // optional, this is the default
  },
}

A chave de API do projeto pode ser enviada para o navegador com segurança — é uma chave pública, apenas de escrita.

Scripts personalizados

Use scripts para carregar qualquer outro provedor de análises. Cada entrada renderiza uma tag <script> e precisa definir exatamente um entre src (externo) ou content (inline).

analytics: {
  scripts: [
    // Plausible
    {
      src: "https://plausible.io/js/script.js",
      strategy: "defer",
      attributes: { "data-domain": "example.com" },
    },
    // Fathom
    {
      src: "https://cdn.usefathom.com/script.js",
      strategy: "defer",
      attributes: { "data-site": "ABCDEFG" },
    },
    // An inline snippet
    {
      content: "console.log('analytics ready')",
    },
  ],
}

attributes é um mapa de atributos HTML adicionais (data-*, id, …) aplicados à tag, e strategy adiciona async ou defer a scripts externos.

Opções

Os três podem ser combinados — ative a Vercel, o PostHog e scripts personalizados juntos. Para fazer o deploy do seu site já construído, veja Deploy.