Hoy quiero contarte sobre Migas, otra de las herramientas que he desarrollado recientemente: un tracker de visitas muy sencillo.
Ahora que tengo varios proyectos publicados me vendría bien saber de dónde vienen las visitas, qué visitan más y en qué cantidad lo hacen, así que he pensado en añadir un sistema de tracking a alguno de los proyectos que tengo ya online. Antes de ponerme a montar nada he estado analizando lo que necesitaba.
Estos eran los requisitos de salida:
- Necesitaba una herramienta muy sencilla.
- Que fuera fácil de instalar en los distintos proyectos que tengo.
- No hacía falta que estuviera en ningún hosting podía residir perfectamente en local.
- Tenía que permitirme ver todas las visitas de todos los proyectos a la vez.
- Acoplarse bien en el stack de tecnologías que uso para los proyectos.
- Que los datos fuesen solo míos y saber qué datos realmente estoy recopilando para no ser intrusivo con el visitante.
Por qué no X
Estuve mirando opciones ya existentes y fui descartándolas todas.
¿Por qué no Google Analytics? Usar Google Analytics supone una opción sobredimensionada y además implica compartir mis datos con terceros. Con Migas, los datos los tengo solo yo.
¿Por qué no Plausible / Fathom? Son buenas opciones pero tienen coste mensual. Migas es gratuito porque corre en infraestructura que ya tengo.
¿Por qué no Matomo? Matomo es potente pero pesado para lo que necesito. Un servidor PHP y un fichero de texto son suficientes.
¿Por qué JSONL y no una base de datos? Un fichero de log append-only no tiene dependencias, no requiere backups adicionales, y para el volumen de un proyecto personal es perfectamente manejable. Si algún día las visitas escalan, la migración a SQLite o similar es directa.
Así que acabé tomando la decisión de montar Migas: un sistema de analytics minimalista, autoalojado, que cabe en tres ficheros PHP y un par de componentes Vue.
Qué es Migas
Voy a ponerme un poco técnico el resto de la entrada, que es un post para gafotas y amigos de las teclas pero creo que merece la pena contarlo. Espero que este tipo de contenidos os animen a montar vuestras propias herramientas.
Migas tiene tres piezas independientes:
1 El tracker
Es un módulo PHP portable que se copia en cualquier proyecto web. Expone varios endpoints:
POST /tracker/log.php— recibe un evento de visita desde la SPA y lo guarda en un fichero de log JSONL.GET /tracker/read.php— devuelve el log completo, protegido con unBearer token.POST /tracker/flush.php— descarga los datos a local y vacía el log.
Este tracker no guarda IPs. No usa cookies. No instala nada en el navegador del visitante. El registro de cada visita tiene este aspecto:
{
"ts": "2026-05-28T18:32:01Z",
"path": "/mix/01",
"referrer": "",
"screen": "1920x1080",
"lang": "es",
"ua": "Mozilla/5.0..."
}
2 El viewer
Es una SPA en Vue 3 que actúa como panel de control central. Se conecta a los trackers de todos tus proyectos a través de un proxy PHP que mantiene los tokens fuera del bundle JavaScript. Desde ahí puedes ver las visitas de cada proyecto, filtrar por ruta o fecha, y paginar la tabla.
3 La app
Es opcional y sirve para tener el viewer por comodidad en una app de escritorio; ejecutas un .exe y tienes la consola de visitas abierta.
Cómo funciona
El flujo completo es:
SPA del proyecto → POST /tracker/log.php → visits.log
↑ Bearer token
viewer (local) → /api/fetch.php (proxy) → GET /tracker/read.php
La SPA llama a log.php en el mismo servidor donde está desplegada. log.php valida que el origen esté en la lista de dominios permitidos, añade el timestamp y el user agent, y hace un append al fichero de log.
El viewer corre en local. Cuando seleccionas un proyecto, su proxy PHP llama a read.php con el token secreto y devuelve el JSONL. Los tokens nunca llegan al navegador.
Por decirlo brevemente:
- Instalas en el servidor de tu proyecto el bloque del tracker.
- Añades en tu proyecto las llamadas al tracker.
- Configuras un JSON con los datos de tu proyecto a trackear en el viewer.
- Accedes a los resultados ejecutando el viewer en local en modo desarrollo u opcionalmente usando el viewer en formato app
.exede Electron que es más cómodo.
📌 Tienes unas instrucciones completas de instalación en el README.md del proyecto en GitHub.
Llamar al tracker desde la SPA
Lo más fácil para trackear visitas desde cualquier Vue SPA es usar un composable o una llamada directa al montar la app:
// src/composables/use-tracker.js
export function useTracker() {
function track(path) {
navigator.sendBeacon(
"/tracker/log.php",
JSON.stringify({
path,
referrer: document.referrer,
screen: `${screen.width}x${screen.height}`,
lang: navigator.language,
}),
);
}
return { track };
}
Cada llamada del router envía al log el dato de navegación
// En App.vue o router/index.js
router.afterEach((to) => {
navigator.sendBeacon(
"/tracker/log.php",
JSON.stringify({
path: to.path,
referrer: document.referrer,
screen: `${screen.width}x${screen.height}`,
lang: navigator.language,
}),
);
});
sendBeacon es no bloqueante: el navegador envía la petición aunque el usuario esté navegando a otra página, sin añadir latencia a la experiencia.
Qué se ve en el viewer
El dashboard es sencillo, tiene dos vistas, una con un resumen de todos los proyectos trackeados y una lista de las últimas visitas sin filtrar de todos los proyectos.
Pulsando en una de las cards de resumen de un proyecto, accedes a una vista en detalle con algunas estadísticas de páginas más visitadas y una tabla con los logs cargados.
La tabla muestra: ruta, timestamp, referrer, resolución, idioma y user agent. Hay filtros por ruta y por rango de fechas, y paginación para logs con muchas entradas.
Conclusión
Y eso es justo lo que quería: un tracker sencillo para ver qué páginas funcionan, detectar de dónde viene el tráfico, confirmar que los deploys llegan a los usuarios. Sin dashboards de cinco niveles y sin ceder datos a terceros.
El código está en github.com/Katamo/migas si te animas a usarlo o adaptarlo, adelante.