4.1.3 • Published 8 months ago

react-lens-analytics v4.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
8 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

8 months ago

4.1.2

8 months ago

4.1.1

8 months ago

4.1.0

8 months ago

4.0.9

8 months ago

4.0.8

9 months ago

4.0.7

9 months ago

4.0.6

9 months ago

4.0.5

9 months ago

4.0.4

9 months ago

4.0.3

9 months ago

4.0.2

9 months ago

4.0.1

9 months ago

4.0.0

9 months ago

3.1.4

9 months ago

3.0.4

10 months ago

3.0.3

10 months ago

3.0.2

10 months ago

3.0.1

10 months ago

3.0.0

10 months ago

2.0.3

11 months ago

2.0.2

11 months ago

2.0.1

11 months ago

2.0.0

11 months ago