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","deleted","label",[102],"permalink","https://www.val.town/x/pchinjr/valtown_project_analytics/code/main.ts","extension","actionData","errors"]