@rironib/analytics

v1.0.0

Published

a month ago

A unified analytics provider for Next.js - Integrate Google Analytics, Plausible, Fathom, Mixpanel, Segment, Hotjar, Clarity, and more with a single component

Downloads

0High
0Medium
0Low

rironib

analytics google-analytics ahrefs plausible fathom mixpanel segment hotjar clarity nextjs next-app-router react tracking

Analytics Provider for Next.js App Router

A unified, easy-to-use analytics provider specifically designed for Next.js App Router applications. Integrate multiple analytics platforms with a single component.

Features

✨ 8 Analytics Providers - Support for Google Analytics, Ahrefs, Plausible, Fathom, Mixpanel, Segment, Hotjar, and Microsoft Clarity

🚀 Zero Configuration - Just pass your tracking IDs and you're done

⚡ Performance Optimized - Uses Next.js Script component with afterInteractive strategy

🎯 TypeScript Support - Fully typed for better developer experience

🔒 Privacy-Focused Options - Includes privacy-first analytics like Plausible and Fathom

📦 Tree-Shakeable - Only bundle the providers you use

🎨 Next.js App Router Ready - Designed specifically for the App Router architecture

Installation

npm install @rironib/analytics
# or
yarn add @rironib/analytics
# or
pnpm add @rironib/analytics

Usage

Basic Usage (Next.js App Router)

Add the AnalyticsProvider component to your app/layout.tsx:

import { AnalyticsProvider } from "@rironib/analytics";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <AnalyticsProvider
          google={process.env.NEXT_PUBLIC_GA_ID}
          plausible="yourdomain.com"
          clarity={process.env.NEXT_PUBLIC_CLARITY_ID}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Supported Providers

Google Analytics

<AnalyticsProvider google="G-XXXXXXXXXX" />

Ahrefs

<AnalyticsProvider ahrefs="GTM-XXXXXXX" />

Plausible

<AnalyticsProvider plausible="yourdomain.com" />

Fathom

<AnalyticsProvider fathom="ABCDEFGH" />

Mixpanel

<AnalyticsProvider mixpanel="your-token" />

Segment

<AnalyticsProvider segment="your-write-key" />

Hotjar

<AnalyticsProvider hotjar="1234567" />

Microsoft Clarity

<AnalyticsProvider clarity="abcdefghij" />

Multiple Providers

You can use multiple analytics providers simultaneously:

<AnalyticsProvider
  google={process.env.NEXT_PUBLIC_GA_ID}
  plausible="yourdomain.com"
  clarity={process.env.NEXT_PUBLIC_CLARITY_ID}
  hotjar={process.env.NEXT_PUBLIC_HOTJAR_ID}
/>

Environment Variables

Create a .env.local file in your Next.js project:

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_AHREFS_ID=GTM-XXXXXXX
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
NEXT_PUBLIC_FATHOM_ID=ABCDEFGH
NEXT_PUBLIC_MIXPANEL_TOKEN=your-token
NEXT_PUBLIC_SEGMENT_KEY=your-write-key
NEXT_PUBLIC_HOTJAR_ID=1234567
NEXT_PUBLIC_CLARITY_ID=abcdefghij

Then use them in your component:

<AnalyticsProvider
  google={process.env.NEXT_PUBLIC_GA_ID}
  ahrefs={process.env.NEXT_PUBLIC_AHREFS_ID}
  plausible={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
  fathom={process.env.NEXT_PUBLIC_FATHOM_ID}
  mixpanel={process.env.NEXT_PUBLIC_MIXPANEL_TOKEN}
  segment={process.env.NEXT_PUBLIC_SEGMENT_KEY}
  hotjar={process.env.NEXT_PUBLIC_HOTJAR_ID}
  clarity={process.env.NEXT_PUBLIC_CLARITY_ID}
/>

Individual Provider Components

You can also import and use individual provider components:

import { GoogleAnalytics, PlausibleAnalytics } from "@rironib/analytics";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <GoogleAnalytics id={process.env.NEXT_PUBLIC_GA_ID} />
        <PlausibleAnalytics id="yourdomain.com" />
      </head>
      <body>{children}</body>
    </html>
  );
}

API Reference

AnalyticsProvider Props

| Prop | Type | Description | | ----------- | -------- | ---------------------------------------------- | | google | string | Google Analytics measurement ID (G-XXXXXXXXXX) | | ahrefs | string | Ahrefs/GTM container ID (GTM-XXXXXXX) | | plausible | string | Your domain name for Plausible | | fathom | string | Fathom site ID | | mixpanel | string | Mixpanel project token | | segment | string | Segment write key | | hotjar | string | Hotjar site ID | | clarity | string | Microsoft Clarity project ID |

TypeScript

This package includes TypeScript definitions. All props are fully typed for a better development experience.

import type { AnalyticsProviderProps } from "@rironib/analytics";

const analyticsConfig: AnalyticsProviderProps = {
  google: "G-XXXXXXXXXX",
  plausible: "yourdomain.com",
};

Performance

All analytics scripts are loaded using Next.js's Script component with the afterInteractive strategy, ensuring they don't block the initial page load. This provides optimal performance while still capturing all necessary analytics data.

Privacy

This package includes several privacy-focused analytics providers:

Plausible - No cookies, GDPR compliant
Fathom - Privacy-first, GDPR compliant

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © rironib

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.