PureMetrix für Next.js

Erfassen Sie Seitenwechsel im App Router und im Pages Router mit @puremetrix/tracker – cookiefreie Seitenaufrufe und typisierte eigene Ereignisse direkt in Ihrer React-App.

Schnellstart

Legen Sie unter app.puremetrix.org/register eine Website an.
npm install @puremetrix/tracker
Umschließen Sie das Root-Layout mit PureMetrixProvider aus @puremetrix/tracker/react.
Senden Sie bei jeder clientseitigen Navigation einen pageview (der App Router lädt die Seite nicht neu).
Optional: Richten Sie ein Vercel-Rewrite ein, damit Browser /px/js und /px/event auf Ihrer eigenen Domain aufrufen.

import { PureMetrixProvider } from '@puremetrix/tracker/react';

<PureMetrixProvider domain="example.com" key="YOUR_PUBLIC_KEY">
  {children}
</PureMetrixProvider>

Einen Pageview-Hook für den App Router zum Kopieren, Proxy-Optionen und eine Anleitung zum Prüfen finden Sie in der Doku zur Next.js-Anbindung.

Single-Page-Apps: jeden Seitenwechsel zählen

Beim clientseitigen Routing lädt der Browser keine neue Seite, wenn sich die URL ändert. Rufen Sie deshalb bei jedem Routenwechsel track('pageview') auf, damit Ihre Zahlen stimmen. Ohne diesen Hook werden nur vollständige Seitenladevorgänge gezählt.

Doku und verwandte Seiten

Next.js-Anbindung
npm-Paket im Überblick
Vercel-Proxy (Anleitung für Ihre eigene Website – PureMetrix selbst läuft bei Hetzner, nicht bei Vercel)
PureMetrix für SaaS

Zur Next.js-Doku

Zuletzt aktualisiert: September 2026