5分で読めます

Next.jsでのファーストパーティトラッキング

Next.jsアプリケーションでファーストパーティプロキシをセットアップして、広告ブロッカーとブラウザトラッキング保護をバイパスします。

難易度: 簡単 - これはNext.jsプロジェクト向けの最もシンプルなオプションです。設定ファイルに数行追加するだけです。

これが機能する理由（同一オリジン）

このアプローチは、Webサイトの 同一オリジン 上にある /api/_z/script.js を使用します。Firefox ETPおよび他のトラッキング保護は、クロスオリジンリクエストのみをブロックします。

ブラウザが見るもの: yourdomain.com/api/_z/script.js — 同一オリジン（ファーストパーティ）
Next.jsがリクエストをサーバー側でZenovayサーバーにリライト（ブラウザは見えない）
すべてのトラッキング保護がバイパスされるのは、リクエストがファーストパーティであるため

開始する前に

以下があることを確認してください:

Next.js 12以上のプロジェクト（App RouterまたはPages Router）
Zenovayトラッキングコード（ドメイン → 対象サイト → 一般 → トラッキングスクリプトのファーストパーティタブの下にあります）
next.config.js または next.config.ts ファイルへのアクセス

トラッキングコードの形式

トラッキングコードは次のように見えます: ZV_XXXXXXXXXX

ZV_ で始まります
続く10文字（字と数字）
大文字小文字を区別します - 正確にコピーしてください

例: ZV_Q8U0GYD70WR

HTML、React、Next.js、ファーストパーティタブを含むスクリプトスニペットを表示するトラッキングスクリプトカード — ドメイン → 対象サイト → 一般 → トラッキングスクリプトの下でトラッキングコードと使用可能なNext.jsスニペットを見つけます。

動作方法

Next.jsのリライトはサーバー側プロキシとして機能します。ブラウザが /api/_z/script.js にリクエストすると、Next.jsが api.zenovay.com/fp/script.js からそれを取得して返します。ブラウザはあなたのドメインのみを見ます。

ブラウザ → yourdomain.com/api/_z/script.js  （ファーストパーティ）
               ↓
         Next.jsリライト
               ↓
         api.zenovay.com/fp/script.js （サーバー間）

ステップ1: リライトを設定

Next.js設定ファイルにリライト設定を追加します。

どの設定ファイルですか？

next.config.js - プロジェクトがJavaScriptを使用している場合
next.config.mjs - プロジェクトがESモジュールを使用している場合
next.config.ts - プロジェクトがTypeScript（Next.js 15以上）を使用している場合

`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

`next.config.mjs` の場合（ESモジュール）

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

`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

既存のリライトがある場合

設定に既に rewrites() 関数がある場合、Zenovayのリライトを既存の配列に追加します:

next.config.js (既存のリライト付き)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

ステップ2: トラッキングスクリプトを追加

次に、アプリケーションにトラッキングスクリプトを追加します。

App Router（Next.js 13以上）

ルートレイアウトにスクリプトを追加します:

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

カスタム _app.tsx にスクリプトを追加します:

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} />
  </>
)
}

YOUR_TRACKING_CODE を置き換えます - Zenovayダッシュボードから実際のトラッキングコード（例: ZV_Q8U0GYD70WR）に置き換えてください。

ステップ3: 開発サーバーを再起動

重要! Next.jsは設定ファイルをキャッシュします。next.config.js を編集した後、開発サーバーを 必ず再起動 してください。

TerminalBash

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

ステップ4: 変更をデプロイ

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

ステップ5: 動作確認

チェック1: ローカル開発

http://localhost:3000 でサイトを開きます
F12 キーを押してDevToolsを開きます
ネットワーク タブをクリックします
ページをリフレッシュします
script.js でフィルターします
ステータス200で /api/_z/script.js へのリクエストが表示されるはずです

チェック2: Firefox厳密モード（最重要!）

Firefoxは最も厳密なトラッキング保護を持っています。Firefoxで動作すれば、どこでも動作します。

Firefox ブラウザを開きます
メニューボタン（3本線、右上）→ 設定をクリックします
左サイドバーから プライバシーとセキュリティ をクリックします
「強化トラッキング保護」で厳密を選択します
Webサイトにアクセスします
DevTools（F12）→ ネットワークタブを開きます
リフレッシュして /api/_z/script.js がステータス200で読み込まれることを確認します

チェック3: Zenovayダッシュボード

app.zenovay.com に移動してログインします
Webサイトをクリックします
別のタブでサイトにアクセスします
1～2分以内に、ダッシュボードで訪問が表示されるはずです

最終チェックリスト

完了する前に、これらすべてを検証してください:

next.config.js が /api/_z/:path* のリライトルールを持っている
設定変更後に開発サーバーが再起動された
スクリプトタグが /api/_z/script.js を使用している（Zenovayの直接URLではない）
data-tracking-code 属性に正しいトラッキングコードが含まれている
強化トラッキング保護を厳密に設定したFirefoxでテストされている
Zenovayダッシュボードに訪問が表示されている

トラブルシューティング

スクリプトが404を返す

原因: リライトが正しく設定されていないか、サーバーが再起動されていません。

解決策:

開発サーバーを再起動します - これが最も一般的な修正です
next.config.js ファイルが保存されていることを確認します
パスが正確に一致することを確認します: /api/_z/:path*
source と destination を使用していることを確認します（from と to ではない）

スクリプトは読み込まれるがデータが表示されない

原因: トラッキングコードが正しくない可能性があります。

解決策:

ドメイン → 対象サイト → 一般 → トラッキングスクリプト でトラッキングコードを確認します
data-tracking-code が正確に一致することを確認します（大文字小文字を区別）
ブラウザコンソール（F12 → コンソールタブ）でエラーをチェックします

リライトはローカルで機能するが本番環境では機能しない

原因: ホスティングプラットフォームによってはリライトの処理が異なります。

解決策:

Vercel: リライトは自動的に機能します
Netlify: リライトを netlify.toml にも追加してください
セルフホスト: Next.jsのリライトをサポートしているサーバーを使用していることを確認してください

地理情報が正しくない

原因: 訪問者の実際のIPが転送されていません。

解決策: Vercelではこれが自動的に機能します。その他のプラットフォームでは、ミドルウェアが必要な場合があります:

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*',
}

完全な例

完全な next.config.js の例：

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

完全な 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>
)
}

次のステップ

カスタムイベント - カスタムユーザーアクションを追跡
訪問者識別 - ログインしたユーザーを識別
トラブルシューティング - 一般的な問題に関するその他のサポート

Next.jsでのファーストパーティトラッキング

開始する前に

動作方法

ステップ1: リライトを設定

next.config.js の場合（JavaScript）

next.config.mjs の場合（ESモジュール）

next.config.ts の場合（TypeScript - Next.js 15以上）

既存のリライトがある場合

ステップ2: トラッキングスクリプトを追加

App Router（Next.js 13以上）

Pages Router

ステップ3: 開発サーバーを再起動

ステップ4: 変更をデプロイ

ステップ5: 動作確認

チェック1: ローカル開発

チェック2: Firefox厳密モード（最重要!）

チェック3: Zenovayダッシュボード

最終チェックリスト

トラブルシューティング

スクリプトが404を返す

スクリプトは読み込まれるがデータが表示されない

リライトはローカルで機能するが本番環境では機能しない

地理情報が正しくない

完全な例

次のステップ

`next.config.js` の場合（JavaScript）

`next.config.mjs` の場合（ESモジュール）

`next.config.ts` の場合（TypeScript - Next.js 15以上）