Next.js

Add PostMetric to your Next.js App Router project in minutes.

Installation

Step 1: Add the tracking script

Add the tracking script to your root layout (app/layout.tsx):

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src={`https://your-domain.com/api/track.js?site=YOUR_TRACKING_CODE`}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Replace YOUR_TRACKING_CODE with your tracking code from the dashboard.

Step 2: Verify installation

Start your development server: npm run dev
Visit your website
Check your PostMetric dashboard - you should see your visit

Track custom goals

Track custom goals in your Next.js components:

"use client";

export default function Button() {
  const handleClick = () => {
    if (typeof window !== "undefined" && window.postMetric) {
      window.postMetric("track", "goal", {
        event: "button_click",
        value: 0,
      });
    }
  };

  return <button onClick={handleClick}>Click me</button>;
}

User identification

Identify users when they log in:

"use client";

export default function LoginButton() {
  const handleLogin = async () => {
    // Your login logic here
    const user = await login();

    if (typeof window !== "undefined" && window.postMetric) {
      window.postMetric("identify", {
        userId: user.id,
        email: user.email,
        name: user.name,
      });
    }
  };

  return <button onClick={handleLogin}>Login</button>;
}

TypeScript types

Add TypeScript types for better type safety:

// types/PostMetric.d.ts
declare global {
  interface Window {
    PostMetric: (
      method: "track" | "identify",
      type: "pageview" | "goal",
      data?: {
        event?: string;
        value?: number;
        userId?: string;
        email?: string;
        name?: string;
      }
    ) => void;
  }
}

export {};

Server-side tracking

For server-side tracking, use the API directly:

// app/api/track-goal/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const { event, value, visitorId, sessionId } = await request.json();

  const response = await fetch("https://your-domain.com/api/v1/goal", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.POSTMETRIC_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      event,
      value,
      visitorId,
      sessionId,
    }),
  });

  return NextResponse.json(await response.json());
}

Next steps

Track custom goals

Learn how to track custom user actions

Get started

Installation guides

Revenue attribution

Proxy guides

Advanced features

Installation

Step 1: Add the tracking script

Step 2: Verify installation

Track custom goals

User identification

TypeScript types

Server-side tracking

Next steps

Track custom goals

​Installation

​Step 1: Add the tracking script

​Step 2: Verify installation

​Track custom goals

​User identification

​TypeScript types

​Server-side tracking

​Next steps

Track custom goals

Installation

Step 1: Add the tracking script

Step 2: Verify installation

Track custom goals

User identification

TypeScript types

Server-side tracking

Next steps