From 3036264d446779f956b5af17f2be05ad93165f26 Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Sat, 21 Feb 2026 17:13:41 -0500
Subject: [PATCH] Add Rybbit analytics alongside Umami

- Load Rybbit script via app.html (recommended SvelteKit approach)
- Mirror all Umami custom events (First guess, Guessed correctly, Share, Copy to Clipboard, social link clicks) with rybbit.event()
- Identify logged-in users with name/email traits; anonymous users by stable UUID

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app.html                              |  1 +
 src/lib/components/Credits.svelte         |  3 +++
 src/lib/components/WinScreen.svelte       |  3 ++-
 src/lib/stores/game-persistence.svelte.ts | 26 ++++++++++++++++++-----
 src/routes/+page.svelte                   |  6 +++++-
 5 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/src/app.html b/src/app.html
index f0ea0b5..a282adb 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<script src="https://rybbit.snail.city/api/script.js" data-site-id="9abf0e81d024" defer></script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/src/lib/components/Credits.svelte b/src/lib/components/Credits.svelte
index 657545a..c5208d9 100644
--- a/src/lib/components/Credits.svelte
+++ b/src/lib/components/Credits.svelte
@@ -34,6 +34,7 @@
 			class="inline-flex hover:opacity-80 transition-opacity"
 			aria-label="Follow on Bluesky"
 			data-umami-event="Bluesky clicked"
+			onclick={() => (window as any).rybbit?.event("Bluesky clicked")}
 		>
 			<img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
 		</a>
@@ -47,6 +48,7 @@
 			class="inline-flex hover:opacity-80 transition-opacity"
 			aria-label="Follow on Twitter"
 			data-umami-event="Twitter clicked"
+			onclick={() => (window as any).rybbit?.event("Twitter clicked")}
 		>
 			<img src={TwitterLogo} alt="Twitter" class="w-8 h-8" />
 		</a>
@@ -58,6 +60,7 @@
 			class="inline-flex hover:opacity-80 transition-opacity"
 			aria-label="Send email"
 			data-umami-event="Email clicked"
+			onclick={() => (window as any).rybbit?.event("Email clicked")}
 		>
 			<svg
 				class="w-8 h-8 text-gray-700"
diff --git a/src/lib/components/WinScreen.svelte b/src/lib/components/WinScreen.svelte
index 39d9028..fb6cbb9 100644
--- a/src/lib/components/WinScreen.svelte
+++ b/src/lib/components/WinScreen.svelte
@@ -209,7 +209,7 @@
 		<div class="share-buttons">
 			{#if hasWebShare}
 				<button
-					onclick={handleShare}
+					onclick={() => { (window as any).rybbit?.event("Share"); handleShare(); }}
 					data-umami-event="Share"
 					class="share-btn primary"
 				>
@@ -218,6 +218,7 @@
 			{:else}
 				<button
 					onclick={() => {
+						(window as any).rybbit?.event("Copy to Clipboard");
 						copyToClipboard();
 						copySuccess = true;
 						setTimeout(() => {
diff --git a/src/lib/stores/game-persistence.svelte.ts b/src/lib/stores/game-persistence.svelte.ts
index 0265d0a..98fc460 100644
--- a/src/lib/stores/game-persistence.svelte.ts
+++ b/src/lib/stores/game-persistence.svelte.ts
@@ -17,11 +17,18 @@ function getOrCreateAnonymousId(): string {
 // Reactive store that keeps in-memory game state in sync with localStorage.
 // Accepts getter functions (rather than plain values) so Svelte's reactivity
 // system can track dependencies and re-run effects when they change.
+type AuthUser = {
+	id: string;
+	firstName?: string | null;
+	lastName?: string | null;
+	email?: string | null;
+};
+
 export function createGamePersistence(
 	getDate: () => string,
 	getReference: () => string,
 	getCorrectBookId: () => string,
-	getUserId: () => string | undefined,
+	getUser: () => AuthUser | null | undefined,
 ) {
 	let guesses = $state<Guess[]>([]);
 	let anonymousId = $state("");
@@ -34,18 +41,27 @@ export function createGamePersistence(
 	$effect(() => {
 		if (!browser) return;
 
-		const userId = getUserId();
+		const user = getUser();
 		// CRITICAL: If user is logged in, ALWAYS use their user ID
-		if (userId) {
-			anonymousId = userId;
+		if (user) {
+			anonymousId = user.id;
 		} else {
 			anonymousId = getOrCreateAnonymousId();
 		}
 
-		// Tell Umami analytics which player this is so events are grouped correctly.
+		// Tell analytics which player this is so events are grouped correctly.
 		if ((window as any).umami) {
 			(window as any).umami.identify(anonymousId);
 		}
+		if (user) {
+			const nameParts = [user.firstName, user.lastName].filter(Boolean);
+			(window as any).rybbit?.identify(user.id, {
+				...(nameParts.length ? { name: nameParts.join(' ') } : {}),
+				...(user.email ? { email: user.email } : {}),
+			});
+		} else {
+			(window as any).rybbit?.identify(anonymousId);
+		}
 
 		const date = getDate();
 		const reference = getReference();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 38d81db..e4447de 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -47,7 +47,7 @@
 		() => dailyVerse.date,
 		() => dailyVerse.reference,
 		() => correctBookId,
-		() => user?.id,
+		() => user,
 	);
 
 	let guessedIds = $derived(
@@ -86,6 +86,7 @@
 				(window as any).umami
 			) {
 				(window as any).umami.track("First guess");
+				(window as any).rybbit?.event("First guess");
 				localStorage.setItem(key, "true");
 			}
 		}
@@ -209,6 +210,9 @@
 			(window as any).umami.track("Guessed correctly", {
 				totalGuesses: persistence.guesses.length,
 			});
+			(window as any).rybbit?.event("Guessed correctly", {
+				totalGuesses: persistence.guesses.length,
+			});
 		}
 	});
 
