Capture marketing source on all landing routes

captureGclid only ran inside PublicLayout's effect, which mounts on
/figures, /themes, /about, /contact. Shortcut redirects in _redirects
target / and /de/, neither of which ever called it. Paid clicks were
silently bucketed as 'direct'.

- captureGclid() moves to index.tsx module load so it runs before the
  router can strip URL params with any catch-all redirect.
- The catch-all redirect now preserves location.search instead of
  dropping it, so unmatched paths still carry the tag forward.
- Allowlist (client + both workers + dashboard color map) gains two
  campaign-variant labels so A/B comparisons render as separate rows.

Author: michael-chipmates

client/src/App.tsx

@@ -3,7 +3,8 @@ import {
   createBrowserRouter,
   RouterProvider,
   Navigate,
-  Outlet
+  Outlet,
+  useLocation
 } from 'react-router-dom';
 import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
@@ -66,6 +67,14 @@ declare global {
   }
 }
 
+// Catch-all redirect that preserves the current URL's search string. Default
+// <Navigate to="/" /> drops query params, which would lose utm tags from
+// shortcut redirects (e.g. /sp/de1 → /de/?utm_source=spotify_a → catch-all).
+function NavigateKeepingSearch({ to }: { to: string }): React.ReactElement {
+  const { search } = useLocation();
+  return <Navigate to={{ pathname: to, search }} replace />;
+}
+
 function App(): React.ReactElement {
   // Initialize from localStorage hint (synchronous) to avoid login flash on refresh
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(
@@ -422,7 +431,7 @@ function App(): React.ReactElement {
         },
         {
           path: "*",
-          element: <Navigate to="/" replace />
+          element: <NavigateKeepingSearch to="/" />
         }
       ]
     }

client/src/components/public/PublicLayout.tsx

@@ -2,20 +2,15 @@
 // Provides: language context, navbar, footer, breadcrumbs, scroll override
 // Remove this file when stripping marketing pages from a fork
 
-import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { PublicLangProvider } from './PublicLangContext';
 import PublicNavbar from './PublicNavbar';
 import PublicFooter from './PublicFooter';
-import { captureGclid } from '../../utils/public/gclidCapture';
 import '../../styles/public/public-layout.css';
 import '../../styles/public/public-pages.css';
 import '../../styles/public/public-cards.css';
 
 export default function PublicLayout() {
-  // Capture gclid from URL on first render (Google Ads click tracking)
-  useEffect(() => { captureGclid(); }, []);
-
   return (
     <PublicLangProvider>
       <div className="public-page">

client/src/index.tsx

@@ -11,6 +11,13 @@ import BYOKSetupModal from './components/BYOKSetupModal';
 import { useDomainStore } from './stores/domainStore';
 import { initializeSeedsCache } from './services/seedCacheInitializer';
 import { LocalStorageAdapter } from './storage/localAdapter';
+import { captureGclid } from './utils/public/gclidCapture';
+
+// Capture utm_source / gclid from the landing URL before any router redirect
+// can strip them. Must run synchronously at module load — running inside a
+// React effect is too late, because the catch-all <Navigate> in App.tsx
+// rewrites the URL before App's effect fires.
+captureGclid();
 // Service Worker registration (DISABLED until Q1 2026 - Offline Mode implementation)
 // Currently causes 404 errors since service-worker.js doesn't exist yet
 // Roadmap: CLAUDE.md Q1 2026 - Offline Mode with service worker

client/src/utils/public/gclidCapture.ts

@@ -10,10 +10,16 @@ let capturedMarketingSource: MarketingSource = 'direct';
 
 // Closed allowlist for marketing source labels written to analytics blobs.
 // Server side validates against the same allowlist; unknown values become 'unknown'.
-export type MarketingSource = 'spotify' | 'grants' | 'paid' | 'organic' | 'direct' | 'unknown';
+// spotify_a / spotify_b are A/B variants of the Spotify campaign — short URLs in
+// `client/public/_redirects` (e.g. /sp/de1, /sp/de2) split the channel so the
+// dashboard renders them as separate rows for variant comparison.
+export type MarketingSource =
+  | 'spotify' | 'spotify_a' | 'spotify_b'
+  | 'grants' | 'paid' | 'organic' | 'direct' | 'unknown';
 
 const ALLOWED_SOURCES: ReadonlySet<MarketingSource> = new Set([
-  'spotify', 'grants', 'paid', 'organic', 'direct', 'unknown',
+  'spotify', 'spotify_a', 'spotify_b',
+  'grants', 'paid', 'organic', 'direct', 'unknown',
 ]);
 
 /**
@@ -26,6 +32,8 @@ function normalizeMarketingSource(utmSource: string | null, utmMedium: string |
   const medium = (utmMedium || '').toLowerCase();
 
   if (source === 'spotify') return 'spotify';
+  if (source === 'spotify_a') return 'spotify_a';
+  if (source === 'spotify_b') return 'spotify_b';
 
   if (source === 'google' || source === 'googleads') {
     if (medium === 'grants' || medium === 'adgrants') return 'grants';

workers/audio-proxy/src/index.ts

@@ -8,7 +8,8 @@ import type { Env } from './types';
 // Closed allowlist for marketing source labels — mirrors llm-proxy/utils/analytics.ts.
 // Validated server-side so the dashboard never sees free-text values.
 const ALLOWED_MARKETING_SOURCES = new Set([
-  'spotify', 'grants', 'paid', 'organic', 'direct', 'unknown',
+  'spotify', 'spotify_a', 'spotify_b',
+  'grants', 'paid', 'organic', 'direct', 'unknown',
 ]);
 
 function readMarketingSource(request: Request): string {

workers/llm-proxy/src/utils/analytics.ts

@@ -7,9 +7,12 @@ import type { Env } from './types';
 
 // Closed allowlist for marketing source labels. Validated server-side to
 // guarantee the dashboard never sees free-text values, even if the client
-// header is malformed or hostile.
+// header is malformed or hostile. spotify_a / spotify_b are A/B variants
+// of the Spotify campaign — see client/public/_redirects for the shortcut
+// rules and gclidCapture.ts for the matching client-side allowlist.
 const ALLOWED_MARKETING_SOURCES = new Set([
-  'spotify', 'grants', 'paid', 'organic', 'direct', 'unknown',
+  'spotify', 'spotify_a', 'spotify_b',
+  'grants', 'paid', 'organic', 'direct', 'unknown',
 ]);
 
 /**

workers/stats/src/dashboard.ts

@@ -1915,7 +1915,7 @@ async function loadAdGrants() {
       allBuckets.add(row.t);
     });
     var bucketArr = Array.from(allBuckets).sort();
-    var sourceColors = { spotify: '#1DB954', grants: '#4285F4', paid: '#E97451', organic: '#9D83CD', direct: '#E6BC5C', unknown: '#8A8A8A' };
+    var sourceColors = { spotify: '#1DB954', spotify_a: '#3DD27A', spotify_b: '#0E8A3F', grants: '#4285F4', paid: '#E97451', organic: '#9D83CD', direct: '#E6BC5C', unknown: '#8A8A8A' };
     var maxBucket = 1;
     bucketArr.forEach(function(t) {
       var stack = 0;