Analytics

Learn how to integrate analytics and tracking into your Sushify Next.js application

Sushify Next.js includes flexible analytics integration with support for multiple analytics providers, allowing you to track user behavior, page views, and custom events.

Features

Multiple Providers: Support for Plausible, PostHog, Google Analytics, Mixpanel, Umami, Pirsch, Vercel Analytics, and custom solutions
Privacy-Focused: Built-in support for privacy-friendly analytics
Easy Integration: Simple provider switching via environment variables
Event Tracking: Track custom events and conversions
Type-Safe: Full TypeScript support
GDPR Compliant: Privacy-friendly options available

Supported Providers

Provider Pattern (Switchable via `index.tsx`)

Plausible - Privacy-friendly, lightweight analytics (Recommended)
PostHog - Product analytics and feature flags (requires posthog-js)
Google Analytics - Comprehensive web analytics (uses Next.js built-in)
Mixpanel - Product analytics and user tracking (requires mixpanel-browser)
Umami - Privacy-focused, open-source analytics
Pirsch - Simple, privacy-friendly analytics
Custom - Integrate your own analytics solution

Standalone Integration

Vercel Analytics - Built-in Vercel analytics (separate integration, not using provider pattern)

Setup

1. Choose Your Analytics Provider

Select an analytics provider and configure it in your .env.local:

.env.local

# Pirsch
NEXT_PUBLIC_PIRSCH_CODE=""

# Plausible
NEXT_PUBLIC_PLAUSIBLE_URL=""

# Mixpanel
NEXT_PUBLIC_MIXPANEL_TOKEN=""

# Google Analytics
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=""

# Umami
NEXT_PUBLIC_UMAMI_TRACKING_ID=""

# PostHog
NEXT_PUBLIC_POSTHOG_KEY=""

2. Configure Analytics Provider

To switch between analytics providers, modify the export statement in apps/web/modules/analytics/index.tsx:

apps/web/modules/analytics/index.tsx

// Choose one of the following providers:
export * from "./provider/custom";      // Custom analytics (default)
// export * from "./provider/plausible";  // Plausible
// export * from "./provider/posthog";    // PostHog
// export * from "./provider/google";     // Google Analytics
// export * from "./provider/mixpanel";   // Mixpanel
// export * from "./provider/umami";      // Umami
// export * from "./provider/pirsch";     // Pirsch

Simply uncomment the provider you want to use and comment out the others.

Provider Configuration

Plausible (Recommended)

Privacy-friendly, lightweight analytics without cookies:

Sign up at plausible.io
Add your domain
Configure environment variables:

NEXT_PUBLIC_PLAUSIBLE_URL="https://plausible.io/js/script.js"

PostHog

Complete product analytics platform:

Sign up at posthog.com
Get your project API key
Install the PostHog package:

pnpm add --filter web posthog-js

Configure environment variables:

NEXT_PUBLIC_POSTHOG_KEY="phc_..."

Google Analytics

Comprehensive web analytics:

Create a GA4 property at analytics.google.com
Get your Measurement ID
Configure environment variables:

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"

Note: Google Analytics uses @next/third-parties/google which is included with Next.js, no additional package installation needed.

Mixpanel

Product analytics and user tracking:

Sign up at mixpanel.com
Get your project token
Install the Mixpanel package:

pnpm add --filter web mixpanel-browser

Configure environment variables:

NEXT_PUBLIC_MIXPANEL_TOKEN="..."

Umami

Open-source, privacy-focused analytics:

Self-host or use Umami Cloud
Create a website and get the tracking code
Configure environment variables:

NEXT_PUBLIC_UMAMI_TRACKING_ID="..."

Vercel Analytics

Built-in analytics for Vercel deployments:

Enable analytics in your Vercel project settings
Install the package:

pnpm add --filter web @vercel/analytics

Add the Analytics component to your layout manually:

import { Analytics } from '@vercel/analytics/react';

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

Note: Vercel Analytics doesn't use the provider pattern like other analytics services. You need to add it directly to your layout.

Custom Events

Track Custom Events

Use the useAnalytics hook to track custom events:

"use client";

import { useAnalytics } from "@analytics";

export function YourComponent() {
  const { trackEvent } = useAnalytics();

  return (
    <button onClick={() => trackEvent("button_clicked", { value: "example" })}>
      Click me
    </button>
  );
}

Event with Properties

Track events with additional data:

"use client";

import { useAnalytics } from "@analytics";

export function CheckoutButton() {
  const { trackEvent } = useAnalytics();

  const handlePurchase = () => {
    trackEvent("purchase_completed", {
      amount: 99.99,
      currency: "USD",
      product_id: "prod_123",
    });
  };

  return <button onClick={handlePurchase}>Complete Purchase</button>;
}

Usage Examples

Track Button Clicks

"use client";

import { useAnalytics } from "@analytics";

export function CTAButton() {
  const { trackEvent } = useAnalytics();

  const handleClick = () => {
    trackEvent("cta_clicked", {
      location: "hero",
      label: "Get Started",
    });
  };

  return (
    <button onClick={handleClick}>
      Get Started
    </button>
  );
}

Track Form Submissions

"use client";

import { useAnalytics } from "@analytics";

export function NewsletterForm() {
  const { trackEvent } = useAnalytics();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      // Submit form
      await submitNewsletter();

      // Track success
      trackEvent("newsletter_signup", {
        source: "footer",
      });
    } catch (error) {
      // Track error
      trackEvent("newsletter_signup_failed", {
        error: error.message,
      });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
    </form>
  );
}

Analytics

On this page