react-lens-analytics

v2.0.2

Published

2 days ago

This is test button made for a tutorial

Downloads

101

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

Sign up at ReactLens Dashboard
Create a new project
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
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.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"
/>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme