Quick Start
Get started with Better Analytics in minutes
Introduction
Better Analytics is a privacy-first analytics platform designed for developers. It offers both a TypeScript SDK package and a free, open-source SaaS platform for tracking website analytics.
Better Analytics has different parts:
TypeScript SDK
Lightweight analytics SDK (< 3KB gzipped) with zero dependencies, supporting React, Next.js, Expo, and vanilla JavaScript.
SaaS Platform
Free, open-source analytics dashboard with real-time tracking, team management, and unlimited events.
Self-Hostable
Complete control over your data with Docker deployment and PostgreSQL database.
Developer-Friendly
Built with TypeScript, modern tooling, and comprehensive documentation for the best developer experience.
Want to learn more?
Read our in-depth What is Better Analytics introduction.
Key Features
Privacy-First: No cookies, no tracking, GDPR compliant by design.
Zero Dependencies: Lightweight SDK with tree-shaking support.
Real-time Analytics: Live dashboard with instant event tracking.
Package Installation
Install the Better Analytics SDK in your project:
pnpm add better-analyticsNext.js Setup (Recommended)
The easiest way to get started is with our Next.js integration:
import { Analytics } from 'better-analytics/next'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Analytics site="your-site-key" />
{children}
</body>
</html>
)
}Need a site key?
Get your site key from the Better Analytics dashboard after signing up.
SaaS Platform Setup
1. Create Account
Visit better-analytics.app and sign up with:
- Magic Link: Passwordless authentication via email
- GitHub: OAuth integration
- Google: OAuth integration
2. Complete Onboarding
After signing up, you'll automatically get:
- A new organization created
- Your first site configured
- A unique site key generated
3. Get Your Site Key
During onboarding, you'll receive a site key like BA_abc123. Copy this for your integration.
4. Add to Your Website
Use the provided code examples for your framework:
import { Analytics } from 'better-analytics/next'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Analytics site="BA_your_site_key" />
{children}
</body>
</html>
)
}5. View Your Analytics
After implementing the code:
- Visit your website to generate some events
- Go to your Better Analytics dashboard
- Navigate to your site's stats page
- See real-time analytics data!
Environment Variables
For production deployments, use environment variables:
NEXT_PUBLIC_BA_SITE=BA_your_site_key
# Optional: Custom endpoint for self-hosted instances
NEXT_PUBLIC_BA_URL=https://your-analytics-domain.com/api/collectThen use without props:
import { Analytics } from 'better-analytics/next'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Analytics />
{children}
</body>
</html>
)
}Custom Events
Track user interactions with custom events:
import { track } from 'better-analytics'
// Track button clicks
track('button_click', {
button: 'hero-cta',
page: 'homepage'
})
// Track form submissions
track('form_submit', {
form: 'contact',
success: true
})
// Track feature usage
track('feature_used', {
feature: 'dark_mode',
enabled: true
})Self-Hosting
Want to host your own instance? Better Analytics is completely open-source:
-
Clone the repository
git clone https://github.com/better-analytics/better-analytics.git -
Follow the setup guide Check the Server documentation for detailed deployment instructions.
-
Use your custom endpoint
<Analytics site="your-site-key" endpoint="https://your-domain.com/api/collect" />
What's Next?
Client-side Tracking
Core web tracking with vanilla JavaScript, React, and other frameworks.
Server-side Tracking
Track events from API routes, serverless functions, and edge environments.
Next.js Integration
Automatic page tracking and server-side analytics for Next.js apps.
Expo & React Native
Mobile app analytics with automatic navigation and offline support.
FAQ
How is this guide?