Messen Sie Next.js-Apps mit @puremetrix/tracker: Das cookiefreie Skript lädt über den React-Provider, sendet Seitenaufrufe und eigene Ereignisse und leitet die Daten auf Wunsch über Ihre eigene Domain (inklusive Rewrite-Vorlage für Vercel).

Voraussetzungen

Next.js 13+ (App Router oder Pages Router).
Eine PureMetrix-Website und ihr öffentlicher Schlüssel aus app.puremetrix.org.

Installation

npm install @puremetrix/tracker

App Router

Umschließen Sie das Root-Layout mit PureMetrixProvider aus @puremetrix/tracker/react. Standardmäßig geht der Provider von einem Proxy auf Ihrer eigenen Domain aus (/px/js, /px/event). Nutzen Sie keinen Proxy, setzen Sie scriptSrc / api auf collect.puremetrix.org.

// app/layout.tsx
import { PureMetrixProvider } from '@puremetrix/tracker/react';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <PureMetrixProvider
          domain="example.com"
          key="YOUR_PUBLIC_KEY"
          // optional without proxy:
          // scriptSrc="https://collect.puremetrix.org/js/script.js"
          // api="https://collect.puremetrix.org/api/event"
        >
          {children}
        </PureMetrixProvider>
      </body>
    </html>
  );
}

Seitenwechsel ohne Neuladen

Der Provider lädt das Tracking-Skript. Im App Router wird die Seite beim Wechsel auf eine andere Route nicht neu geladen. Senden Sie deshalb bei jedem Routenwechsel einen Seitenaufruf:

'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { usePureMetrix } from '@puremetrix/tracker/react';

export function PureMetrixPageviews() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { track } = usePureMetrix();

  useEffect(() => {
    track('pageview');
  }, [pathname, searchParams, track]);

  return null;
}

Binden Sie <PureMetrixPageviews /> innerhalb des Providers ein (z. B. im body-Bereich des Root-Layouts).

Eigene Ereignisse

const { track } = usePureMetrix();
track('SignupClick', { props: { plan: 'growth' } });

Oder außerhalb von React: import { init, track } from '@puremetrix/tracker'.

Vercel-Proxy (empfohlen)

Fügen Sie Rewrites hinzu, damit Browser Skript und Ereignisse über Ihre eigene Domain laden und senden – Werbeblocker blockieren sie dann seltener. Siehe Vercel-Proxy und adapters/proxy/vercel.json. Mit Proxy behalten Sie die Standardwerte des Providers bei (scriptSrc="/px/js", api="/px/event") oder setzen scriptFile="script.js", wenn die Datei unter /px/js/script.js liegt.

Prüfen

In einem privaten Fenster senden sowohl das erste Laden der Seite als auch spätere Seitenwechsel Ereignisse.
Im Tab „Netzwerk“ sehen Sie Anfragen an /px/… (oder collect.puremetrix.org) mit Ihrem öffentlichen Schlüssel.
Die Zahlen im Dashboard ändern sich innerhalb von etwa einer Minute.

Next.js-Integration