DEV Community

Cover image for Analytics Tool For React Devs (Vercel Analytics Alternative)
Kartik Malik
Kartik Malik

Posted on

Analytics Tool For React Devs (Vercel Analytics Alternative)

As a React developer, I often found myself wishing for more detailed geographical insights for my applications. This need became particularly apparent when working on my portfolio website hosted on Vercel. While Vercel's analytics were helpful, they lacked the granular city and region data I craved. That's when the idea for React Lens Analytics was born.

The Journey from Idea to Reality

Over three months, I poured my expertise and passion into creating a solution that would not only solve my problem but potentially help countless other React developers. The result? ReactLens Analytics - a platform-independent analytics tool designed specifically for React applications.

Quick Setup Guide

1. Install the Package

npm install react-lens-analytics
Enter fullscreen mode Exit fullscreen mode

2. Configure Environment Variables

For Next.js:

NEXT_PUBLIC_PROJECT_SECRET=your_project_secret_here
Enter fullscreen mode Exit fullscreen mode

For React:

REACT_APP_PROJECT_SECRET=your_project_secret_here
Enter fullscreen mode Exit fullscreen mode

3. Implementation

Next.js Setup:

// components/AnalyticsWrapper.tsx
'use client'
import React from 'react'
import { Analytics } from 'react-lens-analytics'

export function AnalyticsWrapper() {
  return (
    <Analytics projectId={process.env.NEXT_PUBLIC_PROJECT_SECRET!} />
  )
}

// app/layout.tsx
import React from 'react'
import { AnalyticsWrapper } from '@/components/AnalyticsWrapper'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <AnalyticsWrapper />
      </body>
    </html>
  )
}
Enter fullscreen mode Exit fullscreen mode

React Setup:

// src/components/AnalyticsWrapper.tsx
import React from 'react'
import { Analytics } from 'react-lens-analytics'

export function AnalyticsWrapper() {
  return (
    <Analytics projectId={process.env.REACT_APP_PROJECT_SECRET!} />
  )
}

// src/App.tsx
import React from 'react'
import { AnalyticsWrapper } from './components/AnalyticsWrapper'

function App() {
  return (
    <div>
      <AnalyticsWrapper />
      {/* Your app content */}
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Key Features That Set ReactLens Apart

  1. Platform Independence: Whether you're using Vercel, Netlify, AWS, or any other hosting platform, React Lens works seamlessly with your setup.
  2. Detailed Geographical Insights: Get the city and region-level data that other analytics tools often miss.
  3. Privacy-Focused: We've built React Lens with a strong emphasis on user privacy, ensuring you can gather insights without compromising ethical standards.
  4. Easy Integration: Set up React Lens in your project in just a few minutes, with minimal code changes required.
  5. Completely Free: Access powerful analytics without any cost, making it accessible for developers at any stage of their journey.

Resources and Community

What's Next for React Lens?

We're actively working on exciting new features:

  • Advanced filtering capabilities
  • Custom event tracking
  • Enhanced data visualization options
  • API improvements for better integration

Join Our Community

ReactLens Analytics is more than just a tool - it's a growing community of developers passionate about understanding their applications better. Your feedback and experiences will be invaluable in shaping its future.

Get Started Today

  1. Visit reactlens.kartikmalik.tech
  2. Create your free account
  3. Follow our simple setup guide
  4. Start discovering insights about your users

Have you faced similar challenges in getting detailed geographical data for your React apps? Share your experiences in our Discord community - we'd love to hear your story!

Remember, great insights lead to better applications. Give React Lens Analytics a try today and discover what you've been missing about your audience!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay