@algoraid/analytics
v0.1.0
Published
Privacy-friendly, cookieless web analytics for React & Next.js apps. Drop in <Analytics /> and view stats on your Algora dashboard.
Maintainers
richardowenReadme
@algoraid/analytics
Privacy-friendly, cookieless web analytics for React & Next.js. Drop in one component and view Visitors, Page Views, Bounce Rate, a visitors-over-time chart, and breakdowns (Top Pages, Referrers, Devices, Browsers, OS, Countries, UTM) on your Algora dashboard.
- No cookies, no
localStorage, no consent banner. Unique visitors are counted with a daily-rotating, one-way hash computed on the server — your app never stores or sends any identifier. - One line to install:
<Analytics />. - Auto-tracks SPA navigations (Next.js App Router & Pages Router) — pushState/replaceState + back/forward.
- Non-blocking: uses
navigator.sendBeacon(fallbackfetch(keepalive)). Never throws into your app. SSR-safe. - No secret in the browser — only a public site id, validated server-side by an origin allowlist.
Install
npm install @algoraid/analyticsSetup
Create a site on your Algora dashboard's /analytics page (Manage → New site) to get a public
site id. Add it to your app's environment:
# .env.local
NEXT_PUBLIC_ALGORA_ANALYTICS_ID=your_public_site_idNext.js — App Router
Render <Analytics /> once in your root layout:
// app/layout.tsx
import { Analytics } from '@algoraid/analytics/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Analytics />
</body>
</html>
)
}That's it — pageviews (including client-side route changes) flow to your dashboard.
Next.js — Pages Router
// pages/_app.tsx
import { Analytics } from '@algoraid/analytics/react'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
)
}Passing the id explicitly
If you'd rather not use the env var (or use a non-Next bundler), pass it as a prop:
<Analytics siteId="your_public_site_id" />Custom events
import { track } from '@algoraid/analytics/react'
<button onClick={() => track('signup_clicked', { plan: 'pro' })}>Sign up</button>Manual / non-React usage
The core is framework-agnostic:
import { init, pageview, track, shutdown } from '@algoraid/analytics'
init({ siteId: 'your_public_site_id' })
pageview() // manual pageview
track('purchase', { amount: 49 })Privacy
- No cookies / no client storage. Nothing is persisted in the browser.
- Only the pathname is recorded — query strings are dropped (UTM params are extracted, the rest is discarded).
- Unique visitors are derived from a daily, one-way hash of IP + user-agent + a server secret, computed only on the dashboard. It resets every day and cannot be reversed or used to track across days. IP and user-agent are never stored.
Config
| Option | Default | What |
|---|---|---|
| siteId | NEXT_PUBLIC_ALGORA_ANALYTICS_ID | Public site id from the dashboard |
| endpoint | hosted dashboard | Override for self-hosted dashboards |
| trackHash | false | Count #hash changes as pageviews |
| beforeSend | — | Inspect/transform/drop each event (return null to drop) |
Notes
- The component returns
null(renders nothing). - React Strict Mode's double-mount is handled —
init()does a clean re-init. - Add your site's domain(s) to the allowlist in the dashboard so cross-origin ingest is accepted.
License
MIT