Analytics

Set up Plausible, Google Analytics, or PostHog for traffic tracking and event analytics.

Overview

ScaleRocket supports multiple analytics providers. You can use Plausible for privacy-friendly analytics, Google Analytics for full-featured tracking, or PostHog for product analytics. All are configured through environment variables.

Plausible

Plausible is a lightweight, privacy-friendly analytics tool that does not require cookie banners.

Setup

Create an account at plausible.io and add your domain.
Set the environment variable:

NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yoursite.com

Add the script to your root layout:

// src/app/layout.tsx
<head>
  {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (
    <script
      defer
      data-domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
      src="https://plausible.io/js/script.js"
    />
  )}
</head>

Event Tracking

// Track custom events
window.plausible?.("signup", { props: { plan: "pro" } });

Google Analytics

Setup

Create a GA4 property at analytics.google.com.
Set the environment variable:

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Add the scripts to your root layout:

// src/app/layout.tsx
<head>
  {process.env.NEXT_PUBLIC_GA_ID && (
    <>
      <script
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
      />
      <script
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
          `,
        }}
      />
    </>
  )}
</head>

Event Tracking

// Track custom events
gtag("event", "purchase", { value: 99, currency: "USD" });

PostHog

PostHog provides product analytics, session recording, and feature flags.

Setup

Create an account at posthog.com.
Set the environment variables:

NEXT_PUBLIC_POSTHOG_KEY=phc_XXXXXXXXXXXXXXX
NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com

Initialize PostHog in a client component:

// src/app/providers.tsx
"use client";

import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";
import { useEffect } from "react";

export function PHProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (process.env.NEXT_PUBLIC_POSTHOG_KEY) {
      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
        capture_pageview: true,
      });
    }
  }, []);

  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
}

Wrap your layout with the provider:

<PHProvider>{children}</PHProvider>

Event Tracking

import posthog from "posthog-js";

posthog.capture("button_clicked", { button: "cta_hero" });

Where to Add Tracking Code

Location	Purpose
`src/app/layout.tsx` `<head>`	Script tags for Plausible and GA
`src/app/providers.tsx`	PostHog provider initialization
Component event handlers	Custom event tracking calls
API routes / Edge Functions	Server-side event tracking

Event Tracking Patterns

Track CTA clicks

<button
  onClick={() => {
    window.plausible?.("cta_click", { props: { location: "hero" } });
    // or: gtag("event", "cta_click", { location: "hero" });
    // or: posthog.capture("cta_click", { location: "hero" });
  }}
>
  Get Started
</button>

Track page views (SPA)

For client-side navigation, track page views on route changes. PostHog handles this automatically with capture_pageview: true. For GA and Plausible, use a route change listener or the Next.js usePathname hook.

Tips

Use only one analytics provider to keep bundle size small and avoid double-counting.
Plausible is the simplest choice and avoids GDPR cookie consent requirements.
Never send personally identifiable information (PII) to analytics unless your privacy policy allows it.
Wrap analytics scripts in environment variable checks so they only load in production.

Done reading? Mark this page as complete.

Analytics

On this page