[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_163":164,"_165":166},"routes/_app.x.$handle.$name",{"_93":92,"_32":44,"_101":83,"_27":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","91baabde-2395-11f1-9eea-42dde27851f2","name","fileType","content","# ValTown Project Analytics\n\nReusable analytics ingest and browser client for lightweight event tracking across Val Town projects.\n\n## Endpoints\n\n- `GET /client.js`\n- `POST /track`\n- `GET /summary?project=`\n- `GET /events?project=&limit=25`\n\n## Browser Integration\n\n```html\n\n\n```\n\n## Event Shape\n\n```json\n{\n \"project\": \"guess-that-hype\",\n \"event\": \"quiz_started\",\n \"sessionId\": \"vt-...\",\n \"pagePath\": \"/\",\n \"pageUrl\": \"https://example.web.val.run/\",\n \"referrer\": \"https://example.com/\",\n \"source\": \"browser\",\n \"ts\": \"2026-03-19T13:00:00.000Z\",\n \"props\": {\n \"runId\": \"...\",\n \"questionsPerRun\": 8\n }\n}\n```\n\n## Suggested Metrics\n\n- `page_viewed`\n- `quiz_started`\n- `question_answered`\n- `quiz_completed`\n- `share_clicked`\n- `share_copied`\n- `cta_clicked`\n\n## Notes\n\n- Events are stored in SQLite.\n- Session ids are generated client-side and persisted in `localStorage`.\n- The client uses `sendBeacon` when possible and falls back to `fetch`.\n- This is intended for lightweight product analytics, not full session replay or enterprise-grade analytics.\n","# ValTown Project Analytics\n\nPublic Val Town analytics service:\n- https://www.val.town/x/pchinjr/valtown_project_analytics\n\nLive service:\n- https://pchinjr--2dfdceb4239511f1baa142dde27851f2.web.val.run\n\n## Overview\n\n`valtown_project_analytics` is a reusable analytics service for lightweight event tracking across multiple Val Town projects.\n\nIt provides:\n- a browser client script you can drop into any Val Town app\n- an ingest endpoint for event writes\n- simple JSON reporting endpoints for summaries and recent events\n- shared storage using Val Town global SQLite\n\nThis is intentionally small and pragmatic. It is meant for meaningful product events, not full session replay or enterprise analytics workflows.\n\n## Routes\n\n- `GET /`\n Human-readable landing page with usage notes\n- `GET /client.js`\n Reusable browser client\n- `POST /track`\n Event ingest endpoint\n- `GET /summary?project=`\n Per-project summary with unique sessions, totals, and recent events\n- `GET /events?project=&limit=25`\n Recent per-project event stream\n- `OPTIONS *`\n CORS preflight handling\n\n## Data Model\n\nEvents are stored in a shared SQLite table named `events`.\n\nColumns:\n- `id`\n- `project`\n- `event`\n- `session_id`\n- `page_path`\n- `page_url`\n- `referrer`\n- `source`\n- `user_agent`\n- `ts`\n- `received_at`\n- `props_json`\n\nIndexes:\n- `idx_events_project_ts`\n- `idx_events_project_event_ts`\n\n## Browser Integration\n\n```html\n\n\n```\n\n## Client API\n\n`window.ValTownAnalytics.init(config)` accepts:\n- `project`\n- `endpoint` optional override\n- `globalProps` optional object merged into every event\n- `debug` optional boolean\n\nIt returns:\n- `track(event, props)`\n- `sessionId()`\n\nBehavior:\n- generates and persists a browser session id in `localStorage`\n- uses `navigator.sendBeacon` when available\n- falls back to `fetch` with `keepalive`\n\n## Event Shape\n\n```json\n{\n \"project\": \"guess-that-hype\",\n \"event\": \"quiz_started\",\n \"sessionId\": \"vt-...\",\n \"pagePath\": \"/\",\n \"pageUrl\": \"https://example.web.val.run/\",\n \"referrer\": \"https://example.com/\",\n \"source\": \"browser\",\n \"ts\": \"2026-03-19T13:00:00.000Z\",\n \"props\": {\n \"runId\": \"...\",\n \"questionsPerRun\": 8\n }\n}\n```\n\n## Recommended Metrics\n\n- `page_viewed`\n- `quiz_started`\n- `question_answered`\n- `quiz_completed`\n- `share_clicked`\n- `share_copied`\n- `cta_clicked`\n\n## Tradeoffs\n\nGood fit for:\n- custom event analytics across several Val Town projects\n- product funnels and lightweight reporting\n- simple owner-controlled instrumentation\n\nNot designed for:\n- session replay\n- identity stitching across devices\n- advanced cohort analysis\n- enterprise-scale analytics workloads\n\n## Files\n\n- `main.ts`\n Full analytics service implementation\n- `README.md`\n Project documentation\n","createdAt",["D",1773928054187],"branchVersion","branchId","2df7e864-2395-11f1-baa1-42dde27851f2","id","2df77352-2395-11f1-baa1-42dde27851f2","valtown_project_analytics",["D",1773925905345],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Reusable analytics for Val Town apps.","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},"branch",{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":159,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":160,"_78":161,"_80":162,"_82":25},"tree",[150,151],"files",[150,151],"counts",{"_140":60,"_141":130,"_142":60,"_143":144,"_145":146},"contents",[124,125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":137,"_32":28,"_30":31,"_129":-5,"_40":41,"_39":14,"_131":119,"_37":138,"_13":130,"_33":20,"_34":36,"_24":25,"_135":-5,"_27":139},{"_42":126,"_32":127,"_30":128,"_129":-5,"_40":41,"_39":130,"_131":119,"_37":132,"_13":60,"_33":133,"_34":134,"_24":25,"_135":-5,"_27":136},"2dfdce0a-2395-11f1-baa1-42dde27851f2","main.ts","2dfdceb4-2395-11f1-baa1-42dde27851f2","parentId",1,"latest",["D",1773925905380],"http","import { sqlite } from \"https://esm.town/v/std/sqlite/global.ts\";\n\nconst CORS_HEADERS = {\n \"access-control-allow-origin\": \"*\",\n \"access-control-allow-methods\": \"GET,POST,OPTIONS\",\n \"access-control-allow-headers\": \"content-type\",\n};\n\nlet schemaReady: Promise | null = null;\n\nfunction json(data: unknown, init: ResponseInit = {}) {\n return new Response(JSON.stringify(data, null, 2), {\n ...init,\n headers: {\n \"content-type\": \"application/json; charset=utf-8\",\n ...CORS_HEADERS,\n ...(init.headers ?? {}),\n },\n });\n}\n\nfunction html(body: string, init: ResponseInit = {}) {\n return new Response(body, {\n ...init,\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n ...CORS_HEADERS,\n ...(init.headers ?? {}),\n },\n });\n}\n\nfunction javascript(body: string, init: ResponseInit = {}) {\n return new Response(body, {\n ...init,\n headers: {\n \"content-type\": \"application/javascript; charset=utf-8\",\n \"cache-control\": \"public, max-age=300\",\n ...CORS_HEADERS,\n ...(init.headers ?? {}),\n },\n });\n}\n\nasync function ensureSchema() {\n if (!schemaReady) {\n schemaReady = (async () => {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS events (\n id TEXT PRIMARY KEY,\n project TEXT NOT NULL,\n event TEXT NOT NULL,\n session_id TEXT,\n page_path TEXT,\n page_url TEXT,\n referrer TEXT,\n source TEXT,\n user_agent TEXT,\n ts TEXT NOT NULL,\n received_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n props_json TEXT NOT NULL DEFAULT '{}'\n )\n `);\n\n await sqlite.execute(\"CREATE INDEX IF NOT EXISTS idx_events_project_ts ON events(project, ts DESC)\");\n await sqlite.execute(\"CREATE INDEX IF NOT EXISTS idx_events_project_event_ts ON events(project, event, ts DESC)\");\n })();\n }\n\n await schemaReady;\n}\n\nfunction pageHtml(origin: string) {\n return `\n\n \n \n \n ValTown Project Analytics\n \n \n \n

ValTown Project Analytics

Reusable event ingest and browser client for lightweight analytics across multiple Val Town projects.

Endpoints

GET  /client.js\nPOST /track\nGET  /summary?project=guess-that-hype\nGET  /events?project=guess-that-hype&limit=25

Quick Start

<script src=\"${origin}/client.js\" defer></script>\n<script defer>\n  window.addEventListener(\"DOMContentLoaded\", function () {\n    const analytics = window.ValTownAnalytics.init({\n      endpoint: \"${origin}/track\",\n      project: \"my-project\",\n    });\n\n    analytics.track(\"page_ready\", { area: \"landing\" });\n  });\n</script>

\n \n`;\n}\n\nfunction clientJs(origin: string) {\n return `(function () {\n var STORAGE_KEY = \"vt_project_analytics_session_v1\";\n var state = {\n endpoint: ${JSON.stringify(origin + \"/track\")},\n project: \"\",\n globalProps: {},\n sessionId: null,\n debug: false,\n };\n\n function randomId() {\n if (window.crypto && window.crypto.randomUUID) {\n return window.crypto.randomUUID();\n }\n return \"vt-\" + Date.now().toString(36) + \"-\" + Math.random().toString(36).slice(2, 10);\n }\n\n function getSessionId() {\n if (state.sessionId) return state.sessionId;\n try {\n var existing = window.localStorage.getItem(STORAGE_KEY);\n if (existing) {\n state.sessionId = existing;\n return existing;\n }\n var created = randomId();\n window.localStorage.setItem(STORAGE_KEY, created);\n state.sessionId = created;\n return created;\n } catch (_error) {\n state.sessionId = randomId();\n return state.sessionId;\n }\n }\n\n function send(payload) {\n var body = JSON.stringify(payload);\n if (state.debug) console.log(\"[ValTownAnalytics]\", payload);\n if (navigator.sendBeacon && body.length < 60000) {\n var blob = new Blob([body], { type: \"application/json\" });\n if (navigator.sendBeacon(state.endpoint, blob)) return Promise.resolve(true);\n }\n return fetch(state.endpoint, {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: body,\n keepalive: true,\n mode: \"cors\",\n }).then(function () { return true; }).catch(function () { return false; });\n }\n\n function track(event, props) {\n if (!state.project || !event) return Promise.resolve(false);\n return send({\n project: state.project,\n event: event,\n sessionId: getSessionId(),\n pagePath: window.location.pathname,\n pageUrl: window.location.href,\n referrer: document.referrer || null,\n source: \"browser\",\n ts: new Date().toISOString(),\n props: Object.assign({}, state.globalProps, props || {}),\n });\n }\n\n window.ValTownAnalytics = {\n init: function init(config) {\n config = config || {};\n state.endpoint = config.endpoint || state.endpoint;\n state.project = config.project || state.project;\n state.globalProps = config.globalProps || {};\n state.debug = Boolean(config.debug);\n getSessionId();\n return {\n track: track,\n sessionId: function () { return getSessionId(); },\n };\n },\n track: track,\n };\n})();`;\n}\n\nfunction safeString(value: unknown, max = 255) {\n if (typeof value !== \"string\") return null;\n const trimmed = value.trim();\n if (!trimmed) return null;\n return trimmed.slice(0, max);\n}\n\nfunction safeProps(value: unknown) {\n if (!value || typeof value !== \"object\" || Array.isArray(value)) return {};\n const jsonValue = JSON.stringify(value);\n if (!jsonValue) return {};\n if (jsonValue.length <= 6000) return value;\n return { truncated: true, preview: jsonValue.slice(0, 5900) };\n}\n\nfunction eventId() {\n return crypto.randomUUID();\n}\n\nasync function ingest(req: Request) {\n await ensureSchema();\n\n let body: any;\n try {\n body = await req.json();\n } catch {\n return json({ ok: false, error: \"invalid_json\" }, { status: 400 });\n }\n\n const project = safeString(body?.project, 120);\n const event = safeString(body?.event, 120);\n if (!project || !event) {\n return json({ ok: false, error: \"project_and_event_required\" }, { status: 400 });\n }\n\n const props = safeProps(body?.props);\n await sqlite.execute({\n sql: `INSERT INTO events (\n id, project, event, session_id, page_path, page_url, referrer, source, user_agent, ts, props_json\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n eventId(),\n project,\n event,\n safeString(body?.sessionId, 120),\n safeString(body?.pagePath, 500),\n safeString(body?.pageUrl, 1000),\n safeString(body?.referrer, 1000),\n safeString(body?.source, 60),\n safeString(req.headers.get(\"user-agent\"), 500),\n safeString(body?.ts, 64) || new Date().toISOString(),\n JSON.stringify(props),\n ],\n });\n\n return json({ ok: true });\n}\n\nasync function summary(project: string) {\n await ensureSchema();\n const totals = await sqlite.execute({\n sql: `SELECT event, COUNT(*) AS count FROM events WHERE project = ? GROUP BY event ORDER BY count DESC, event ASC`,\n args: [project],\n });\n const latest = await sqlite.execute({\n sql: `SELECT ts, event, props_json FROM events WHERE project = ? ORDER BY ts DESC LIMIT 10`,\n args: [project],\n });\n const sessions = await sqlite.execute({\n sql: `SELECT COUNT(DISTINCT session_id) AS count FROM events WHERE project = ?`,\n args: [project],\n });\n\n return {\n project,\n uniqueSessions: sessions.rows?.[0]?.count ?? 0,\n events: totals.rows ?? [],\n latest: (latest.rows ?? []).map((row: any) => ({\n ts: row.ts,\n event: row.event,\n props: JSON.parse(row.props_json || \"{}\"),\n })),\n };\n}\n\nasync function recentEvents(project: string, limit: number) {\n await ensureSchema();\n const rows = await sqlite.execute({\n sql: `SELECT ts, event, session_id, page_path, props_json FROM events WHERE project = ? ORDER BY ts DESC LIMIT ?`,\n args: [project, limit],\n });\n return (rows.rows ?? []).map((row: any) => ({\n ts: row.ts,\n event: row.event,\n sessionId: row.session_id,\n pagePath: row.page_path,\n props: JSON.parse(row.props_json || \"{}\"),\n }));\n}\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const origin = url.origin;\n\n if (req.method === \"OPTIONS\") {\n return new Response(null, { status: 204, headers: CORS_HEADERS });\n }\n\n if (req.method === \"GET\" && url.pathname === \"/\") {\n return html(pageHtml(origin));\n }\n\n if (req.method === \"GET\" && url.pathname === \"/client.js\") {\n return javascript(clientJs(origin));\n }\n\n if (req.method === \"POST\" && url.pathname === \"/track\") {\n return ingest(req);\n }\n\n if (req.method === \"GET\" && url.pathname === \"/summary\") {\n const project = safeString(url.searchParams.get(\"project\"), 120);\n if (!project) return json({ ok: false, error: \"project_required\" }, { status: 400 });\n return json(await summary(project));\n }\n\n if (req.method === \"GET\" && url.pathname === \"/events\") {\n const project = safeString(url.searchParams.get(\"project\"), 120);\n const limit = Math.min(Number(url.searchParams.get(\"limit\") || 25), 100);\n if (!project) return json({ ok: false, error: \"project_required\" }, { status: 400 });\n return json({ project, events: await recentEvents(project, limit) });\n }\n\n return json({ ok: false, error: \"not_found\" }, { status: 404 });\n}\n","label",[127],"2ec9dcca-239a-11f1-972d-42dde27851f2",["D",1773928054187],[28],"pulls","branches","forks","envVars",{"_147":60,"_149":60},"connections",{"_147":60,"_148":60},"count","unfilledCount","emptyCount",{"_42":137,"_32":28,"_30":31,"_129":-5,"_40":41,"_39":14,"_131":119,"_37":156,"_13":130,"_33":20,"_34":36,"_24":25,"_135":-5,"_153":157,"_27":158},{"_42":126,"_32":127,"_30":128,"_129":-5,"_40":41,"_39":130,"_131":119,"_37":152,"_13":60,"_33":133,"_34":134,"_24":25,"_135":-5,"_153":154,"_27":155},["D",1773925905380],"children",[],[127],["D",1773928054187],[],[28],["D",1773925905345],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"ctx",{"_76":-5,"_121":196,"_197":198,"_199":200,"_201":25,"_202":25,"_203":25,"_204":119,"_205":-5,"_206":-7,"_207":-7,"_208":60,"_209":25,"_210":25,"_211":-5,"_212":25,"_213":25,"_214":25,"_215":-5},"ENV",{"_167":168,"_169":170,"_171":83,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v3