Game share-loop: instrument funnel, deep-link shares, /play metadata

Sharpen the existing daily-game share loop into something measurable (per Codex's
"instrument what you have, then feed people into it" plan), ahead of a Show HN launch.

Analytics:
- Per-game funnel events <game>_{arrival,started,completed,shared} (article_id=0).
  arrival = landed via a shared link (utm_source=game_share); started = first move
  (guess/find/flip); completed = solved/cleared/Full Bloom; shared = on share success.
- trackVisit() moved into the global layout so direct /play landings count; the
  server-rendered /a/ share page now creates a visitor token + sends a daily visit
  beacon (first-time /a/-only visitors were previously dropped).
- Admin "Games funnel" panel: arrivals / engaged / completed / shared, per game.

Sharing:
- Memory Match gains a Share button (it was the only game without one).
- All shares deep-link to the exact game+variant with a full https:// URL +
  utm_source=game_share (gameShareUrl helper), instead of a bare /play.
- "shared" is counted only after navigator.share()/clipboard.writeText() succeeds.

/play social metadata:
- /play served homepage canonical/OG (static SPA, ssr=false). postbuild script
  patches build/play.html's head to /play canonical/title/description/OG; fails the
  build if the homepage tags drift. Caddy try_files now serves {path}.html so /play
  is served from the patched file (snapshot in deploy/caddy/).

Tests: backend 352, frontend 27.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/components/BloomGame.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getJSON, postJSON } from '$lib/api.js';
   import { pushGameState, fetchGameStats } from '$lib/gamesync.js';
+  import { trackGame, gameShareUrl } from '$lib/analytics.js';
 
   // mode: 'daily' (shared, synced, ritual) | 'free' (local-only, infinite wheels)
   // format: 'center' (center letter required) | 'wild' (any word from the 7)
@@ -208,13 +209,14 @@
       return;
     }
     const pan = isPangram(w);
+    if (found.length === 0) trackGame('bloom', 'started');   // first word = started
     found = [w, ...found];
     flash(pan ? 'Pangram! 🌸 +' + scoreWord(w) : '+' + scoreWord(w));
     if (pan) bloomPulse();
     persist();
     if (!isFree) syncSoon();
     if (found.reduce((s, x) => s + scoreWord(x), 0) >= maxScore && !fullShown) {
-      fullShown = true; bloomPulse();
+      fullShown = true; bloomPulse(); trackGame('bloom', 'completed');   // Full Bloom
     }
   }
 
@@ -225,9 +227,10 @@
     found.forEach((w) => (byLen[w.length] = (byLen[w.length] || 0) + 1));
     const breakdown = Object.keys(byLen).sort((a, b) => b - a).map((l) => `${l}×${byLen[l]}`).join('  ');
     const pang = found.some(isPangram) ? ' · pangram ✓' : '';
-    const text = `Upbeat Bytes · Bloom ${date}\n${fullBloom ? 'Full Bloom 🌸' : tier.name} · ${found.length} words${pang}\n${breakdown}\nupbeatbytes.com/play`;
-    if (navigator.share) navigator.share({ text }).catch(() => {});
-    else navigator.clipboard?.writeText(text).then(() => { copied = true; setTimeout(() => (copied = false), 1500); });
+    const bloomV = mode === 'daily' ? 'daily' : (format === 'wild' ? 'free-wild' : 'free-center');
+    const text = `Upbeat Bytes · Bloom ${date}\n${fullBloom ? 'Full Bloom 🌸' : tier.name} · ${found.length} words${pang}\n${breakdown}\n${gameShareUrl('bloom', bloomV)}`;
+    if (navigator.share) navigator.share({ text }).then(() => trackGame('bloom', 'shared')).catch(() => {});
+    else navigator.clipboard?.writeText(text).then(() => { trackGame('bloom', 'shared'); copied = true; setTimeout(() => (copied = false), 1500); });
   }
 
   // Quiet "this should count?" — flags a rejected word for the admin queue.

frontend/src/lib/components/MatchGame.svelte

