コンポーネントを読み込ませるだけ！Next.jsにGoogle Analyticsを設定する

2024/01/21

Google AnalyticsのタグをどうやってNext.jsで読み込めせようか調べていたところ、
Next.js公式で@next/third-partiesというライブラリを提供していたので、
その使い方を紹介しようと思います。

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

@next/third-partiesが提供するすべてのサードパーティの統合は、パフォーマンスと利便性の向上のために最適化されています。

インストール

はじめるには、@next/third-partiesライブラリをインストールします。

npm install @next/third-parties@latest next@latest

@next/third-partiesは現在実験的なライブラリであり、積極的に開発が進行中です。より多くのサードパーティの統合を追加する作業中ですので、最新またはキャナリーフラグを使用してインストールすることをお勧めします。

Google Analyticsコンポーネント

GoogleAnalyticsコンポーネントを使用すると、Googleタグ（gtag.js）を介してページにGoogle Analytics 4を追加することができます。デフォルトでは、ページ上でハイドレーションが行われた後にオリジナルのスクリプトを取得します。

おすすめ：アプリケーションに既にGoogle Tag Managerが含まれている場合、Google Analyticsを別のコンポーネントとして含めるのではなく、それを直接構成することができます。詳細についてはドキュメンテーションを参照してください。

すべてのルートで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" />
}

イベントの送信

sendGAEvent関数を使用して、dataLayerオブジェクトを使用してページ上のユーザーの対話を測定することができます。この機能を使用するには、<GoogleAnalytics />コンポーネントが親レイアウト、ページ、またはコンポーネントのいずれかに含まれているか、または同じファイルに直接含まれている必要があります。

// app/page.js

'use client'
 
import { sendGAEvent } from '@next/third-parties/google'
 
export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        イベントを送信
      </button>
    </div>
  )
}

イベントのパラメータに関する詳細は、Google Analyticsの開発者ドキュメントを参照してください。

ページビュートラッキング

Google Analyticsは、ブラウザの履歴状態が変更されるたびにページビューを自動的にトラッキングします。これは、Next.jsのルート間を移動するクライアントサイドのナビゲーションが、設定なしでページビューデータを送信することを意味します。

クライアントサイドのナビゲーションが正しく測定されていることを確認するには、Adminパネルで「Enhanced Measurement」プロパティが有効になっているか、そして「Page changes based on browser history events」のチェックボックスが選択されているか確認してください。

注意：手動でページビューイベントを送信することを決定した場合は、重複データを防ぐためにデフォルトのページビュー測定を無効にするようにしてください。詳細については、Google Analyticsの開発者ドキュメントを参照してください。

オプション

<GoogleAnalytics>コンポーネントに渡すオプションについては、次のリストを参照してください。

gaId (必須): あなたの測定ID。通常はG-で始まります。
dataLayerName (オプション): データレイヤの名前。デフォルトはdataLayerです。