Zum Hauptinhalt springen
Zenovaydocs
7 Min. Lesedauer

First-Party Tracking mit Next.js

Richten Sie einen First-Party-Proxy in Ihrer Next.js-Anwendung ein, um Anzeigenblocker und Browser-Tracking-Schutz zu umgehen.

Schwierigkeit: Einfach - Dies ist die einfachste Option für Next.js-Projekte. Fügen Sie einfach ein paar Zeilen zu Ihrer Konfigurationsdatei hinzu.

Warum das funktioniert (Same-Origin)

Dieser Ansatz verwendet /api/_z/script.js, das sich auf der gleichen Herkunft wie Ihre Website befindet. Firefox ETP und andere Tracking-Schutzmaßnahmen blockieren nur Cross-Origin-Anfragen.

  • Browser sieht: yourdomain.com/api/_z/script.js — gleiche Herkunft (First-Party)
  • Next.js schreibt die Anfrage auf der Server-Seite an Zenovay um (der Browser sieht das nicht)
  • Alle Tracking-Schutzmaßnahmen werden umgangen, da die Anfrage First-Party ist

Bevor Sie beginnen

Stellen Sie sicher, dass Sie Folgendes haben:

  • Ein Next.js 12+-Projekt (App Router oder Pages Router)
  • Ihren Zenovay-Tracking-Code (zu finden unter Domains → Ihre Website → General → Tracking script, im First-Party-Tab)
  • Zugriff auf Ihre next.config.js oder next.config.ts Datei

Format Ihres Tracking-Codes

Ihr Tracking-Code sieht so aus: ZV_XXXXXXXXXX

  • Beginnt mit ZV_
  • Gefolgt von 10 Zeichen (Buchstaben und Zahlen)
  • GROSS-/KLEINSCHREIBUNG BEACHTEN - kopieren Sie ihn exakt

Beispiel: ZV_Q8U0GYD70WR

Tracking-Script-Karte mit dem Script-Snippet, HTML-, React-, Next.js- und First-Party-Tabs
Suchen Sie nach Ihrem Tracking-Code und dem einsatzbereiten Next.js-Snippet unter Domains → Ihre Website → General → Tracking script.

Wie es funktioniert

Next.js Rewrites fungieren als Server-seitiger Proxy. Wenn ein Browser /api/_z/script.js anfordert, holt Next.js ihn von api.zenovay.com/fp/script.js ab und gibt ihn zurück. Der Browser sieht nur Ihre Domain.

Browser → yourdomain.com/api/_z/script.js  (First-Party)
               ↓
         Next.js Rewrite
               ↓
         api.zenovay.com/fp/script.js (Server-zu-Server)

Schritt 1: Rewrites konfigurieren

Fügen Sie die Rewrite-Konfiguration zu Ihrer Next.js-Konfigurationsdatei hinzu.

Welche Konfigurationsdatei?

  • next.config.js - Wenn Ihr Projekt JavaScript verwendet
  • next.config.mjs - Wenn Ihr Projekt ES-Module verwendet
  • next.config.ts - Wenn Ihr Projekt TypeScript verwendet (Next.js 15+)

Für next.config.js (JavaScript)

