コンテンツにスキップ
ドキュメントエラーNext.js で Google アナリティクスを使用する (`next/script` 経由)

Next.js で Google アナリティクスを使用する (`next/script` 経由)

Google アナリティクスにインラインスクリプトを使用する場合は、next/script コンポーネントを使用することをお勧めします。

このエラーが発生した理由

Google アナリティクスにインラインスクリプトが使用されており、ウェブページのパフォーマンスに影響を与える可能性があります。代わりに、@next/third-parties ライブラリを介して next/script を使用することをお勧めします。

修正方法

@next/third-parties を使用して Google アナリティクスを追加する

@next/third-parties は、Next.js アプリケーションで一般的なサードパーティライブラリの読み込みのパフォーマンスと開発エクスペリエンスを向上させるコンポーネントとユーティリティのコレクションを提供するライブラリです。Next.js 14 で利用可能です (next@latest をインストールしてください)。

GoogleAnalytics コンポーネントを使用すると、Google タグ (gtag.js) を介して Google アナリティクス 4 をページに含めることができます。デフォルトでは、ページでハイドレーションが発生した後に元のスクリプトがフェッチされます。

推奨: アプリケーションに Google タグマネージャーが既に含まれている場合は、Google アナリティクスを個別のコンポーネントとして含めるのではなく、Google タグマネージャーを使用して Google アナリティクスを直接設定できます。タグマネージャーと gtag.js の違いについて詳しくは、ドキュメント を参照してください。

すべてのルートに Google アナリティクスを読み込むには、コンポーネントをルートレイアウトに直接含め、測定 ID を渡します。

app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

単一のルートに Google アナリティクスを読み込むには、コンポーネントをページファイルに含めます。

app/page.js
import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

知っておくと良いこと

  • Pages Router を使用している場合は、pages/ ドキュメントを参照してください。
  • @next/third-parties は、Google タグマネージャー やその他のサードパーティもサポートしています。
  • @next/third-parties の使用は必須ではありません。next/script コンポーネントを直接使用することもできます。詳しくは、next/script ドキュメントを参照してください。