4.1.3 • Published 5 months ago

react-lens-analytics v4.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

React Lens Analytics

A powerful, privacy-focused analytics solution for React and Next.js applications that provides real-time insights into user behavior and page performance.

✨ Features

  • 📊 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

📦 Installation

npm install react-lens-analytics
# or
yarn add react-lens-analytics
# or
pnpm add react-lens-analytics

🚀 Quick Start

1. Create Your Project

  1. Sign up at ReactLens Dashboard
  2. Create a new project
  3. Copy your project secret from the dashboard

2. Configuration

Option A: Using Environment Variables (Recommended)

Create a .env file in your project root:

PROJECT_SECRET=your_project_secret_here  # For React
# or
NEXT_PUBLIC_PROJECT_SECRET=your_project_secret_here  # For Next.js

Option B: Direct Implementation

You can also pass your project secret directly (not recommended for production):

<Analytics projectId="your_project_secret_here" />

3. Implementation

For React Applications

// App.tsx or your root component
import { Analytics } from 'react-lens-analytics'

function App() {
  return (
    <>
      <YourAppComponents />
      <Analytics 
        projectId={process.env.PROJECT_SECRET!}
      />
    </>
  )
}

For Next.js Applications

// 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>
  )
}

📊 Analytics Dashboard

Access your analytics at ReactLens Dashboard to view:

Real-time Metrics

  • 👥 Active Users
  • 📱 Device Distribution
  • 🌍 Geographic Data
  • 📊 Page Performance
<Analytics 
  projectId="your_project_secret"
/>

🔒 Privacy Compliance

React Lens Analytics is designed with privacy in mind:

  • GDPR Compliant
  • No Personal Data Collection
  • Anonymous Traffic Analysis
  • Cookie-less Tracking Option

🤝 Support

📝 License

MIT © Kartik Malik

analyticsreact-analyticsnextjs-analyticsweb-analyticsreactnextjstrackingmetricsstatisticsuser-trackingpage-viewsreact-componentsanalytics-dashboardwebsite-analyticsperformance-monitoringuser-behaviorreal-time-analyticsvisitor-trackinganalytics-toolreact-lens
4.1.3

5 months ago

4.1.2

5 months ago

4.1.1

5 months ago

4.1.0

5 months ago

4.0.9

5 months ago

4.0.8

6 months ago

4.0.7

6 months ago

4.0.6

6 months ago

4.0.5

6 months ago

4.0.4

6 months ago

4.0.3

6 months ago

4.0.2

6 months ago

4.0.1

6 months ago

4.0.0

6 months ago

3.1.4

6 months ago

3.0.4

7 months ago

3.0.3

7 months ago

3.0.2

7 months ago

3.0.1

7 months ago

3.0.0

7 months ago

2.0.3

8 months ago

2.0.2

8 months ago

2.0.1

8 months ago

2.0.0

8 months ago