@proxima-analytics/analytics

v1.0.1

Published

6 days ago

Proxima Analytics' tracking component for React/Next.js applications

Downloads

115

0High
0Medium
0Low

bless-opoku

analytics react nextjs tracking web analytics metrics

Proxima Analytics Package

A simple analytics tracking solution for React and Next.js applications.

Installation

# npm
npm install @proxima-analytics/analytics

# yarn
yarn add @proxima-analytics/analytics

# pnpm
pnpm add @proxima-analytics/analytics

# bun
bun add @proxima-analytics/analytics

Usage

Next.js (App Router)

// app/layout.tsx
import { Analytics } from '@proxima/analytics';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics publicKey={process.env.NEXT_PUBLIC_PROXIMA_ANALYTICS_KEY} />
      </body>
    </html>
  );
}

Next.js (Pages Router)

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { Analytics } from '@proxima/analytics';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Analytics publicKey={process.env.NEXT_PUBLIC_PROXIMA_ANALYTICS_KEY} />
      <Component {...pageProps} />
    </>
  );
}

React

// App.tsx or App.jsx
import { Analytics } from '@proxima/analytics';

function App() {
  return (
    <>
      <Analytics publicKey="your_website_key_here" />
      {/* Your app content */}
    </>
  );
}

export default App;

Environment Variables

About the Analytics Key

The Proxima Analytics key (NEXT_PUBLIC_PROXIMA_ANALYTICS_KEY) is a public identifier for your website/application. While it's safe to expose this key in your client-side code, we recommend using environment variables for better management and flexibility across different environments (development, staging, production).

Setting up the Key

Next.js Applications

Create a .env.local file in your project root
Add your analytics key:

NEXT_PUBLIC_PROXIMA_ANALYTICS_KEY=your_website_key_here

Note: The NEXT_PUBLIC_ prefix is required for client-side access in Next.js applications.

React Applications

For standard React applications, you can either:

Use environment variables with your build system (Vite, Create React App, etc.)
Directly pass the key to the Analytics component

<Analytics publicKey="your_website_key_here" />

Security Note

The analytics key is designed to be public and is safe to expose in your client-side code.

Features

Lightweight analytics tracking
TypeScript support
Compatible with React 16.8+ and all Next.js versions
Zero dependencies
Safe to use with Server-Side Rendering (SSR)

Requirements

React 16.8.0 or higher
Node.js 14.0.0 or higher