Next.jsアプリケーションにGoogle Tag Manager（GTM）を導入する最新のベストプラクティスについて、2024年版の情報をお伝えします。Next.jsの最新バージョンである14.2.3（2024年4月現在）に対応した方法を解説します。

1. @next/third-partiesパッケージの使用

Next.jsでは、@next/third-partiesパッケージを使用してGTMを簡単に導入できるようになりました。まず、以下のコマンドでパッケージをインストールします：

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

2. GoogleTagManagerコンポーネントの実装

アプリケーションのルートレイアウト（app/layout.tsx）にGoogleTagManagerコンポーネントを追加します：

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <GoogleTagManager gtmId="GTM-XXXXXXX" />
      <body>{children}</body>
    </html>
  )
}

GTM-XXXXXXXの部分は、実際のGTMコンテナIDに置き換えてください。

3. イベントの送信

クライアントコンポーネントでイベントを送信する場合は、sendGTMEvent関数を使用します：

'use client'

import { sendGTMEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <button
      onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
    >
      イベント送信
    </button>
  )
}

4. ページビューの追跡

Next.jsのApp Routerを使用している場合、クライアントサイドのナビゲーション時に自動的にページビューが送信されます。これを確実に機能させるには、GTMの管理画面で「拡張計測機能」を有効にし、「ブラウザの履歴イベントに基づくページの変更」にチェックを入れてください。

5. サーバーサイドレンダリング（SSR）への対応

SSRを使用している場合、GTMのスクリプトがクライアントサイドで正しく動作するように、next/scriptを使用してGTMスクリプトを読み込むことができます：

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <Script
        id="gtm-script"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');
          `,
        }}
      />
      <body>{children}</body>
    </html>
  )
}

6. パフォーマンスの最適化

GTMの導入によるパフォーマンスへの影響を最小限に抑えるために、以下の点に注意してください：

必要最小限のタグのみを使用する
カスタムJavaScriptの使用を控える
可能な限り、サーバーサイドでデータを収集し、GTMに送信する

7. プライバシーへの配慮

GDPRやCCPAなどのプライバシー法に準拠するために、ユーザーの同意を得てからGTMを読み込むようにしましょう。Next.jsでは、ユーザーの同意状態に基づいてGTMの読み込みを制御できます。

以上が、2024年におけるNext.jsアプリケーションへのGoogle Tag Manager導入の最新ベストプラクティスです。これらの方法を適用することで、効果的かつパフォーマンスを考慮したGTMの導入が可能になります。