@@ -1,6 +1,7 @@
 <script>
   import { untrack } from 'svelte';
   import { pushGameState } from '$lib/gamesync.js';
+  import { trackGame, gameShareUrl } from '$lib/analytics.js';
   import { COLOR_BY_KEY } from '$lib/games/match/palette.js';
   import { buildBoard, freeSeed } from '$lib/games/match/board.js';
   import MatchIcon from './MatchIcon.svelte';
@@ -104,6 +105,7 @@
   function flip(card) {
     if (!ready || locked || done) return;
     if (matchedKeys.has(card.key) || flipped.includes(card.id)) return;
+    if (moves === 0 && flipped.length === 0 && matchedKeys.size === 0) trackGame('match', 'started');
 
     // Match off the LOCAL `next`, not the just-assigned reactive `flipped`, so the
     // evaluation never runs a click behind.
@@ -118,7 +120,7 @@
       matchedKeys = new Set([...matchedKeys, keys[0]]);
       flipped = [];
       persist();
-      if (matchedKeys.size >= board.faces.length && !celebrated) celebrated = true;
+      if (matchedKeys.size >= board.faces.length && !celebrated) { celebrated = true; trackGame('match', 'completed'); }
     } else {
       locked = true;             // show the mismatch briefly, then flip back
       persist();
@@ -126,6 +128,16 @@
     }
   }
 
