trackcel
v0.3.0
Published
Lightweight analytics for React and Next.js — pageviews, events, clicks, scroll depth, and sessions
Downloads
25
Maintainers
vshallReadme
Trackcel - Analytics for React and Next.js
Trackcel is a lightweight analytics SDK for React and Next.js. It tracks pageviews, custom events, clicks, scroll depth, and session duration.
Installation
npm install trackcelNext.js App Router (recommended)
// app/providers/analytics.tsx
"use client";
import { Suspense } from "react";
import { NextAnalytics } from "trackcel/next";
export function AnalyticsProvider() {
return (
<Suspense fallback={null}>
<NextAnalytics
projectId={process.env.NEXT_PUBLIC_TRACKCEL_PROJECT_ID!}
apiKey={process.env.NEXT_PUBLIC_TRACKCEL_API_KEY!}
disableInDevelopment={true}
endpoint={process.env.NEXT_PUBLIC_TRACKCEL_ENDPOINT}
/>
</Suspense>
);
}// app/layout.tsx
import { AnalyticsProvider } from "./providers/analytics";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<AnalyticsProvider />
</body>
</html>
);
}Custom events
import { init } from "trackcel";
const analytics = init({
projectId: "your-project-id",
apiKey: "sk_live_...",
});
analytics.trackEvent("signup_click", { plan: "pro" });Environment variables
| Variable | Description |
|----------|-------------|
| NEXT_PUBLIC_TRACKCEL_PROJECT_ID | Your project ID |
| NEXT_PUBLIC_TRACKCEL_API_KEY | Your API key |
| NEXT_PUBLIC_TRACKCEL_ENDPOINT | Optional custom collect endpoint |
Features
- Pageview tracking with SPA navigation support
- Visitor and session IDs (cookie/localStorage based)
- Custom event tracking
- Click heatmap data collection
- Scroll depth milestones
- Session duration on page exit
- Configurable endpoint for self-hosting
- Development mode disable