Analytics

Integrate analytics to understand how users interact with your app.

Google Analytics

Setup

Create a property at Google Analytics
Get your Measurement ID (G-XXXXXXXXXX)
Add to environment variables:

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Implementation

// components/analytics/google-analytics.tsx
'use client';

import Script from 'next/script';

export function GoogleAnalytics() {
  const measurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;

  if (!measurementId) return null;

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${measurementId}', {
            page_path: window.location.pathname,
          });
        `}
      </Script>
    </>
  );
}

Add to Layout

// app/[locale]/layout.tsx
import { GoogleAnalytics } from '@/components/analytics/google-analytics';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GoogleAnalytics />
      </body>
    </html>
  );
}

Track Custom Events

// lib/analytics.ts
export function trackEvent(
  action: string,
  category: string,
  label?: string,
  value?: number
) {
  if (typeof window !== 'undefined' && (window as any).gtag) {
    (window as any).gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value,
    });
  }
}

// Usage
import { trackEvent } from '@/lib/analytics';

function handlePurchase() {
  trackEvent('purchase', 'ecommerce', 'Pro Plan', 29.99);
}

OpenPanel

OpenPanel is a privacy-focused, open-source analytics platform.

Setup

Sign up at OpenPanel
Create a new project and get your Client ID
Add to environment variables:

NEXT_PUBLIC_OPENPANEL_CLIENT_ID=your_client_id

Implementation

// components/analytics/openpanel.tsx
'use client';

import { useEffect } from 'react';
import { OpenpanelProvider } from '@openpanel/nextjs';

export function OpenPanel({ children }: { children: React.ReactNode }) {
  const clientId = process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID;

  if (!clientId) return <>{children}</>;

  return (
    <OpenpanelProvider
      clientId={clientId}
      trackScreenViews={true}
      trackOutgoingLinks={true}
    >
      {children}
    </OpenpanelProvider>
  );
}

Add to Layout

// app/[locale]/layout.tsx
import { OpenPanel } from '@/components/analytics/openpanel';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <OpenPanel>{children}</OpenPanel>
      </body>
    </html>
  );
}

Track Custom Events

// Usage
import { useOpenPanel } from '@openpanel/nextjs';

function MyComponent() {
  const { track } = useOpenPanel();

  const handleClick = () => {
    track('button_clicked', {
      button_name: 'subscribe',
      location: 'header',
    });
  };

  return <button onClick={handleClick}>Subscribe</button>;
}

OpenFast

OpenFast is a lightweight, fast analytics solution focused on performance.

Setup

Create an account at OpenFast
Get your tracking token
Add to environment variables:

NEXT_PUBLIC_OPENFAST_TOKEN=your_token

Implementation

// components/analytics/openfast.tsx
'use client';

import Script from 'next/script';

export function OpenFast() {
  const token = process.env.NEXT_PUBLIC_OPENFAST_TOKEN;

  if (!token) return null;

  return (
    <Script
      id="openfast-analytics"
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://cdn.openfast.dev/analytics.js?id='+i;f.parentNode.insertBefore(j,f);
          })(window,document,'script','openfast','${token}');
        `,
      }}
    />
  );
}

Add to Layout

// app/[locale]/layout.tsx
import { OpenFast } from '@/components/analytics/openfast';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <OpenFast />
      </body>
    </html>
  );
}

Track Custom Events

// lib/analytics.ts
declare global {
  interface Window {
    openfast?: (action: string, data?: Record<string, any>) => void;
  }
}

export function trackOpenFastEvent(event: string, data?: Record<string, any>) {
  if (typeof window !== 'undefined' && window.openfast) {
    window.openfast('track', { event, ...data });
  }
}

// Usage
import { trackOpenFastEvent } from '@/lib/analytics';

function handleSignup() {
  trackOpenFastEvent('signup', {
    plan: 'pro',
    method: 'google',
  });
}

Next Steps

Set up Error Tracking
Implement A/B Testing
Learn about Performance Optimization

Analytics

On this page