Configurar analytics centrados en la… | LaunchFast
LaunchFast Logo LaunchFast
Blog
EN DE ES
704 palabras 4 min de lectura

Configurar analytics centrados en la privacidad con Tinybird en Astro

Aprende cómo implementar analytics web en tiempo real y centrados en la privacidad en tu aplicación Astro usando Tinybird. Despliega una plataforma de analytics completa en minutos, sin cookies ni seguimiento de terceros.

Rishi Raj Jain
Rishi Raj Jain Autor
Configurar analytics centrados en la privacidad con Tinybird en Astro

Las soluciones tradicionales de analytics web como Google Analytics tienen inconvenientes importantes: preocupaciones de privacidad, problemas de cumplimiento del RGPD, cargas lentas de página por scripts de terceros y retos de propiedad de los datos. Tinybird ofrece una alternativa centrada en la privacidad que te da analytics en tiempo real sin cookies, se ejecuta en tu infraestructura y proporciona información instantánea impulsada por ClickHouse.

Sponsored

Kits de inicio de alta calidad con flujo de autenticación integrada (Auth.js), carga de objetos (AWS, Clouflare R2, Firebase Storage, Supabase Storage), pagos integrados (Stripe, LemonSqueezy), flujo de verificación de correo electrónico (Resend, Postmark, Sendgrid) y mucho más . Compatible con cualquier base de datos (Redis, Postgres, MongoDB, SQLite, Firestore).

Get all 3 kits Bundle ↗

One-time license · Lifetime updates

En esta guía, aprenderás a configurar Tinybird con su plantilla de Web Analytics y añadir el script de seguimiento en tu aplicación Astro para empezar a recopilar métricas en tiempo real.

Requisitos previos

Necesitarás lo siguiente:

Configurar un workspace de Tinybird

Primero, autentícate con Tinybird y crea o selecciona un workspace. Ejecuta los siguientes comandos:

Terminal window
# (macOS/Linux) Instala la CLI de Tinybird si aún no lo has hecho
curl https://tinybird.co | sh


# (Windows) Instala la CLI de Tinybird si aún no lo has hecho
# powershell -ExecutionPolicy ByPass -c "irm https://tinybird.co | iex"


# Inicia sesión en Tinybird (abre el navegador para autenticarte)
tb login


# Esto te pedirá que selecciones o crees un workspace
# Elige una región cercana a tus usuarios para obtener el mejor rendimiento

Tras la autenticación, verás tus workspaces disponibles o se te pedirá que crees uno nuevo. Selecciona el workspace que quieras usar para analytics.

Desplegar la plantilla de Web Analytics

Tinybird proporciona una plantilla preconstruida que incluye todas las fuentes de datos, pipes y endpoints que necesitas. Despliégala con un solo comando:

Terminal window
# Despliega la plantilla de Web Analytics en tu workspace
tb --cloud deploy \
--template https://github.com/tinybirdco/web-analytics-starter-kit/tree/main/tinybird \
--allow-destructive-operations

Este comando hace varias cosas:

  1. Crea fuentes de datos: configura la tabla de eventos para almacenar datos de analytics
  2. Despliega pipes de transformación: procesa eventos en bruto en métricas agregadas
  3. Crea endpoints de API: expone consultas SQL como APIs REST
  4. Genera tokens: crea tokens de autenticación para ingesta y consultas

El despliegue se completa en unos segundos.

Añadir el script de seguimiento a tu layout de Astro

Ahora vamos a añadir el script de seguimiento de Tinybird a tu aplicación Astro. El script es ligero (<9 KB gzipped), se carga de forma asíncrona y no bloquea el renderizado de la página.

Abre la consola de Tinybird y copia el script de seguimiento con el botón verde Copy script.

Configuración de analytics de Tinybird en el panel del proyecto Astro

A continuación, abre tu archivo de layout principal (normalmente src/layouts/Layout.astro) y añade el script de seguimiento en la sección <head>:

src/layouts/Layout.astro
---
// ...
---


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="generator" content={Astro.generator} />
    <!-- Tinybird Analytics -->
    <script
      defer
      data-host="https://api.tinybird.co"
      src="https://unpkg.com/@tinybirdco/flock.js"
      data-token="value-populates-while-copying-from-dashboard"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

El atributo defer garantiza que el script se cargue de forma asíncrona sin bloquear el renderizado de la página.

Ver tus analytics en el panel alojado

Tinybird proporciona un panel de analytics preconstruido donde puedes introducir tu token del panel para ver las métricas.

Comprobemos que los eventos se están registrando. Inicia tu servidor de desarrollo de Astro:

Terminal window
npm run dev

Visita tu sitio en http://localhost:4321 y navega entre páginas. Luego revisa tus analytics:

  1. Abre el panel de analytics (mediante el botón View Dashboard en la consola)
  2. Deberías ver métricas en tiempo real:
    • Páginas vistas incrementándose
    • Tu ubicación apareciendo en el mapa
    • Información del navegador y del dispositivo
Eventos de analytics de Tinybird llegando a la aplicación Astro

Los eventos se envían de inmediato y aparecen en tu panel en cuestión de segundos. Si ves al menos una página vista, ¡ya está todo listo!

Conclusión

Ya has habilitado analytics en tiempo real y centrados en la privacidad en tu app Astro con Tinybird. Te permite hacer seguimiento de páginas vistas sin cookies, eventos personalizados flexibles y un script ligero. Para casos de uso avanzados o informes, explora la documentación de Tinybird.

Si tienes preguntas o comentarios, no dudes en escribirme en Twitter.

Sigue leyendo