+  const TIER_LABEL = { gentle: 'Gentle', standard: 'Standard', expert: 'Expert' };
+  let copied = $state(false);
+  function share() {
+    const label = `${TIER_LABEL[tier] || tier} · ${format === 'colors' ? 'colors' : 'icons'}`;
+    const when = isFree ? 'Free play' : date;
+    const text = `Upbeat Bytes · Memory Match (${label}) ${when}\nCleared in ${moves} moves\n${gameShareUrl('match', `${mode}-${format}-${tier}`)}`;
+    if (navigator.share) navigator.share({ text }).then(() => trackGame('match', 'shared')).catch(() => {});
+    else navigator.clipboard?.writeText(text).then(() => { trackGame('match', 'shared'); copied = true; setTimeout(() => (copied = false), 1500); });
+  }
+
   function faceLabel(card) {
     if (format === 'colors') return COLOR_BY_KEY[card.key]?.name ?? 'color';
     return card.key;
@@ -190,6 +202,7 @@
 
     {#if done && celebrated}
       <p class="done">Lovely — you cleared {isFree ? 'the board' : "today's set"}.{isFree ? '' : ' Fresh one tomorrow.'}</p>
+      <button class="share" onclick={share}>{copied ? 'Copied!' : 'Share result'}</button>
     {/if}
   {/if}
 </div>
@@ -249,6 +262,9 @@
            color: var(--accent-deep); font-weight: 700; }
 
   .done { margin: 4px 0 0; color: var(--accent-deep); font-family: var(--label); text-align: center; }
+  .share { margin-top: 10px; background: var(--accent); color: #fff; border: none; border-radius: 999px;
+           padding: 9px 22px; font: inherit; font-weight: 600; cursor: pointer; }
+  .share:hover { background: var(--accent-deep); }
 
   @media (prefers-reduced-motion: reduce) {
     .inner { transition: none; }

frontend/src/lib/components/WordGame.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getJSON, postJSON } from '$lib/api.js';
   import { pushGameState, fetchGameStats } from '$lib/gamesync.js';
+  import { trackGame, gameShareUrl } from '$lib/analytics.js';
 
   let { variant = '5', onstatus } = $props();
 
@@ -121,11 +122,12 @@
     submitting = true;
     try {
       const res = await postJSON('/api/puzzle/word/guess', { variant, guess: current, n: guesses.length + 1 });
+      if (guesses.length === 0) trackGame('word', 'started');   // first real guess = started
       guesses = [...guesses, current];
       cols = [...cols, res.colors];
       current = '';
-      if (res.solved) { status = 'won'; answer = res.answer; why = res.why; recordStat(true); }
-      else if (guesses.length >= maxGuesses) { status = 'lost'; answer = res.answer; why = res.why; recordStat(false); }
+      if (res.solved) { status = 'won'; answer = res.answer; why = res.why; recordStat(true); trackGame('word', 'completed'); }
+      else if (guesses.length >= maxGuesses) { status = 'lost'; answer = res.answer; why = res.why; recordStat(false); trackGame('word', 'completed'); }
       persist();
       syncSoon();   // push this guess (and any completion) to the server, debounced
     } catch {
@@ -165,9 +167,11 @@
     const label = variant === '6' ? 'Long Word' : 'Daily Word';
     const score = status === 'won' ? guesses.length : 'X';
     const grid = cols.map((cs) => cs.map((c) => EMOJI[c]).join('')).join('\n');
-    const text = `Upbeat Bytes · ${label} ${date}\n${score}/${maxGuesses}\n${grid}\nupbeatbytes.com/play`;
-    if (navigator.share) navigator.share({ text }).catch(() => {});
-    else navigator.clipboard?.writeText(text).then(() => { copied = true; setTimeout(() => (copied = false), 1500); });
+    const text = `Upbeat Bytes · ${label} ${date}\n${score}/${maxGuesses}\n${grid}\n${gameShareUrl('word', variant)}`;
+    // Count a share only once it actually happens (sheet completed / clipboard wrote),
+    // never on a cancelled share sheet or denied clipboard.
+    if (navigator.share) navigator.share({ text }).then(() => trackGame('word', 'shared')).catch(() => {});
+    else navigator.clipboard?.writeText(text).then(() => { trackGame('word', 'shared'); copied = true; setTimeout(() => (copied = false), 1500); });
   }
 
   // Load on mount and whenever the variant toggles. Tracks ONLY `variant` — it

frontend/src/lib/components/WordSearchGame.svelte

@@ -2,6 +2,7 @@
   import { getJSON } from '$lib/api.js';
   import { lineFrom, matchWord, cellFromPoint } from '$lib/wordsearch.js';
   import { pushGameState, fetchGameStats } from '$lib/gamesync.js';
+  import { trackGame, gameShareUrl } from '$lib/analytics.js';
 
   let { size = 'med', onstatus } = $props();
 
@@ -197,6 +198,7 @@
   function evaluate(cells) {
     const hit = matchWord(cells, grid, words, found);
     if (!hit) return;
+    if (foundWords.length === 0) trackGame('wordsearch', 'started');   // first word found = started
     foundWords = [...foundWords, { word: hit, cells: cells.map((c) => [...c]), ci: foundWords.length % PALETTE.length }];
     okFlash = true; setTimeout(() => (okFlash = false), 500);
     if (foundWords.length === words.length) finish();
@@ -206,6 +208,7 @@
 
   function finish() {
     pauseClock(false);                     // close the open segment; persist follows in evaluate()
+    trackGame('wordsearch', 'completed');
     resultMs = playedMs;
     if (resultMs && (!best || resultMs < best)) {
       best = resultMs;
@@ -220,9 +223,9 @@
 
   function share() {
     const label = { small: 'Small', med: 'Medium', large: 'Large' }[size] || '';
-    const text = `Upbeat Bytes · Word Search (${label}) ${date}\n${theme} — cleared in ${fmt(resultMs)}\nupbeatbytes.com/play`;
-    if (navigator.share) navigator.share({ text }).catch(() => {});
-    else navigator.clipboard?.writeText(text).then(() => { copied = true; setTimeout(() => (copied = false), 1500); });
+    const text = `Upbeat Bytes · Word Search (${label}) ${date}\n${theme} — cleared in ${fmt(resultMs)}\n${gameShareUrl('wordsearch', size)}`;
+    if (navigator.share) navigator.share({ text }).then(() => trackGame('wordsearch', 'shared')).catch(() => {});
+    else navigator.clipboard?.writeText(text).then(() => { trackGame('wordsearch', 'shared'); copied = true; setTimeout(() => (copied = false), 1500); });
   }
 
   // Load on mount and whenever the size changes. Tracks ONLY `size`.