# clickchutney-analytics 🌶️
Privacy-first web analytics - bite-sized insights for your website
## Features
- 🍪 **Cookie-free tracking** - GDPR compliant by design
- 🏃♂️ **Lightweight** - Under 2KB gzipped
- ⚡ **Fast** - Uses sendBeacon API for optimal performance
- 🔒 **Privacy-first** - No personal data collection
- 📱 **Universal** - Works with any framework or vanilla JS
- 🚀 **Real-time** - Instant event tracking to Cloudflare Workers
## Quick Start
### Next.js (App Router)
```tsx
// app/layout.tsx
import { Analytics } from 'clickchutney-analytics/react'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
### Next.js (Pages Router)
```tsx
// pages/_app.tsx
import { Analytics } from 'clickchutney-analytics/react'
export default function App({ Component, pageProps }) {
return (
<>
)
}
```
### React
```tsx
import { Analytics } from 'clickchutney-analytics/react'
function App() {
return (
)
}
```
### Vanilla JavaScript
```html
```
Or using the global:
```html
```
## API
### `inject(options?)`
Initialize the analytics tracking.
```typescript
import { inject } from 'clickchutney-analytics'
inject({
endpoint: 'https://your-worker.domain.com/api/collect', // optional
debug: true, // optional, default: false
beforeSend: (event) => {
// Optional: filter or modify events before sending
if (event.url.includes('localhost')) return null
return event
}
})
```
### `track(eventName, properties?)`
Track a custom event.
```typescript
import { track } from 'clickchutney-analytics'
track('purchase', {
value: 99.99,
currency: 'USD',
items: 3
})
```
### `page(path?)`
Manually track a page view (automatically done on route changes).
```typescript
import { page } from 'clickchutney-analytics'
page('/custom-page')
```
### `` Component Props
```typescript
interface AnalyticsProps {
endpoint?: string; // Custom endpoint URL
debug?: boolean; // Enable debug logging
enabled?: boolean; // Toggle analytics on/off
beforeSend?: (event: any) => any | null;
}
```
## Configuration
### Custom Endpoint
By default, analytics are sent to `https://clickchutney-analytics.contact-sushilpandey.workers.dev/api/collect`. You can specify a custom endpoint:
```typescript
inject({
endpoint: 'https://your-domain.com/api/collect'
})
```
### Development Mode
Analytics are automatically disabled in development mode unless `debug: true` is set.
## Event Data
Each event includes:
```typescript
{
type: 'pageview' | 'custom_event_name',
timestamp: number,
url: string,
referrer?: string,
title: string,
sessionId: string,
userId: string,
userAgent: string,
screen: { width: number, height: number },
viewport: { width: number, height: number },
properties?: { [key: string]: any }
}
```
## Privacy
- No cookies are used
- No personal information is collected
- Session/User IDs are randomly generated
- GDPR compliant by design
- Data is processed on Cloudflare's edge network
## License
MIT