Umami

O que Umami faz?

Visão Geral

Umami é uma plataforma de análise web focada em privacidade — rastreia visualizações de página, visitantes e eventos personalizados sem cookies ou coleta de dados pessoais. Conformidade GDPR/CCPA por padrão (sem necessidade de banner de consentimento). Pode ser auto-hospedada em sua própria infraestrutura ou usar o Umami Cloud. Painel limpo, estatísticas em tempo real e uma API para acesso programático. A alternativa open-source número 1 ao Google Analytics.

Quando Usar

• Precisa de análise web sem banners de consentimento de cookies
• Conformidade GDPR/CCPA é obrigatória
• Não confia no Google com seus dados de análise
• Quer auto-hospedar análise em sua infraestrutura
• Análise simples e limpa sem a complexidade do GA4
• Acesso via API a dados de análise para dashboards/relatórios

Instruções

Configuração Auto-Hospedada

# Docker Compose
git clone https://github.com/umami-software/umami.git
cd umami
docker compose up -d

# Ou implantação com um clique para Vercel/Netlify/Railway
# Veja: https://umami.is/docs/install

Adicionar Script de Rastreamento

<!-- Adicione ao <head> do seu site -->
<script
  defer
  src="https://analytics.mysite.com/script.js"
  data-website-id="seu-id-de-website"
></script>

// Next.js — app/layout.tsx
import Script from "next/script";

 export default function RootLayout({ children }) {
   return (
     <html>
       <head>
         <Script
           defer
           src="https://analytics.mysite.com/script.js"
           data-website-id="seu-id-de-website"
         />
       </head>
       <body>{children}</body>
     </html>
   );
 }

Rastreamento de Eventos Personalizados

// Rastrear eventos personalizados
// Umami expõe um objeto global `umami`

// Rastrear cliques em botões
document.getElementById("btn-cadastro")?.addEventListener("click", () => {
  umami.track("clique-cadastro", { plano: "pro", origem: "cabecalho" });
});

// Rastrear envios de formulário
function handleSubmit(formData: FormData) {
  umami.track("envio-formulario", {
    formulario: "contato",
    assunto: formData.get("assunto"),
  });
}

// Rastrear com React
function PricingCard({ plano }: { plano: string }) {
  return (
    <button
      onClick={() => umami.track("clique-preco", { plano })}
      data-umami-event="clique-preco"
      data-umami-event-plano={plano}
    >
      Escolher {plano}
    </button>
  );
}

Acesso à API

// api/analytics.ts — Buscar dados de análise programaticamente
const UMAMI_URL = "https://analytics.mysite.com";
const UMAMI_TOKEN = process.env.UMAMI_API_TOKEN;

 async function getPageViews(websiteId: string, dias = 30) {
   const dataFim = Date.now();
   const dataInicio = dataFim - dias * 24 * 60 * 60 * 1000;

   const res = await fetch(
     `${UMAMI_URL}/api/websites/${websiteId}/pageviews?startAt=${dataInicio}&endAt=${dataFim}&unit=day`,
     { headers: { Authorization: `Bearer ${UMAMI_TOKEN}` } }
   );
   return res.json();
 }

 async function getTopPages(websiteId: string) {
   const dataFim = Date.now();
   const dataInicio = dataFim - 7 * 24 * 60 * 60 * 1000;

   const res = await fetch(
     `${UMAMI_URL}/api/websites/${websiteId}/metrics?startAt=${dataInicio}&endAt=${dataFim}&type=url`,
     { headers: { Authorization: `Bearer ${UMAMI_TOKEN}` } }
   );
   return res.json();  // [{ x: "/precos", y: 1234 }, ...]
 }

Exemplos

Exemplo 1: Adicionar análise amigável à privacidade a um SaaS

Prompt do usuário: "Adicione análise ao nosso SaaS sem cookies ou banners de consentimento."

O agente implantará Umami, adicionará o script de rastreamento, configurará eventos personalizados para ações-chave (cadastro, upgrade, uso de funcionalidades) e criará uma integração via API para dashboards internos.

Exemplo 2: Construir um dashboard de análise personalizado

Prompt do usuário: "Puxe nossos dados do Umami para um dashboard personalizado para a equipe de marketing."

O agente usará a API do Umami para buscar visualizações de página, páginas principais, referenciadores e eventos, e os exibirá em um dashboard React.

Diretrizes

• Sem cookies = sem banner de consentimento — compatível com GDPR por padrão
• Atributo data-umami-event — rastreie cliques sem JavaScript
• umami.track(nome, dados) para eventos personalizados — rastreamento flexível de eventos
• Auto-hospede para controle total — Docker, Vercel, Railway ou qualquer host Node.js
• API para acesso programático — construa dashboards e relatórios personalizados
• Suporte a múltiplos sites — uma instância Umami rastreia vários sites
• Dashboard em tempo real — veja visitantes ativos agora mesmo
• Rastreamento UTM — atribuição de campanha funciona automaticamente
• Script leve — <2KB, não deixa seu site mais lento
• PostgreSQL ou MySQL — sua escolha para o banco de dados backend