React Lens Analytics

A powerful, privacy-focused analytics solution for React and Next.js applications.

💡

React Lens Analytics is currently in beta. While stable for production use, expect regular improvements.

Features

Free Features

Real-time Analytics

Page views and visitors
Active Users
Operating system distribution
Browser usage statistics
Country-level tracking
Traffic sources (referrers)
Page path analysis

Data Filtering

Filter your analytics by:

Filter by time period
OS / Browser
Countries
Traffic sources
Page paths

Core Benefits

Unlimited projects
Zero configuration setup
GDPR compliance
Basic dashboard
Optimized performance

Quick Start

1. Install Package

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

2. Get Project Secret

Sign up at ReactLens Dashboard (opens in a new tab)
Create a project
Copy your project secret

3. Setup Environment

NEXT_PUBLIC_PROJECT_SECRET=your_project_secret_here

For Next.js, use NEXT_PUBLIC_ prefix to expose the variable to the browser. For React, use REACT_APP_ prefix.

4. Implementation

// components/Analytics.tsx
'use client'
import { Analytics } from 'react-lens-analytics'
 
export function AnalyticsWrapper() {
  return <Analytics projectSecret={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>
  )
}

⚠️

Ensure that you're passing the projectSecret prop to the Analytics component. This is crucial for identifying your project and sending data to the correct dashboard.

4. Go to your ReactLens project dashboard

Access your analytics at ReactLens Dashboard (opens in a new tab) to view:

Real-time Metrics

Filter by time period
OS / Browser
Countries
Traffic sources
Page paths