コンテンツへスキップ

【Next.js】Next.js14でGoogleAnalytics（GA4）を導入する方法

今回はNext.js14でGoogleAnalytics（GA4）を導入する方法を2種類ご紹介します。

GoogleAnalyticsの準備

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-46EMS4D3UR"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-46EMS4D3UR');
</script>

まずはGoogleAnalyticsの利用設定を行い、上記のような計測用タグを発行しておきます。

@next/third-partiesを利用する方法

最初に紹介するのは@next/third-partiesを利用する方法です。
この方法はNext.js 14からでないと使えないのでその点を注意してください。

手順１：@next/third-partiesをインストール

yarn add @next/third-parties@latest

上記のコマンドを実行し、@next/third-partiesライブラリをインストールします。

手順２：GoogleAnalyticsコンポーネントの設置

import { GoogleTagManager, GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      {children}

      <GoogleTagManager gtmId="G-46EMS4D3UR" />
      <GoogleAnalytics gaId="G-46EMS4D3UR" />
    </html>
  )
}

上記のように@next/third-parties/googleからGoogleAnalyticsコンポーネントを呼び出します。

GoogleAnalyticsコンポーネントにはgaIdというプロパティが必須になりますので、用意していたGoogleAnalyticsの測定ID（G-から始まるID）を渡すだけで大丈夫です。

またGoogleTagManagerコンポーネントも提供されていますので、Googleタグマネージャーも利用してスクリプト管理されている方は同様のやり方で導入することができます。

上記はドキュメントルートのlayout.tsxファイルに直接記述する方法でご紹介していますが、ご自身の管理方法に合わせて集計用などのタグ実装を一つのコンポーネント化するなどでもいいと思います。

Scriptコンポーネントを利用する方法

次にNext.jsのビルトインコンポーネントであるScriptコンポーネントを利用した実装方法をご紹介します。

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${beVietnamPro.className} ${notoSansJp.className}`}>
      {children}

      <Script
        strategy="lazyOnload"
        src="https://www.googletagmanager.com/gtag/js?id=G-46EMS4D3UR"
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-46EMS4D3UR');
          `
        }}
      />
    </html>
  )
}

Scriptコンポーネントでの実装の場合、Next.js14以前のバージョンのアプリケーションでも導入することができます。

上記のようにdangerouslySetInnerHTMLプロパティに対してGoogleAnalytics管理画面で発行されたAnalytics実装タグの記述をコピペしてあげるだけです。

Scriptコンポーネントを利用する方法は、GoogleAnalytics以外にもJS記述で導入するタイプの外部サービスの実装に利用できますので覚えておくといいかもしれません。

まとめ

というわけで今回はNext.js14においてGoogleAnalyticsを導入する方法を2種類ご紹介させて頂きました。

@next/third-partiesを利用する方法はgaIdを渡してあげるだけなので非常に手軽に導入できますし、Scriptコンポーネントを利用する方法はGoogleAnalytics以外のサービス利用にも適しています。

どちらが優れているとかは特になく、ご自身の環境に合わせて使いやすい方法を選択してもらえればいいかと思います。

タグ: