2分で読めます

Next.js インテグレーション

Next.js の組み込み Script コンポーネントを使用して、Zenovay アナリティクスをあなたの Next.js アプリケーションに追加し、最適なローディング性能を実現します。

App Router (Next.js 13+)

Script コンポーネントをルートレイアウトに追加します。

app/layout.tsxTSX

import Script from 'next/script';

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

YOUR_TRACKING_CODE をあなたのサイトのトラッキングコードに置き換えてください。アプリの Domains → [your site] → General セクション内のトラッキングスクリプトカード (Next.js タブ) で確認できます。

HTML、React、Next.js、First-Party タブが表示されたスクリプトスニペットを示すトラッキングスクリプトカード — トラッキングコードは、ドメイン設定の General ページにある Next.js タブの下に表示されます。

Pages Router (レガシー)

Pages Router の場合は、_app.tsx にスクリプトを追加します。

pages/_app.tsxTSX

import type { AppProps } from 'next/app';
import Script from 'next/script';

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

スクリプト戦略

Next.js では異なるローディング戦略が利用できます。

戦略	説明	ユースケース
`afterInteractive`	ページがインタラクティブになった後にロード	アナリティクスの推奨
`lazyOnload`	ブラウザのアイドル時にロード	重要でないスクリプト
`beforeInteractive`	ページハイドレーション前にロード	重要なスクリプトのみ

推奨される戦略TSX

<Script
src="https://api.zenovay.com/z.js"
data-tracking-code="YOUR_TRACKING_CODE"
strategy="afterInteractive"
/>

環境変数

トラッキングコードに環境変数を使用します。

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const trackingCode = process.env.NEXT_PUBLIC_ZENOVAY_ID;

return (
  <html lang="en">
    <head>
      {trackingCode && (
        <Script
          src="https://api.zenovay.com/z.js"
          data-tracking-code={trackingCode}
          strategy="afterInteractive"
        />
      )}
    </head>
    <body>{children}</body>
  </html>
);
}

.env.localBash

NEXT_PUBLIC_ZENOVAY_ID=ZV_ABC123XYZ

ファーストパーティトラッキング (広告ブロッカーのバイパス)

より高い精度のために、ファーストパーティトラッキングを使用します。

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://metrics.yourdomain.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

ファーストパーティトラッキングには CNAME DNS レコードが必要です。セットアップ手順についてはファーストパーティトラッキングガイドを参照してください。

静的エクスポート (Cloudflare Pages)

静的エクスポートの場合、Script コンポーネントは同じように機能します。

next.config.jsJavaScript

/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// ... other config
};

module.exports = nextConfig;

トラッキングスクリプトは生成された HTML ページに埋め込まれます。

サーバーコンポーネント

トラッキングスクリプトは React サーバーコンポーネントと自動的に機能します。特別な設定は不要です。

ミドルウェア & エッジランタイム

エッジランタイムを使用するアプリの場合、クライアント側の Script コンポーネントが通常通りトラッキングを処理します。サーバー側のアナリティクスには API インテグレーションを使用できます。

検証

インストール後:

Next.js アプリをビルドしてデプロイします
DevTools → Network タブを開きます
api.zenovay.com へのリクエストを探します
Zenovay ダッシュボードでデータが入ってくることを確認します

トラブルシューティング

開発時にスクリプトがロードされない場合

スクリプトはページナビゲーション時にロードされ、開発モードの初期ロード時にはロードされません
正しくテストするには、ビルドとプレビュー (npm run build && npm start) を実行してください

スクリプトタグが重複している場合

Script はルートレイアウトに 1 回だけ追加してください
個別のページには追加しないでください

ハイドレーションのミスマッチ警告が発生している場合

SSR の問題を避けるため、strategy="afterInteractive" を使用してください
スクリプトが <head> セクションにあることを確認してください

コンテンツセキュリティポリシーの問題がある場合

api.zenovay.com をあなたの CSP script-src ディレクティブに追加してください
ファーストパーティの場合: あなたの CNAME サブドメインを追加してください