next.config.jsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
// Add this rewrites configuration
async rewrites() {
  return [
    {
      // Proxy all requests to /api/_z/* to Zenovay's first-party endpoint
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Für next.config.mjs (ES Modules)

next.config.mjsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

export default nextConfig

Für next.config.ts (TypeScript - Next.js 15+)

next.config.tsTypeScript
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

export default nextConfig

Falls Sie bereits Rewrites haben

Wenn Ihre Konfiguration bereits eine rewrites()-Funktion hat, fügen Sie den Zenovay-Rewrite zum bestehenden Array hinzu:

next.config.js (mit bestehenden Rewrites)JavaScript
const nextConfig = {
async rewrites() {
  return [
    // Your existing rewrites...
    {
      source: '/old-page',
      destination: '/new-page',
    },
    // Add Zenovay rewrite
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Schritt 2: Tracking-Script hinzufügen

Jetzt fügen Sie das Tracking-Script zu Ihrer Anwendung hinzu.

App Router (Next.js 13+)

Fügen Sie das Script zu Ihrem Root Layout hinzu:

app/layout.tsxTSX
import Script from 'next/script'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="/api/_z/script.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
)
}

Pages Router

Fügen Sie das Script zu Ihrer benutzerdefinierten _app.tsx hinzu:

pages/_app.tsxTSX
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
return (
  <>
    <Script
      src="/api/_z/script.js"
      data-tracking-code="YOUR_TRACKING_CODE"
      strategy="afterInteractive"
    />
    <Component {...pageProps} />
  </>
)
}

Ersetzen Sie YOUR_TRACKING_CODE mit Ihrem aktuellen Tracking-Code aus dem Zenovay-Dashboard (z.B. ZV_Q8U0GYD70WR).

Schritt 3: Entwicklungsserver neu starten

Wichtig! Next.js speichert die Konfigurationsdatei. Sie MÜSSEN Ihren Dev Server neu starten, nachdem Sie next.config.js bearbeitet haben.

TerminalBash
# Stop your current dev server (Ctrl+C)
# Then restart it
npm run dev

Schritt 4: Ihre Änderungen bereitstellen

TerminalBash
# For Vercel (automatic deployment)
git add .
git commit -m "Add Zenovay first-party tracking"
git push

# Or manual Vercel deployment
vercel deploy

# For other platforms
npm run build && npm run start

Schritt 5: Überprüfen Sie, ob es funktioniert

Überprüfung 1: Lokale Entwicklung

  1. Öffnen Sie Ihre Website unter http://localhost:3000
  2. Drücken Sie F12, um DevTools zu öffnen
  3. Klicken Sie auf die Registerkarte Network
  4. Aktualisieren Sie die Seite
  5. Filtern Sie nach script.js
  6. Sie sollten eine Anfrage an /api/_z/script.js mit Status 200 sehen

Überprüfung 2: Firefox Strict Mode (Sehr wichtig!)

Firefox hat den strengsten Tracking-Schutz. Wenn es in Firefox funktioniert, funktioniert es überall.

  1. Öffnen Sie Firefox-Browser
  2. Klicken Sie auf das Menü (drei Zeilen, oben rechts) → Einstellungen
  3. Klicken Sie auf Datenschutz & Sicherheit in der linken Seitenleiste
  4. Wählen Sie unter „Verbesserter Tracking-Schutz" Streng aus
  5. Besuchen Sie Ihre Website
  6. Öffnen Sie DevTools (F12) → Registerkarte Network
  7. Aktualisieren Sie und überprüfen Sie, dass /api/_z/script.js mit Status 200 geladen wird

Überprüfung 3: Zenovay-Dashboard

  1. Gehen Sie zu app.zenovay.com und melden Sie sich an
  2. Klicken Sie auf Ihre Website
  3. Besuchen Sie Ihre Website in einem anderen Tab
  4. Innerhalb von 1-2 Minuten sollten Sie den Besuch in Ihrem Dashboard sehen

Endgültige Checkliste

Bevor Sie fertig sind, überprüfen Sie ALLE dieser Punkte:

  • next.config.js hat die Rewrite-Regel für /api/_z/:path*
  • Entwicklungsserver wurde nach Konfigurationsänderung neu gestartet
  • Script-Tag verwendet /api/_z/script.js (nicht die direkte Zenovay-URL)
  • data-tracking-code-Attribut enthält Ihren korrekten Tracking-Code
  • In Firefox mit verbessertem Tracking-Schutz auf Streng getestet
  • Besuche erscheinen im Zenovay-Dashboard

Fehlerbehebung

Script gibt 404 zurück

Ursache: Der Rewrite ist nicht korrekt konfiguriert oder der Server wurde nicht neu gestartet.

Lösung:

  1. Starten Sie Ihren Dev Server neu - Das ist die häufigste Lösung
  2. Überprüfen Sie, dass die next.config.js Datei gespeichert ist
  3. Überprüfen Sie, dass der Pfad genau übereinstimmt: /api/_z/:path*
  4. Stellen Sie sicher, dass Sie source und destination verwenden (nicht from und to)

Script wird geladen, aber keine Daten erscheinen

Ursache: Der Tracking-Code könnte falsch sein.

Lösung:

  1. Suchen Sie nach Ihrem Tracking-Code unter Domains → Ihre Website → General → Tracking script
  2. Stellen Sie sicher, dass data-tracking-code genau übereinstimmt (GROSS-/KLEINSCHREIBUNG beachten)
  3. Überprüfen Sie die Browser-Konsole (F12 → Console-Registerkarte) auf Fehler

Rewrites funktionieren lokal, aber nicht in der Produktion

Ursache: Einige Hosting-Plattformen handhaben Rewrites unterschiedlich.

Lösung:

  • Vercel: Rewrites funktionieren automatisch
  • Netlify: Fügen Sie den Rewrite auch zu netlify.toml hinzu
  • Self-Hosted: Stellen Sie sicher, dass Ihr Server Next.js Rewrites unterstützt

Geolokalisierung ist falsch

Ursache: Die echte IP-Adresse des Besuchers wird nicht weitergeleitet.

Lösung: Für Vercel funktioniert dies automatisch. Für andere Plattformen benötigen Sie möglicherweise Middleware:

middleware.tsTypeScript
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
if (request.nextUrl.pathname.startsWith('/api/_z/')) {
  const response = NextResponse.rewrite(
    new URL(`https://api.zenovay.com/fp/${request.nextUrl.pathname.replace('/api/_z/', '')}${request.nextUrl.search}`)
  )

  // Forward the real client IP
  const clientIP = request.headers.get('x-forwarded-for')?.split(',')[0]
                || request.headers.get('x-real-ip')
                || ''

  response.headers.set('X-Zenovay-Real-IP', clientIP)

  return response
}
}

export const config = {
matcher: '/api/_z/:path*',
}

Vollständiges Beispiel

Hier ist ein vollständiges next.config.js Beispiel:

next.config.jsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
// Your existing config options...
reactStrictMode: true,

// Zenovay first-party proxy rewrite
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Und ein vollständiges app/layout.tsx:

app/layout.tsxTSX
import Script from 'next/script'
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
  <html lang="en">
    <head>
      {/* Zenovay Analytics - First-Party Tracking */}
      <Script
        src="/api/_z/script.js"
        data-tracking-code="ZV_Q8U0GYD70WR"  // Replace with your tracking code
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
)
}

Nächste Schritte

War diese Seite hilfreich?