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

Next.js で Google Analytics を使用する (`next/script` 経由)

Google Analytics のインラインスクリプトを使用する場合は、`next/script` コンポーネントを使用することを推奨します。

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

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

考えられる修正方法

`@next/third-parties` を使用して Google Analytics を追加する

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

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

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

すべてのルートで Google Analytics を読み込むには、コンポーネントをルートレイアウトに直接含め、測定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 Analytics を読み込むには、コンポーネントをページファイルに含めます。

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

知っておくと良いこと