react-lens-analytics
Version:
This is test button made for a tutorial
146 lines (111 loc) • 3.01 kB
Markdown
A powerful, privacy-focused analytics solution for React and Next.js applications that provides real-time insights into user behavior and page performance.
- 📊 Real-time Page View & User Analytics
- 🌍 Geographic Data Tracking
- 📱 Device & Browser Analytics
- ⚡ Zero-config Setup
- 🔒 Privacy-Compliant
- 🎯 Custom Event Tracking
- 🚀 Optimized for Performance
- 💻 Cross-platform Support
```bash
npm install react-lens-analytics
yarn add react-lens-analytics
pnpm add react-lens-analytics
```
1. Sign up at [ReactLens Dashboard](https://reactlens.kartikmalik.tech)
2. Create a new project
3. Copy your project secret from the dashboard
Create a `.env` file in your project root:
```env
PROJECT_SECRET=your_project_secret_here
NEXT_PUBLIC_PROJECT_SECRET=your_project_secret_here
```
You can also pass your project secret directly (not recommended for production):
```tsx
<Analytics projectId="your_project_secret_here" />
```
```tsx
// App.tsx or your root component
import { Analytics } from 'react-lens-analytics'
function App() {
return (
<>
<YourAppComponents />
<Analytics
projectId={process.env.PROJECT_SECRET!}
/>
</>
)
}
```
```tsx
// components/Analytics.tsx
'use client'
import { Analytics } from 'react-lens-analytics'
export function AnalyticsWrapper() {
return (
<Analytics
projectId={process.env.NEXT_PUBLIC_PROJECT_SECRET!}
/>
)
}
// app/layout.tsx
import { AnalyticsWrapper } from '@/components/Analytics'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<AnalyticsWrapper />
</body>
</html>
)
}
```
Access your analytics at [ReactLens Dashboard](https://reactlens.kartikmalik.tech) to view:
- 👥 Active Users
- 📱 Device Distribution
- 🌍 Geographic Data
- 📊 Page Performance
```tsx
<Analytics
projectId="your_project_secret"
/>
```
React Lens Analytics is designed with privacy in mind:
- GDPR Compliant
- No Personal Data Collection
- Anonymous Traffic Analysis
- Cookie-less Tracking Option
- 📚 [Documentation](https://docs.kartikmalik.tech)
- 💬 [Discord Community](https://discord.gg/daUeprZqPB)
- 📧 Email: kartikmalikdevofficial@gmail.com
- 🐛 [Issue Tracker](https://github.com/kartikmalik0/react-lens-analytics/issues)
MIT © [Kartik Malik](https://github.com/kartikmalik0)
---
<p align="center">
Made with ❤️ by <a href="https://kartikmalik.tech">Kartik Malik</a>
</p>