trackcel
v0.2.0
Published
Simple analytics tracking for React and Next.js applications
Readme
Trackcel - Analytics for React and Next.js
Trackcel is a simple and lightweight analytics package for React and Next.js applications. Easily track page views and custom events without complex setup.
🚀 Installation in Seconds
Copy, paste, and you're done – get Trackcel running in your project with just a few lines of code.
1️⃣ Install the Package
Choose your preferred package manager:
# Using npm
npm install trackcel
2️⃣ Generate Credentials
Get your credentials from your project dashboard.
- Project ID: Required (
e.g., cm8j08uk40304tf4wd33yy07m) - API Key: Secret (
e.g., sk_live_875c2bdf439b42b58ab52b8b4175c8c3)
3️⃣ Create the Provider
In your Next.js project, create a provider component for analytics.
providers/analytics.tsx
"use client";
import { Analytics } from "trackcel";
export default function AnalyticsProvider() {
return (
<Analytics
projectId="cm8j08uk40304tf4wd33yy07m"
apiKey="sk_live_875c2bdf439b42b58ab52b8b4175c8c3"
debug={true}
disableInDevelopment={true}
/>
);
}4️⃣ Add to Your Layout
To track all pages automatically, include the provider in your layout file.
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>
);
}📊 Tracking Custom Events
You can track custom events with ease:
import { init } from "trackcel";
const analytics = init({
projectId: "cm8j08uk40304tf4wd33yy07m",
apiKey: "sk_live_875c2bdf439b42b58ab52b8b4175c8c3",
});
// Track a custom event
analytics.trackEvent("button_click", { buttonName: "Sign Up" });🎯 Features
- 📈 Pageview tracking
- 🎯 Custom event tracking
- 🔄 SPA-friendly (works with Next.js navigation events)
- 🔧 Simple setup, no extra configuration needed
💡 Need Help?
For support, reach out to our documentation or contact us at [email protected].
Happy tracking! 🚀