目次
この記事で分かること（所要時間：5分）
✅ GTMイベント設定の基本3要素（タグ・トリガー・変数）の理解
✅ クリック・スクロール・フォーム・動画・カスタムイベントの実装方法
✅ GA4連携でコンバージョンを正確に計測する手順
✅ よくあるエラーと解決方法（実例ベース）
✅ デバッグモードを使った動作確認のコツ
結論：GTMを使えば、エンジニアに依頼せず5分でイベント計測を実装できます。本記事では、コピペで使えるコード例と実践的なトラブルシューティングを交えて、初心者でも確実に設定できる方法を解説します。
なぜGTMイベント設定が重要なのか？
Webマーケティングで成果を出すには、**「どのボタンが何回クリックされたか」「ユーザーはどこまで記事を読んでいるか」**といったユーザー行動の可視化が不可欠です。
GTMイベント設定で実現できること
- コンバージョン経路の特定：どのCTAボタンが効果的か数値で判断
- コンテンツ改善：記事の離脱ポイントを特定し、読了率を向上
- 広告効果測定：正確なCV計測で広告ROIを最適化
- A/Bテストの実施：複数パターンの効果を定量的に比較
Google Tag Manager（GTM）を活用すれば、これらすべてをコード編集なしで実装できます。
Google Tag Manager（GTM）とは？基本を3分で理解
GTMの役割：タグ管理を一元化するツール
GTMは、Webサイトに設置する各種トラッキングコードを一元管理できるGoogleの無料ツールです。
従来の方法との違い：
| 従来の方法 | GTMを使う場合 |
|---|---|
| HTMLファイルを直接編集 | GTM管理画面で完結 |
| エンジニアに依頼が必要 | マーケター自身で対応可能 |
| 変更のたびにサイト更新 | リアルタイムで反映 |
| タグが複数箇所に分散 | 一元管理で把握しやすい |
GTMとGA4の連携で得られるメリット
GTMとGoogle Analytics 4（GA4）を組み合わせることで、以下が可能になります：
- 標準では計測できないカスタムイベントの取得
- 複数の広告タグ（Google広告、Facebook広告など）の統合管理
- MAツール（HubSpot、Marketoなど）との連携
- リアルタイムでのトリガー条件変更
GTMの3つの基本構成要素を理解する
GTMは「タグ」「トリガー」「変数」の3要素で構成されています。この関係性を理解すれば、どんなイベントでも設定できます。
[図解：タグ・トリガー・変数の関係図]
1. タグ（Tag）- 「何を実行するか」
タグは、実際に発火する計測コードやツールを指します。
主なタグの種類：
- GA4イベントタグ：GA4にイベントデータを送信
- Google広告コンバージョンタグ：広告の成果を計測
- Facebook Pixelタグ：Meta広告のトラッキング
- カスタムHTMLタグ：独自のJavaScriptコードを実行
具体例： 「お問い合わせボタンのクリック」をGA4で計測したい場合、「GA4イベントタグ」を使用します。
2. トリガー（Trigger）- 「いつ実行するか」
トリガーは、タグを発火させる条件を定義します。
主なトリガーの種類：
- ページビュー：ページが表示されたとき
- クリック：特定の要素がクリックされたとき
- フォーム送信：フォームが送信されたとき
- スクロール深度：ページを一定量スクロールしたとき
- 動画再生：YouTube動画が再生されたとき
- カスタムイベント：独自に定義したタイミング
具体例： 「お問い合わせボタンがクリックされたとき」= クリックトリガー
3. 変数（Variable）- 「どんなデータを使うか」
変数は、計測データを格納する「箱」のようなものです。
2種類の変数：
① 組み込み変数（ビルトイン変数）
GTMにデフォルトで用意されている変数。設定画面で有効化するだけで使用可能。
主な組み込み変数：
- Page URL：現在のページのURL全体
- Page Path：URLのパス部分（例：
/blog/article） - Click URL：クリックされたリンクのURL
- Click Text：クリックされた要素のテキスト
- Scroll Depth Threshold：スクロール深度（25%, 50%など）
② ユーザー定義変数
独自に設定する変数。JavaScriptやDOM要素から値を取得。
使用例：
- 計算式で新しい値を生成
- data-id属性の値を取得
- カスタムdataLayerの値を使用
3要素の関係性（実例）
シナリオ：「お問い合わせボタンのクリック数」を計測したい
- タグ：GA4イベントタグ（イベント名：
contact_click） - トリガー：クリックトリガー（条件：Click URL =
/contact） - 変数：Click URL、Click Textを取得してGA4に送信
このように、タグが「何を」、トリガーが「いつ」、変数が「どんなデータで」を定義することで、イベント設定が完成します。
【事前準備】GTM組み込み変数の有効化（初回のみ必須）
イベント設定を行う前に、GTMの組み込み変数を有効化する必要があります。この作業は初回のみ、一度設定すれば今後すべてのイベント設定で使用できます。
設定手順（所要時間：1分）
ステップ1： GTM管理画面の左側メニューから「変数」をクリック
ステップ2： 画面右上の「設定」ボタンをクリック
ステップ3： 以下の変数にチェックを入れる
クリック関連（すべてチェック推奨）
- Click Element
- Click Classes
- Click ID
- Click URL
- Click Text
- Click Target
フォーム関連
- Form Element
- Form Classes
- Form ID
- Form Target
- Form URL
- Form Text
ページ情報
- Page URL
- Page Hostname
- Page Path
- Referrer
スクロール関連
- Scroll Depth Threshold
- Scroll Depth Units
- Scroll Direction
これで事前準備は完了です。次は実際のイベント設定に進みましょう。
【実践編】GTMでよく使うイベント設定5選
実務で最も使用頻度が高い5つのイベント設定を、実装手順とコード例付きで解説します。
1. クリックイベントの計測設定
計測対象例：
- お問い合わせボタンのクリック
- 外部リンク（PDFダウンロード、SNSリンクなど）のクリック
- CTAボタンの効果測定
- 電話番号リンク（tel:）のタップ
設定手順（所要時間：3分）
ステップ1：トリガーの作成
- GTM管理画面で「トリガー」→「新規」をクリック
- トリガー名を入力（例：「お問い合わせボタン_クリック」）
- トリガータイプで「クリック – リンクのみ」を選択
重要：「すべてのリンククリック」と「リンクのみ」の違い
- すべてのリンククリック：
<a>タグ以外（<button>など）も計測 - リンクのみ：
<a>タグのみ計測（推奨：誤検知が少ない）
- 「このトリガーの発生場所」で「一部のリンククリック」を選択
- トリガー条件を設定
パターンA：特定ページの特定リンクを計測
条件1：Page Path | 含む | /contact
条件2：Click URL | 含む | /thanksパターンB：全ページで特定URLへのリンクを計測
条件：Click URL | 等しい | https://example.com/download.pdfパターンC：テキストで識別
条件：Click Text | 等しい | お問い合わせはこちら注意： すべての条件は「AND」で結合されます。1つでも条件に合致しないと発火しません。
ステップ2：GA4イベントタグの作成
- 「タグ」→「新規」をクリック
- タグ名を入力（例：「GA4_お問い合わせボタンクリック」）
- タグタイプで「Google アナリティクス: GA4 イベント」を選択
- 設定タグで「GA4設定タグ」を選択（未作成の場合は先に作成）
- イベント名を入力（例：
contact_button_click）
イベント名のルール：
- 英数字とアンダースコア（_）のみ使用可能
- スペース、ハイフン、日本語は使用不可
- 最大40文字まで
- イベントパラメータを追加（任意だが推奨）
| パラメータ名 | 値 |
|---|---|
button_text | {{Click Text}} |
button_url | {{Click URL}} |
page_location | {{Page URL}} |
- トリガーで、ステップ1で作成したトリガーを選択
- 「保存」をクリック
ステップ3：デバッグで動作確認
- GTM画面右上の「プレビュー」をクリック
- 計測対象のページURLを入力してデバッグモードを開始
- 実際にボタンをクリック
- GTMデバッグ画面で「Tags Fired」にタグが表示されることを確認
- GA4のリアルタイムレポートでイベントが表示されることを確認（5〜10秒待つ）
確認完了後、GTM画面で「送信」→「公開」を実行
応用例：外部リンククリックの一括計測
すべての外部リンク（他ドメインへのリンク）を一括で計測する設定です。
トリガー条件：
条件1：Click URL | 先頭が次と一致しない | {{Page Hostname}}
条件2：Click URL | 先頭が次と一致 | httpこれにより、自ドメイン以外へのリンククリックをすべて自動計測できます。
2. スクロール深度の計測設定
ユーザーがどこまで記事を読んでいるかを把握するためのスクロール計測です。コンテンツマーケティングの効果測定に必須の設定です。
計測目的：
- 記事の読了率を測定
- 離脱ポイントの特定
- CVRの高いスクロール深度の分析
- 広告表示タイミングの最適化
設定手順（所要時間：3分）
ステップ1：スクロールトリガーの作成
- 「トリガー」→「新規」をクリック
- トリガー名を入力（例:「スクロール深度_25-50-75-90」）
- トリガータイプで「スクロール距離」を選択
- 「垂直スクロールの深さ」にチェック
- パーセンテージを入力：
25,50,75,90
推奨設定値：
- 標準： 25, 50, 75, 90（バランス型）
- 詳細分析： 10, 25, 50, 75, 90, 100（細かく把握）
- 簡易版： 50, 90（最小限の計測）
- 「このトリガーの発生場所」で設定
全ページで計測する場合：
すべてのページ特定のブログ記事のみ計測する場合：
一部のページ
Page Path | 先頭が次と一致 | /blog/ステップ2：GA4イベントタグの作成
- 「タグ」→「新規」をクリック
- タグ名を入力（例：「GA4_スクロール深度」）
- タグタイプで「Google アナリティクス: GA4 イベント」を選択
- イベント名：
scroll_depth - イベントパラメータを追加
| パラメータ名 | 値 |
|---|---|
scroll_percentage | {{Scroll Depth Threshold}} |
page_title | {{Page Title}} |
page_path | {{Page Path}} |
- トリガーで、ステップ1で作成したトリガーを選択
- 「保存」をクリック
スクロール計測の注意点
❌ 計測が正確でないケース
1. アンカーリンク（ページ内リンク）がある場合 ページ読み込み時に自動スクロールすると、すべてのスクロールイベントが一度に発火してしまいます。
対策：
- アンカーリンク使用ページは計測対象から除外
- カスタムJavaScriptで手動スクロールのみ計測
2. ページ高さが短い場合 画面より短いページでは、そもそもスクロールが発生しないため計測不可です。
対策：
- 最低でも画面高さの2倍以上のコンテンツ量を確保
- トリガー条件で「Page Path | 含む | /long-article/」など長文記事のみに限定
3. 無限スクロール・SPA構造のサイト 動的にコンテンツが読み込まれるページでは、計測がずれます。
対策：
- カスタムJavaScriptで実装
- IntersectionObserver APIを使用した独自実装を検討
3. フォーム送信イベントの計測設定
フォーム送信完了を計測する設定です。お問い合わせ、資料請求、会員登録などのコンバージョン計測に必須です。
計測方法の選び方：
| 方法 | 使用条件 | メリット | デメリット |
|---|---|---|---|
| フォーム送信トリガー | ページ遷移あり | 簡単 | Ajax送信では使えない |
| サンクスページ計測 | 専用サンクスページあり | 最も確実 | サンクスページが必要 |
| カスタムイベント | Ajax送信 | 柔軟 | コード追加が必要 |
パターンA：サンクスページで計測（最も確実・推奨）
フォーム送信後に専用のサンクスページ（例：/thanks/）に遷移する場合、ページビュー計測が最も確実です。
設定手順
- 「トリガー」→「新規」をクリック
- トリガー名：「サンクスページ表示」
- トリガータイプ：「ページビュー」
- 「一部のページビュー」を選択
- 条件設定：
Page Path | 等しい | /thanks/
または、複数のサンクスページがある場合：
Page Path | 正規表現の一致 | ^/(thanks|thank-you|complete)/
- GA4イベントタグを作成
- イベント名：
form_submit - パラメータ：
form_type=contact（フォームの種類を識別）
- イベント名：
パターンB：フォーム送信トリガーで計測
ページ遷移が発生するフォームで使用可能です。
設定手順
- 「トリガー」→「新規」をクリック
- トリガー名：「お問い合わせフォーム送信」
- トリガータイプ：「フォームの送信」
- 「一部のフォーム」を選択
- 条件設定：
Page Path | 含む | /contact
重要：バリデーションチェック
フォームにバリデーション（入力チェック）がある場合、エラー時も発火してしまう問題があります。
対策： 「このトリガーの発生場所」で「タグ配信を待つ」にチェック→待機時間2000ms
パターンC：Ajax送信フォームの計測（カスタムイベント）
ページ遷移せずに「送信完了」メッセージが表示されるフォームの場合、カスタムイベントをdataLayerにpushする必要があります。
実装コード
フォーム送信が完了した後に、以下のJavaScriptを実行します：
// フォーム送信成功後に実行
dataLayer.push({
'event': 'form_submit_success',
'formType': 'contact',
'formId': 'contact-form-01'
});
GTM側の設定
- 「トリガー」→「新規」をクリック
- トリガータイプ：「カスタムイベント」
- イベント名：
form_submit_success - GA4イベントタグを作成し、このトリガーを設定
4. 動画再生イベントの計測設定
動画コンテンツの効果を測定するための設定です。特にYouTube動画は、GTMの標準機能で簡単に計測できます。
計測可能な動画アクション：
- 再生開始
- 一時停止
- 25%, 50%, 75%, 100%視聴完了
- シーク（早送り・巻き戻し）
- 動画タイトル、URL、再生時間の取得
YouTube動画の計測設定（所要時間：3分）
ステップ1：YouTube動画トリガーの作成
- 「トリガー」→「新規」をクリック
- トリガー名:「YouTube動画_再生」
- トリガータイプ:「YouTube動画」
- 「次の場合に動画データを取得」でアクションを選択：
推奨設定：
- ✅ 開始
- ✅ 完了
- ✅ 一時停止
- ✅ シーク
- ✅ 進行状況（25%, 50%, 75%にチェック）
- 「JavaScriptAPIのサポートが有効な動画を追加」にチェック
重要： このチェックがないと計測できません。
- 「このトリガーの発生場所」
全ページのYouTube動画を計測する場合：
すべてのページ
特定ページのみ：
一部のページ
Page Path | 含む | /blog/
ステップ2：GA4イベントタグの作成
- 「タグ」→「新規」をクリック
- タグ名：「GA4_YouTube動画イベント」
- タグタイプ：「Google アナリティクス: GA4 イベント」
- イベント名：
video_interaction - イベントパラメータを追加
| パラメータ名 | 値（GTM変数） |
|---|---|
video_title | {{Video Title}} |
video_url | {{Video URL}} |
video_status | {{Video Status}} |
video_percent | {{Video Percent}} |
video_duration | {{Video Duration}} |
組み込み変数の有効化を忘れずに： 「変数」→「設定」→「動画」セクションですべてにチェック
- トリガーで、ステップ1で作成したトリガーを選択
- 「保存」をクリック
Vimeo・自社サーバー動画の計測
YouTube以外の動画は、カスタムJavaScriptでの実装が必要です。
Vimeo Player APIを使った実装例
// Vimeo Player APIを読み込み
var player = new Vimeo.Player('動画のID');
// 再生開始
player.on('play', function() {
dataLayer.push({
'event': 'video_play',
'videoTitle': '動画タイトル'
});
});
// 視聴完了
player.on('ended', function() {
dataLayer.push({
'event': 'video_complete',
'videoTitle': '動画タイトル'
});
});
5. カスタムイベントの計測（応用編）
標準トリガーでは計測できない独自のアクションを計測する方法です。より高度な計測が可能になります。
使用例：
- 特定のボタンクリック後の複数アクション
- スライダー操作
- モーダルウィンドウの表示
- チャットボットの利用
- ページ滞在時間の計測
- 離脱時のポップアップ表示
実装方法：dataLayerにイベントをpush
JavaScript実装コード例
// 基本形
dataLayer.push({
'event': 'カスタムイベント名',
'eventCategory': 'カテゴリ',
'eventAction': 'アクション',
'eventLabel': 'ラベル'
});
// 具体例1：お気に入りボタンのクリック
document.getElementById('favorite-btn').addEventListener('click', function() {
dataLayer.push({
'event': 'favorite_click',
'itemId': '12345',
'itemName': '商品A'
});
});
// 具体例2：モーダルウィンドウの表示
function showModal() {
dataLayer.push({
'event': 'modal_open',
'modalType': 'campaign',
'modalTitle': '期間限定セール'
});
// モーダル表示処理
}
// 具体例3：30秒以上の滞在
setTimeout(function() {
dataLayer.push({
'event': 'engaged_user',
'timeOnPage': 30
});
}, 30000); // 30秒 = 30000ミリ秒
GTM側の設定
ステップ1：カスタムイベントトリガーの作成
- 「トリガー」→「新規」をクリック
- トリガー名：「お気に入りボタンクリック」
- トリガータイプ：「カスタムイベント」
- イベント名：
favorite_click（JavaScriptで定義したevent名と一致させる）
ステップ2：データレイヤー変数の作成（パラメータを取得する場合）
- 「変数」→「ユーザー定義変数」→「新規」をクリック
- 変数名：「DL – Item ID」
- 変数タイプ：「データレイヤーの変数」
- データレイヤーの変数名：
itemId - 「保存」をクリック
同様に itemName も作成します。
ステップ3：GA4イベントタグの作成
- 「タグ」→「新規」をクリック
- タグ名：「GA4_お気に入りボタンクリック」
- タグタイプ：「Google アナリティクス: GA4 イベント」
- イベント名：
favorite_click - イベントパラメータを追加
| パラメータ名 | 値 |
|---|---|
item_id | {{DL - Item ID}} |
item_name | {{DL - Item Name}} |
- トリガーで「お気に入りボタンクリック」を選択
- 「保存」をクリック
データレイヤーの確認方法
ブラウザの開発者ツール（F12）→ Console タブで以下を実行：
// 現在のdataLayerの内容を確認
console.log(dataLayer);
データが正しくpushされているか確認できます。
イベント設定時の注意点
各の3つの点を注意や活用すれば設定が正しいか確認することができます。また既存サイトにすでにタグやトリガーなどの独自の設定がある場合は、そのタグが発火している内容と競合する可能性がありますので、ご注意ください。すでにタグがある場合は、削除するか競合しない設定方法にするのがベストです。
1. デバッグモードの活用
デバッグモードはタグが正しく発火しているを確認するためのツールになります。デバッグモードで発火確認をして問題なく動作していたらGA4側のリアルタイムでデータが取得できるはずです。
GTM側のデバッグモードとGA4のリアルタイムの両方を使うことでより正確に確認することができます。
- プレビューモードでの動作確認
- リアルタイムでのイベント確認
- エラーの早期発見
2. セキュリティ対策
ユーザーの情報なども取得することができますが、セキュリティや個人情報保護の観点から個別のユーザーの情報の取得は最小限に抑えておくことをおすすめます。どこからどの情報が漏れるかわからないため取得には細心の注意をはらってください。
- 個人情報の取り扱い
- SameSite Cookie対応
- CSP（Content Security Policy）設定
3. パフォーマンスへの配慮
- タグの発火タイミング
- 同期・非同期読み込み
- タグの優先順位設定
イベント計測の活用方法
独自でイベントを設定してデータを取得することで、自社のビジネスのKPIに対してサイトのどこかボトルネックになっているかを判断することができます。KPIに近い部分から独自のイベントを設定して数値を計測するようにしてください。
取得した数値は必ず週次や月次で振り返り改善を常に行うことでより良いサイトになります。
1. コンバージョン最適化
- フォーム完了率の向上
- 離脱率の改善
- ユーザー動線の最適化
2. コンテンツマーケティング
- 記事の読了率測定
- 動画視聴完了率
- サイト内回遊の分析
3. A/Bテスト
- ボタンデザインの検証
- 導線の効果測定
- コピーの最適化
[専門用語解説]
- GTM（Google Tag Manager）：Googleが提供するタグ管理ツール
- GA4（Google Analytics 4）：Googleの新世代アナリティクスツール
- dataLayer：Webページとタグマネージャーの間でデータを受け渡すためのJavaScriptオブジェクト
- トリガー：タグを実行する条件を定義する設定
よくあるエラーと解決方法（実例ベース）
GTMのイベント設定でつまずきやすいポイントと、その解決方法を実例ベースで解説します。
エラー1：イベントがGA4に表示されない
症状： GTMのプレビューモードでは「Tags Fired」に表示されているのに、GA4のリアルタイムレポートにデータが表示されない。
原因と解決方法
❌ 原因1：GA4の測定IDが間違っている
GTMの「GA4設定タグ」で正しい測定ID（G-XXXXXXXXXX形式）が入力されているか確認してください。
確認方法：
- GA4管理画面 → データストリーム → 詳細
- 測定IDをコピー
- GTM「変数」→「GA4設定タグ」変数 → 測定IDを照合
❌ 原因2：イベント名に使用できない文字が含まれている
GA4のイベント名には厳格なルールがあります。
NG例：
お問い合わせ-クリック（日本語・ハイフン）button click（スペース）contact/button（スラッシュ）
OK例：
contact_clickbutton_clickform_submit
ルール：
- 英数字とアンダースコア（_）のみ
- 最大40文字
- 先頭は英字
❌ 原因3：GA4タグが複数発火している
複数のGA4設定タグが同じページで発火すると、イベントが重複送信され、データが不正確になります。
確認方法： GTMプレビューモードで「Summary」タブ → 「Tags Fired」に同じGA4タグが複数表示されていないか確認
解決策：
- 「すべてのページ」トリガーで発火するGA4設定タグは1つだけにする
- 重複している場合は統合する
エラー2：クリックイベントが発火しない
症状： デバッグモードでボタンをクリックしても、「Tags Not Fired」に表示され、タグが発火しない。
原因と解決方法
❌ 原因1：組み込み変数が有効化されていない
解決策： GTM → 変数 → 組み込み変数の設定 → Click関連の変数をすべてチェック
最低限必要な変数：
- Click Element
- Click URL
- Click Text
- Click Classes
- Click ID
❌ 原因2：トリガー条件が厳しすぎる
複数の条件を「AND」で指定している場合、1つでも条件に合致しないと発火しません。
デバッグ方法：
- GTMプレビューモード→クリック→「Variables」タブ
- 実際のClick URL、Click Textなどの値を確認
- トリガー条件と照合
よくある間違い：
条件設定：
Page Path | 含む | /contact
Click URL | 等しい | https://example.com/thanks
実際のClick URL：
https://example.com/thanks?utm_source=google
↑ パラメータ付きで完全一致しないため発火しない
解決策：
Click URL | 含む | /thanks
「含む」に変更することで柔軟に対応できます。
❌ 原因3：リンクのクリックが速すぎてタグが発火する前にページ遷移
解決策： トリガー設定で「タグ配信を待つ」にチェック→待機時間を2000ミリ秒に設定
エラー3：スクロール深度が正しく計測されない
症状： ページをスクロールしても、25%, 50%などのイベントが発火しない。
原因と解決方法
❌ 原因1：ページ高さが短すぎる
ページ全体の高さが画面より短い場合、そもそもスクロールが発生しないため計測できません。
確認方法： ブラウザの開発者ツール→ Console で以下を実行：
console.log('ページ全体の高さ:', document.body.scrollHeight);
console.log('画面の高さ:', window.innerHeight);
解決策：
- 最低でも画面高さの2倍以上のコンテンツを用意
- トリガー条件で「Page Path | 含む | /long-article/」など、十分な長さのページのみに限定
❌ 原因2：アンカーリンクで自動スクロールしている
ページ読み込み時に#section2などのアンカーリンクで自動的に下部に移動すると、すべてのスクロールイベントが一度に発火してしまいます。
解決策：
- アンカーリンク使用ページは計測対象から除外
- カスタムJavaScriptで「手動スクロールのみ」計測する実装に変更
❌ 原因3：無限スクロールやSPA（Single Page Application）構造
動的にコンテンツが読み込まれるページでは、GTMの標準スクロールトリガーでは正確に計測できません。
解決策：
- IntersectionObserver APIを使った独自実装
- dataLayerに手動でスクロールイベントをpush
エラー4：フォーム送信が計測できない
症状： フォーム送信ボタンを押してもイベントが発火しない。
原因と解決方法
❌ 原因1：フォームにバリデーションエラーがある
GTMのフォームトリガーは、正常に送信された場合のみ発火します。バリデーションエラー（未入力、形式エラーなど）で送信がキャンセルされると発火しません。
確認方法： ブラウザの開発者ツール→ Console タブでエラーを確認
解決策：
- 正しく入力してテスト
- エラーがある場合は、フォームのコードを修正
❌ 原因2：Ajax送信でページ遷移しない
ページ遷移せずに「送信完了」メッセージが表示されるフォームの場合、標準のフォームトリガーでは検知できません。
解決策： フォーム送信成功後に、以下のJavaScriptを実行：
dataLayer.push({
'event': 'form_submit_success',
'formType': 'contact'
});
GTMでカスタムイベントトリガー（イベント名：form_submit_success）を作成して計測します。
❌ 原因3：サンクスページ計測に切り替える（最も確実）
フォーム送信後に専用のサンクスページ（/thanks/など）に遷移する場合、ページビュートリガーで計測するのが最も確実です。
トリガー条件：
Page Path | 等しい | /thanks/
エラー5：トリガーが意図しないページで発火する
症状： 特定のページだけで発火させたいのに、全ページで発火してしまう。
原因と解決方法
❌ 原因：Page Path条件が広すぎる
間違い例：
Page Path | 含む | /contact
この場合、以下すべてのページで発火してしまいます：
/contact/contact-form/contact-us/blog/contact-tips
解決策1：「等しい」を使用
Page Path | 等しい | /contact
解決策2：正規表現を使用
Page Path | 正規表現の一致 | ^/contact$
^は行頭、$は行末を示し、完全一致を指定できます。
エラー6：変数に値が入らない（undefined）
症状： カスタム変数を作成したが、値が「undefined」になる。
原因と解決方法
❌ 原因1：JavaScriptの実行タイミングが早すぎる
ページが完全に読み込まれる前に変数を取得しようとすると、要素が存在せず「undefined」になります。
解決策： トリガーを以下に変更：
- DOM Ready：DOMツリーの構築完了後（推奨）
- Window Loaded：画像含むすべてのリソース読み込み完了後
❌ 原因2：CSSセレクタが間違っている
要素を取得するCSSセレクタが間違っていると、要素が見つかりません。
確認方法： ブラウザの開発者ツール→ Console で以下を実行：
document.querySelector('#your-selector');
nullが返る場合、セレクタが間違っています。
解決策：
- 開発者ツールの「Elements」タブで要素を右クリック→「Copy」→「Copy selector」でセレクタをコピー
- 正しいセレクタをGTMに設定
❌ 原因3：dataLayerのタイミング問題
dataLayerへのpushが、GTMの読み込みより後に実行されている場合、変数に値が入りません。
解決策： dataLayerの初期化は、GTMスニペットより前に配置する必要があります：
<!-- 正しい順序 -->
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({'userId': '12345'});
</script>
<!-- GTMスニペット -->
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
デバッグの基本フロー（チェックリスト）
トラブルシューティングは以下の順番で確認すると効率的です：
- ☑ プレビューモードでタグが発火しているか
- ☑ トリガー条件がすべて満たされているか（Variables タブで確認）
- ☑ GA4のリアルタイムレポートに表示されるか（5-10秒待つ）
- ☑ イベント名、パラメータに誤りはないか
- ☑ GA4の測定IDが正しいか
- ☑ ブラウザのコンソールにエラーが出ていないか
イベント設定のまとめ
GTMを活用したイベント計測は、Webサイトのパフォーマンス改善に不可欠なツールです。紹介した5つの設定方法を参考に、まずは基本的なイベントから設定を始めてみてください。段階的に計測項目を増やしていくことで、より詳細なユーザー行動の把握が可能になります。
本記事では、GTMを使ったイベント設定の完全マニュアルをお届けしました。
重要なポイント:
- 3つの基本要素を理解する
- タグ、トリガー、変数の役割と関係性
- 実践的な5つの設定をマスター
- クリック、スクロール、フォーム、動画、カスタムイベント
- 必ずデバッグモードで確認
- プレビューモード → リアルタイムレポート → 本番公開
- データを活用して改善
- イベント計測はゴールではなくスタート
- PDCAサイクルを回して継続的に改善
次のステップ:
- まずは簡単なクリックイベントから設定を始める
- プレビューモードで動作確認
- 段階的に計測項目を増やしていく
- データを分析して具体的な改善施策を実行
GTMを活用したイベント計測は、Webサイトのパフォーマンス改善に不可欠なツールです。本記事の設定方法を参考に、まずは基本的なイベントから始めてみてください。
関連記事
GTMデータレイヤーの使い方｜5分で理解できる設定手順とサンプルコード集
