---
title: Analytics
description: >-
  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.

:::note
As análises são opcionais. Sem um bloco `analytics`, o Blume não injeta nada.
:::

## Vercel Web Analytics

Defina `vercel: true` para adicionar o [Vercel Web Analytics](https://vercel.com/docs/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.

```ts blume.config.ts lineNumbers
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](https://developers.cloudflare.com/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.

```ts blume.config.ts lineNumbers
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](https://posthog.com). 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.

```ts blume.config.ts lineNumbers
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 [#custom-scripts]

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).

```ts blume.config.ts lineNumbers
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 [#options]

| Opção | Padrão | Descrição |
| --- | --- | --- |
| `vercel` | `false` | Adiciona o Vercel Web Analytics (apenas em deploys na Vercel). |
| `cloudflare.token` | — | Token do site no Cloudflare Web Analytics (configuração manual). Ativa o beacon quando definido. |
| `posthog.key` | — | Chave de API do projeto PostHog. Ativa o PostHog quando definida. |
| `posthog.host` | `https://us.i.posthog.com` | Host de ingestão do PostHog (EU Cloud ou auto-hospedado). |
| `scripts[].src` | — | URL do script externo. Mutuamente exclusivo com `content`. |
| `scripts[].content` | — | Corpo do script inline. Mutuamente exclusivo com `src`. |
| `scripts[].strategy` | — | `async` ou `defer` para um script externo. |
| `scripts[].attributes` | — | Atributos HTML adicionais aplicados à tag `<script>`. |

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](/docs/deployment).