Next.js web analytics setup

1. Open the project in Gumanalytics and choose Settings.
2. Enable session replay or heatmaps if you want to collect them.
3. In Setup, choose the Next.js tab.
4. Copy the generated client component and Route Handler into the displayed paths.
5. Render the Gumanalytics component once from your root layout.

import Script from "next/script";

export function Gumanalytics() {
  return (
    <Script
      id="gumanalytics"
      strategy="afterInteractive"
      src="https://gumanalytics.com/js/analytics.js?v=be9add48f624"
      data-domain="example.com"
      data-endpoint="/api/gumanalytics/watch"
      data-replay-endpoint="/api/gumanalytics/replay"
      data-heatmap-endpoint="/api/gumanalytics/heatmap"
      data-latency-endpoint="https://gumanalytics.com/api/ping"
    />
  );
}

The Setup panel adds replay, heatmap, and sampling attributes when those capture features are enabled. Keep the generated values aligned with the project settings.

import { NextRequest, NextResponse } from "next/server";

const ALLOWED_ROUTES = new Set(["watch", "replay", "heatmap"]);

export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ route: string }> },
) {
  const { route } = await params;
  if (!ALLOWED_ROUTES.has(route)) {
    return NextResponse.json({ error: "Not found" }, { status: 404 });
  }

  const headers = new Headers({ "content-type": "application/json" });
  const forwardedFor =
    request.headers.get("x-forwarded-for") ||
    request.headers.get("x-real-ip");
  if (forwardedFor) {
    headers.set("x-forwarded-for", forwardedFor.split(",")[0].trim());
  }

  const userAgent = request.headers.get("user-agent");
  const country =
    request.headers.get("cf-ipcountry") ||
    request.headers.get("x-vercel-ip-country");
  const city =
    request.headers.get("cf-ipcity") ||
    request.headers.get("x-vercel-ip-city");
  if (userAgent) headers.set("user-agent", userAgent);
  if (country) headers.set("cf-ipcountry", country);
  if (city) headers.set("cf-ipcity", city);

  const response = await fetch(
    "https://gumanalytics.com/api/" + route,
    {
      method: "POST",
      headers,
      body: await request.text(),
      cache: "no-store",
    },
  );

  return new NextResponse(null, {
    status: response.ok ? 204 : response.status,
  });
}

A same-origin endpoint reduces browser blocking of requests sent directly to an external analytics API. It does not guarantee collection when a browser blocks the analytics script itself, JavaScript, or all measurement requests.