Custom analytics for goal metrics

.env.example

@@ -0,0 +1,8 @@
+# Custom Analytics — Supabase connection
+# Create a free project at https://supabase.com, run src/analytics/setup.sql in the
+# Supabase SQL Editor, then copy the values from Project Settings > API.
+#
+# The PUBLIC_ prefix exposes these values to the browser at runtime.
+# The anon key is safe to expose — Supabase RLS policies control what it can access.
+PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
+PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

.github/workflows/preview-on-pages.yml

@@ -34,6 +34,9 @@ jobs:
         run: pnpm install
       - name: Build with Astro
         id: build
+        env:
+          PUBLIC_SUPABASE_URL: ${{ secrets.PUBLIC_SUPABASE_URL }}
+          PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.PUBLIC_SUPABASE_ANON_KEY }}
         run: NODE_ENV=github VITE_GITHUB_BASE_PATH=${{ steps.pages.outputs.base_path }} SKIP_LINK_VALIDATION=true pnpm astro build \
             --site "${{ steps.pages.outputs.origin }}"
       - name: Upload static files as artifact

astro.config.mjs

@@ -80,6 +80,17 @@ async function config() {
           },
         },
       },
+      {
+        name: 'custom-analytics',
+        hooks: {
+          'astro:config:setup': ({ injectScript }) => {
+            // Tracks page views, clicks, scroll depth, and form interactions on every page.
+            // Dynamic import so analytics loads after the main page bundle without blocking render.
+            // Source: src/analytics/tracker.ts (see src/analytics/README.md).
+            injectScript('page', `void import('/src/analytics/tracker.ts');`);
+          },
+        },
+      },
       starlight({
         editLink: {
           baseUrl: 'https://github.com/commerce-docs/microsite-commerce-storefront/edit/release/',

package.json

@@ -97,6 +97,7 @@
     "@graphiql/react": "0.28.2",
     "@graphiql/toolkit": "0.11.1",
     "@playform/compress": "^0.2.2",
+    "@supabase/supabase-js": "^2.105.1",
     "@types/hast": "^3.0.4",
     "@types/lodash": "^4.17.21",
     "@types/react": "19.2.14",
@@ -126,6 +127,7 @@
     "prettier-plugin-astro": "^0.14.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "recharts": "^3.8.1",
     "regenerator-runtime": "^0.14.1",
     "rehype": "^13.0.2",
     "sharp": "^0.34.5",