目次
はじめに
Next.jsでGoogleタグマネージャー（GTM）を実装する方法には、大きく分けて2つのアプローチがあります：
- 公式ライブラリ
@next/third-partiesを使用する方法（推奨） - カスタム実装による方法
それぞれの実装方法について詳しく見ていきましょう。
1. @next/third-parties を使用する方法
インストール
npm install @next/third-parties実装手順
app/layout.tsx（もしくはpages/_app.js）に以下のコードを追加するだけです：
import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>
{children}
<GoogleTagManager gtmId="GTM-XXXXXXX" />
</body>
</html>
)
}メリット
- 実装が非常に簡単
- Next.jsによる自動最適化
- TypeScriptのサポート
- セキュリティ対策が組み込み済み
- メンテナンスが容易
2. カスタム実装による方法
こちらはより柔軟な実装が可能ですが、やや複雑になります。
カスタムDocumentの作成
pages/_document.jsを作成し、以下のように実装します：
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<script
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');
`,
}}
/>
</Head>
<body>
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>
<Main />
<NextScript />
</body>
</Html>
)
}メリット
- より詳細なカスタマイズが可能
- 特殊なローディング要件に対応可能
- 古いバージョンのNext.jsでも使用可能
環境変数の使用
# .env.local
NEXT_PUBLIC_GTM_ID=GTM-XXXXXXXデータレイヤーの使用例
データレイヤーとは
データレイヤー（dataLayer）は、簡単に言うと「Webサイトの情報をGTMに渡すための受け渡し場所」です。
SPAで疑似的なページビューを設定
SPAの場合、従来のページ遷移と異なり実際のページリロードが発生しないため、仮想的なページビューを設定する必要があります。
window.dataLayer.push({
event: 'customEvent',
eventCategory: 'User Action',
eventAction: 'Click'
});SPA以外で他にデータレイヤーが特に有用なケース
まとめ
- 新規プロジェクトでは
@next/third-partiesの使用を推奨 - カスタマイズが必要な場合は従来の実装方法も検討
- プライバシーポリシーへの記載を忘れずに
- 実装後はGTMのプレビューモードで動作確認を行う
実装方法の選択は、プロジェクトの要件やNext.jsのバージョンに応じて検討してください。
GTM IDを確認
ブラウザで対象のWebページを開く 右クリックして「検証」または「開発者ツール」を選択 Elements（要素）タブで以下のいずれかの方法でGTM IDを見つける：
<head>タグ内のGTMスニペットを探すCtrl+F（Command+F）で”GTM-“と検索
gtm.jsについて
gtm.jsは、Google Tag Manager (GTM)の中核となるJavaScriptファイルです。このファイルには以下のような重要な役割があります：
- コンテナの初期化と設定
- GTMコンテナを読み込み、設定を適用します
- データレイヤーを作成・管理します
- イベントリスナーを設定します
- タグの管理機能
- 設定されたトリガーに基づいてタグを実行します
- タグの優先順位を制御します
- タグの実行タイミングを最適化します
- データ収集と送信
- ウェブサイト上でのユーザーの行動データを収集します
- 収集したデータを適切なサービス（Google アナリティクスなど）に送信します
