george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add Rybbit analytics alongside Umami

Browse Source 
- 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>
This commit is contained in:
George Powell
2026-02-21 17:13:41 -05:00
parent 6554ef8f41
commit 3036264d44
5 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
View File

@@ -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">

3
src/lib/components/Credits.svelte
View File

@@ -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"

3
src/lib/components/WinScreen.svelte
View File

@@ -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(() => {

26
src/lib/stores/game-persistence.svelte.ts
View File

@@ -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();

6
src/routes/+page.svelte
View File

@@ -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,
});
}
});