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の導入が可能になります。