feat(analytics): integrate global Umami tracking and instrument site-wide events

Author: osbgx

.github/workflows/deploy.yml

@@ -36,8 +36,6 @@ jobs:
       - name: Build
         run: npm run build
         env:
-          PUBLIC_UMAMI_SRC: https://cloud.umami.is/script.js
-          PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.PUBLIC_UMAMI_WEBSITE_ID }}
           PUBLIC_WEB3FORMS_ACCESS_KEY: ${{ secrets.PUBLIC_WEB3FORMS_ACCESS_KEY }}
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

README.md

@@ -110,11 +110,10 @@ Crear `.env` en la raíz (no se commitea):
 
 ```env
 PUBLIC_WEB3FORMS_ACCESS_KEY=tu-access-key-aqui
-# Opcional — analytics Umami
-PUBLIC_UMAMI_WEBSITE_ID=
-PUBLIC_UMAMI_SRC=https://cloud.umami.is/script.js
 ```
 
+Umami queda configurado directamente en `src/layouts/BaseLayout.astro` con el tracking code público del sitio.
+
 ---
 
 ## Despliegue

docs/arquitecture.md

@@ -147,7 +147,7 @@ Ver [runbook de la escena](runbooks/minigame.md).
 - Sitemap automático y RSS
 - OG image generada en build (`scripts/generate-og-image.mjs` → `public/og-image.webp`)
 - Accesibilidad: skip link, ARIA, `prefers-reduced-motion`, focus visible
-- Analytics opcional: Umami vía variables `PUBLIC_UMAMI_*`
+- Analytics: Umami global en `BaseLayout` con tracking code público hardcodeado
 
 ## Estándares de desarrollo
 

docs/runbooks/deploy-github-pages.md

@@ -46,8 +46,7 @@ En GitHub: **Actions** → **Deploy to GitHub Pages** → **Run workflow**.
 ## Variables de entorno en CI
 
 - `PUBLIC_WEB3FORMS_ACCESS_KEY`: configurar como secret si se usa Web3Forms.
-- `PUBLIC_UMAMI_WEBSITE_ID`: configurar como variable de Actions si se usa Umami.
-- `PUBLIC_UMAMI_SRC`: queda definido en el workflow como `https://cloud.umami.is/script.js`; no necesita secret.
+- Umami ya queda configurado por defecto con `https://cloud.umami.is/script.js` y el website id del sitio; no necesita secret.
 
 ## Debug
 

docs/runbooks/layouts.md

@@ -18,7 +18,7 @@ Responsabilidades:
 - `Footer` con prop `theme`
 - `SocialDock` (variantes `mobile` y `desktop`) — componente en `src/components/global/SocialDock.astro`
 - Script de scroll reveal (`src/utils/reveal.ts`)
-- Umami opcional si existen `PUBLIC_UMAMI_WEBSITE_ID` y `PUBLIC_UMAMI_SRC`
+- Umami se inyecta globalmente con `https://cloud.umami.is/script.js`, `data-website-id` y `data-domains="osbgx.dev"`
 
 ## Temas
 

src/layouts/BaseLayout.astro

