Analytics-tracker NPM

Analytics Tracker

A comprehensive analytics tracking library for React applications. This library helps you track page views, visitors, devices, browsers, and more in your React/Next.js applications.

Features

📊 Page view tracking
👥 Unique visitor tracking
📱 Device and browser detection
🌍 Framework agnostic (works with Next.js and other React frameworks)
🔄 Automatic route change detection
⚡ Lightweight and performant
🎯 Configurable sampling rate
🚫 Path exclusion support
🔌 Automatic data sending to your endpoint

Installation

npm install analytics-tracker
# or
yarn add analytics-tracker

Usage

Basic Usage

Wrap your application with the AnalyticsProvider:

import { AnalyticsProvider } from 'analytics-tracker';

function App() {
  return (
    <AnalyticsProvider 
      siteId="your-site-id" // Required: unique identifier for your site
      endpoint="https://your-analytics-api.com/collect" // Required: endpoint where analytics data will be sent
      sampleRate={1} // Optional: collect data for 100% of users
      excludePaths={['/private']} // Optional: exclude certain paths
    >
      <YourApp />
    </AnalyticsProvider>
  );
}

Next.js Integration

For Next.js 13+ (App Router)

The AnalyticsProvider is a Client Component and must be properly set up in Next.js 13+ applications. Here's how to integrate it:

Create a client-side providers file:

// app/providers.tsx
'use client';

import { AnalyticsProvider } from 'analytics-tracker';

export function Providers({ children }) {
  return (
    <AnalyticsProvider
      siteId="your-site-id"
      endpoint="https://your-analytics-api.com/collect"
    >
      {children}
    </AnalyticsProvider>
  );
}

Use it in your root layout:

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

For Next.js Pages Router

If you're using the Pages Router, add the provider to your _app.tsx:

// pages/_app.tsx
import { AnalyticsProvider } from 'analytics-tracker';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AnalyticsProvider 
      siteId="your-site-id"
      endpoint="https://your-analytics-api.com/collect"
    >
      <Component {...pageProps} />
    </AnalyticsProvider>
  );
}

export default MyApp;

Analytics Data Structure

The collected analytics data includes:

interface AnalyticsData {
  siteId: string;
  pageView: {
    path: string;
    title: string;
    timestamp: number;
  };
  visitor: {
    id: string;
    firstVisit: number;
    referrer: string | null;
  };
  device: {
    type: string;
    browser: string;
    browserVersion: string;
    os: string;
    osVersion: string;
  };
  location: {
    country?: string;
    region?: string;
    city?: string;
  };
}

Props

The AnalyticsProvider component accepts the following props:

siteId: (required) Unique identifier for your site/application
endpoint: (required) URL where analytics data will be sent via POST requests
onDataCollected: (optional) Callback function that receives the analytics data
disabled: (optional) Disable analytics collection
sampleRate: (optional) Number between 0 and 1 to control data collection frequency
excludePaths: (optional) Array of path patterns to exclude from tracking

API Endpoint Requirements

Your endpoint should: 1. Accept POST requests 2. Expect JSON data in the format specified above 3. Return appropriate HTTP status codes (200 for success)

License

MIT

analytics react nextjs tracking metrics

ua-parser-js

1.0.1

5 months ago

1.0.0

5 months ago