Umami — Analítica respetuosa con la privacidad

Umami

Resumen

Umami es una plataforma de analítica web enfocada en la privacidad — rastrea páginas vistas, visitantes y eventos personalizados sin cookies ni recolección de datos personales. Compatible con GDPR/CCPA de forma predeterminada (no se necesita banner de consentimiento). Se puede autohospedar en tu propia infraestructura, o usar Umami Cloud. Panel limpio, estadísticas en tiempo real y una API para acceso programático. La alternativa open-source #1 a Google Analytics.

Cuándo usarlo

• Necesitas analíticas web sin banners de consentimiento de cookies
• El cumplimiento de GDPR/CCPA es obligatorio
• No confías en Google para tus datos de analítica
• Quieres autohospedar analíticas en tu infraestructura
• Analíticas simples y limpias sin la complejidad de GA4
• Acceso por API a datos de analítica para dashboards/informes

Instrucciones

Configuración autohospedada

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

# O despliegue en un clic en Vercel/Netlify/Railway
# Ver: https://umami.is/docs/install

Agregar script de rastreo

<!-- Agregar en el <head> de tu sitio -->
<script
  defer
  src="https://analytics.mysite.com/script.js"
  data-website-id="tu-website-id"
></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="tu-website-id"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Rastreo de eventos personalizados

// Rastrear eventos personalizados
// Umami expone un objeto global `umami`

// Rastrear clics en botones
document.getElementById("btn-registro")?.addEventListener("click", () => {
  umami.track("click-registro", { plan: "pro", origen: "cabecera" });
});

// Rastrear envíos de formularios
function handleSubmit(formData: FormData) {
  umami.track("envio-formulario", {
    formulario: "contacto",
    asunto: formData.get("asunto"),
  });
}

// Rastrear con React
function PricingCard({ plan }: { plan: string }) {
  return (
    <button
      onClick={() => umami.track("click-precios", { plan })}
      data-umami-event="click-precios"
      data-umami-event-plan={plan}
    >
      Elegir {plan}
    </button>
  );
}

Acceso a la API

// api/analytics.ts — Obtener datos de analítica mediante programación
const UMAMI_URL = "https://analytics.mysite.com";
const UMAMI_TOKEN = process.env.UMAMI_API_TOKEN;

async function getPageViews(websiteId: string, days = 30) {
  const endDate = Date.now();
  const startDate = endDate - days * 24 * 60 * 60 * 1000;

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

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

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

Ejemplos

Ejemplo 1: Agregar analítica respetuosa con la privacidad a un SaaS

Solicitud del usuario: "Agregar analítica a nuestro SaaS sin cookies ni banners de consentimiento."

El agente desplegará Umami, agregará el script de rastreo, configurará eventos personalizados para acciones clave (registro, actualización, uso de funcionalidades) y creará una integración por API para dashboards internos.

Ejemplo 2: Construir un dashboard de analítica personalizado

Solicitud del usuario: "Extraer nuestros datos de Umami en un dashboard personalizado para el equipo de marketing."

El agente usará la API de Umami para obtener páginas vistas, páginas principales, referentes y eventos, y luego los mostrará en un dashboard en React.

Directrices

• Sin cookies = sin banner de consentimiento — compatible con GDPR de forma predeterminada
• Atributo data-umami-event — rastrea clics sin JavaScript
• umami.track(nombre, datos) para eventos personalizados — rastreo de eventos flexible
• Autohospedar para control total — Docker, Vercel, Railway o cualquier hosting con Node.js
• API para acceso programático — construye dashboards e informes personalizados
• Soporte multi-sitio — una instancia de Umami rastrea múltiples sitios web
• Dashboard en tiempo real — ve visitantes activos ahora
• Rastreo de UTM — atribución de campañas funciona automáticamente
• Script ligero — <2KB, no ralentiza tu sitio
• PostgreSQL o MySQL — tu elección para la base de datos backend