@@ -21,6 +21,8 @@ const pagePath = normalizedBasePath && Astro.url.pathname.startsWith(normalizedB
   ? Astro.url.pathname.slice(normalizedBasePath.length) || '/'
   : Astro.url.pathname;
 const canonicalUrl = pagePath === '/' ? `${siteUrl}/` : `${siteUrl}${pagePath}`;
+const umamiScriptSrc = 'https://cloud.umami.is/script.js';
+const umamiWebsiteId = '6e3a6b76-7d7b-4d38-94f4-dfd2e65fe86e';
 const fullName = 'Osmar Bogarín';
 const jobTitle = 'Data Engineer & Consultant';
 const sameAs = [contactInfo.linkedin, contactInfo.github, contactInfo.instagram, contactInfo.x];
@@ -106,9 +108,35 @@ const ldGraph = JSON.stringify({ '@context': 'https://schema.org', '@graph': [ld
     <meta name="twitter:site" content={contactInfo.xHandle} />
     <meta name="twitter:creator" content={contactInfo.xHandle} />
     <script type="application/ld+json" set:html={ldGraph}></script>
-    {import.meta.env.PUBLIC_UMAMI_WEBSITE_ID && import.meta.env.PUBLIC_UMAMI_SRC && (
-      <script defer src={import.meta.env.PUBLIC_UMAMI_SRC} data-website-id={import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}></script>
-    )}
+    <script defer src={umamiScriptSrc} data-website-id={umamiWebsiteId} data-domains="osbgx.dev"></script>
+    <script is:inline>
+      (() => {
+        if (window.__osbgxAnalyticsReady) return;
+        window.__osbgxAnalyticsReady = true;
+
+        window.osbgxTrack = (eventName, eventData = {}) => {
+          const track = () => window.umami?.track?.(eventName, eventData);
+          if (window.umami?.track) {
+            track();
+            return;
+          }
+          window.setTimeout(track, 600);
+        };
+
+        let firstPageLoad = true;
+        document.addEventListener('astro:page-load', () => {
+          if (firstPageLoad) {
+            firstPageLoad = false;
+            return;
+          }
+          window.osbgxTrack('astro_page_view', {
+            path: window.location.pathname,
+            url: window.location.href,
+            title: document.title,
+          });
+        });
+      })();
+    </script>
   </head>
   <body class="pt-16">
     <a href="#main-content" class="skip-link">Saltar al contenido principal</a>

src/scripts/about.ts

@@ -225,11 +225,16 @@ document.addEventListener('astro:page-load', () => {
   }
 
   document.querySelectorAll('.dev-lore-tab').forEach(tab => {
-    tab.addEventListener('click', () => activateDevLoreCategory(tab.dataset.category || 'all'));
+    tab.addEventListener('click', () => {
+      const category = tab.dataset.category || 'all';
+      (window as any).osbgxTrack?.('about_dev_lore_filter', { category });
+      activateDevLoreCategory(category);
+    });
   });
   document.querySelectorAll('.dev-lore-more').forEach(btn => {
     btn.addEventListener('click', () => {
       const group = btn.closest('.dev-lore-group');
+      (window as any).osbgxTrack?.('about_dev_lore_expand', { group: btn.dataset.group || 'lore' });
       group?.querySelectorAll('.dev-lore-card-extra').forEach(card => card.classList.add('is-visible'));
       btn.classList.add('is-hidden');
       discovery.codex.add(`expanded:${btn.dataset.group || 'lore'}`);
@@ -255,6 +260,7 @@ document.addEventListener('astro:page-load', () => {
     hotspot.addEventListener('click', () => {
       const item = (hotspot as HTMLElement).dataset.roomItem;
       const sectionId = (hotspot as HTMLElement).dataset.targetSection || hotspotReactionMap[item || ''] || 'room';
+      (window as any).osbgxTrack?.('about_room_hotspot_click', { item: item || 'unknown', section: sectionId });
       sfxSelect();
       hotspot.classList.remove('is-active');
       void (hotspot as HTMLElement).offsetWidth;
@@ -313,6 +319,7 @@ document.addEventListener('astro:page-load', () => {
       e.preventDefault();
       const targetId = link.getAttribute('href')?.slice(1);
       if (!targetId) return;
+      (window as any).osbgxTrack?.('about_hero_nav_click', { section: targetId });
       cancelGuidedTour();
       sfxSelect();
       nav.openSection(targetId, { scroll: true });
@@ -336,6 +343,7 @@ document.addEventListener('astro:page-load', () => {
         cancelGuidedTour();
         sfxSelect();
         const targetId = link.getAttribute('href').slice(1);
+        (window as any).osbgxTrack?.('about_quick_nav_click', { section: targetId });
         const section = document.getElementById(targetId);
         if (section) {
           const trigger = section.querySelector<HTMLElement>('.accordion-trigger');
@@ -361,6 +369,7 @@ document.addEventListener('astro:page-load', () => {
     const mobileMapToggle = document.querySelector<HTMLElement>('[data-mobile-map-toggle]');
     mobileMapToggle?.addEventListener('click', () => {
       const open = !quickNav.classList.contains('is-mobile-open');
+      (window as any).osbgxTrack?.('about_mobile_map_toggle', { open });
       quickNav.classList.toggle('is-mobile-open', open);
       mobileMapToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
       mobileMapToggle.textContent = open ? 'CLOSE' : 'MAP';
@@ -381,13 +390,15 @@ document.addEventListener('astro:page-load', () => {
   const quietReadButton = document.querySelector<HTMLElement>('[data-quiet-read]');
   quietReadButton?.addEventListener('click', () => {
     const next = !document.body.classList.contains('quiet-read');
+    (window as any).osbgxTrack?.('about_quiet_read_toggle', { enabled: next });
     setQuietRead(next);
     updateBubble(next ? 'Quiet Read activo. Menos ruido, misma historia.' : 'Quiet Read desactivado. Los efectos vuelven al save file.');
     updateAvatarStatus(next ? 'LV.23 · QUIET READ · LOW FX' : 'LV.23 · FULL FX · SAVE FILE ACTIVE');
   });
 
   /* ── 21. Reset ── */
   document.getElementById('discovery-reset')?.addEventListener('click', () => {
+    (window as any).osbgxTrack?.('about_save_reset');
     store.reset();
     try { window.localStorage.removeItem('about-mvp-v3-intro-dismissed'); } catch (_) { /* ignore */ }
     try { window.localStorage.removeItem(CAT_CLICKS_KEY); } catch (_) { /* ignore */ }

src/scripts/about/intro.ts

@@ -65,12 +65,14 @@ export function initIntroInteractions(options: IntroOptions) {
     btn.addEventListener('click', () => {
       const action = btn.dataset.startAction;
       if (action === 'fast') {
+        (window as any).osbgxTrack?.('about_intro_fast_read');
         const fastPanel = document.getElementById('press-start-fast');
         const introActions = btn.closest('.press-start-actions');
         if (fastPanel) fastPanel.hidden = false;
         if (introActions) introActions.hidden = true;
         updateBubble('fast');
       } else {
+        (window as any).osbgxTrack?.('about_intro_enter_profile', { action });
         closePressStartOverlay({ openRoom: action === 'fast-room' });
       }
     });

src/scripts/about/section-nav.ts

@@ -86,6 +86,7 @@ export function initSectionNav(
     if (indicator) indicator.textContent = isOpen ? '▼' : '▶';
     if (isOpen) {
       const sid = trigger.parentElement?.id;
+      if (sid) (window as any).osbgxTrack?.('about_section_open', { section: sid });
       const wasNew = sid ? !discovery.sections.has(sid) : false;
       deps.sfxOpen(sid);
       const rect = trigger.getBoundingClientRect();
@@ -104,6 +105,7 @@ export function initSectionNav(
   function openSection(sectionId: string, options: { scroll?: boolean } = {}) {
     const section = document.getElementById(sectionId);
     if (!section) return;
+    (window as any).osbgxTrack?.('about_section_navigate', { section: sectionId, scroll: Boolean(options.scroll) });
     const trigger = section.querySelector<HTMLElement>('.accordion-trigger');
     const panel = section.querySelector('.accordion-panel');
     if (trigger && panel && !panel.classList.contains('open')) toggle(trigger, true);