Spoar: Privacy-first analytics you host yourself | Remco Stoeten stoetenremco [dot] rs [at] gmail [dot] com
Spoar v2.3.0 @spoar/sdk
Privacy-first analytics you host yourself.
Typed, cookie-free analytics for the browser, server and React, sent to your own Postgres.
$ npm install @spoar/sdk
lib/analytics.ts tsx
import { createAnalytics } from '@spoar/sdk' import { errors, speedInsights } from '@spoar/sdk/plugins' import type { Events } from './events' export const analytics = Start with one call. Add the pieces when you need them. Mount it in Next The Next component sends each pageview with its route template, such as /blog/[slug]. With debugConsole set, project admins open the debug console with Ctrl+Shift+K, and visitors load nothing for it.
app/providers.tsx tsx
'use client' import type { ReactNode } from 'react' import { AnalyticsProvider } from '@spoar/sdk/react' import { createAnalytics
Events
project: 'my-site' ,
key: 'pk_live_...' ,
endpoint: '/_ra' ,
pageviews: false ,
plugins: [speedInsights (), errors ()]
})
analytics.track ('signup' , { plan: 'pro' })
Analytics
from
'@spoar/sdk/next'
import { analytics } from '@/lib/analytics'
export function Providers ({ children }: { children: ReactNode }) {
return (
<AnalyticsProvider client ={analytics}>
<Analytics debugConsole />
{children}
</AnalyticsProvider >
)
}
Track a signup on the server Record events that happen on the backend and never reach the browser.
app/api/signup/route.ts tsx
import { createServerAnalytics } from '@spoar/sdk/server' const serverAnalytics = createServerAnalytics <Events >({ secret: process.env.RA_SECRET , endpoint: 'https://api.analytics.remcostoeten.nl' }) export async function POST (request: Request ) { await createUser () await serverAnalytics.track ('signup' , { plan: 'pro' }, { request }) return Response .json ({ ok: true }) }
createAnalytics() Creates the browser client with project, key, endpoint and plugins.
analytics.track() Sends a typed custom event with its props.
<Analytics /> Sends App Router pageviews with route templates. debugConsole opens the debug console for project admins.
createServerAnalytics() Sends events from API routes, webhooks or cron jobs with a secret.
createProxy() Serves a same-origin endpoint so events get past ad blockers.