Google タグマネージャー

GTMイベント設定の完全ガイド｜クリックイベント・カスタムイベントの実装手順と発火しない時の対処法

合同会社InnoMark
WEB制作からWEBマーケティングまでをご支援

目次

この記事で分かること（所要時間：5分）

✅ GTMイベント設定の基本3要素（タグ・トリガー・変数）の理解
✅ クリック・スクロール・フォーム・動画・カスタムイベントの実装方法
✅ GA4連携でコンバージョンを正確に計測する手順
✅ よくあるエラーと解決方法（実例ベース）
✅ デバッグモードを使った動作確認のコツ

結論：GTMを使えば、エンジニアに依頼せず5分でイベント計測を実装できます。本記事では、コピペで使えるコード例と実践的なトラブルシューティングを交えて、初心者でも確実に設定できる方法を解説します。

この記事の位置づけ

本記事は、GTMで設定できる5種類のイベント計測（クリック・スクロール・フォーム・動画・カスタムイベント）を網羅的に解説するガイドです。タグ・トリガー・変数の基本概念から、各イベントの設定手順、よくあるエラーの解決方法まで完全カバーしています。

クリック計測だけを詳しく知りたい方は、以下の専門記事をご覧ください。 CVボタン、外部リンク、電話タップ、PDFダウンロード、バナー画像など、用途別に7つの設定パターンを図解で解説しています。

関連記事： GTMクリック計測の設定方法｜ボタン・リンク・外部クリックの計測手順を図解で解説

なぜGTMイベント設定が重要なのか？

Webマーケティングで成果を出すには、「どのボタンが何回クリックされたか」「ユーザーはどこまで記事を読んでいるか」といったユーザー行動の可視化が不可欠です。

GTMイベント設定で実現できること

  • コンバージョン経路の特定：どのCTAボタンが効果的か数値で判断
  • コンテンツ改善：記事の離脱ポイントを特定し、読了率を向上
  • 広告効果測定：正確なCV計測で広告ROIを最適化
  • A/Bテストの実施：複数パターンの効果を定量的に比較

Google Tag Manager（GTM）を活用すれば、これらすべてをコード編集なしで実装できます。

Google Tag Manager（GTM）とは？タグマネージャーの基本を理解

GTMの役割：タグ管理を一元化するツール

GTMは、Webサイトに設置する各種トラッキングコードを一元管理できるGoogleの無料ツールです。

従来の方法との違い：

従来の方法GTMを使う場合
HTMLファイルを直接編集GTM管理画面で完結
エンジニアに依頼が必要マーケター自身で対応可能
変更のたびにサイト更新リアルタイムで反映
タグが複数箇所に分散一元管理で把握しやすい

GTMとGA4の連携で得られるメリット

GTMとGoogle Analytics 4（GA4）を組み合わせることで、以下が可能になります：

  • 標準では計測できないカスタムイベントの取得
  • 複数の広告タグ（Google広告、Facebook広告など）の統合管理
  • MAツール（HubSpot、Marketoなど）との連携
  • リアルタイムでのトリガー条件変更

なお、2024年3月にGA4では「コンバージョン」が「キーイベント」に名称変更されました。本記事では最新の名称に基づいて解説しますが、機能自体に変更はありません。GTMで設定したイベントをGA4側で「キーイベント」としてマークすることで、従来のコンバージョン計測と同じ分析が可能です。

参考：Google公式 – Google アナリティクスのコンバージョンとキーイベントの違い

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要素の関係性（実例）

シナリオ：「お問い合わせボタンのクリック数」を計測したい

  1. タグ：GA4イベントタグ（イベント名：contact_click）
  2. トリガー：クリックトリガー（条件：Click URL = /contact）
  3. 変数：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管理画面で「トリガー」→「新規」をクリックし、トリガータイプで「クリック – リンクのみ」または「クリック – すべての要素」を選択します。計測したい要素に合わせてClick URL、Click Classes、Click Textなどの条件を設定します。

ステップ2：GA4イベントタグの作成 「タグ」→「新規」→「Google アナリティクス: GA4 イベント」を選択し、イベント名（例：click_button_contact）とイベントパラメータ（button_text、button_urlなど）を設定します。ステップ1で作成したトリガーを紐づけます。

ステップ3：デバッグで動作確認 GTMのプレビューモードで実際にボタンをクリックし、「Tags Fired」にタグが表示されることを確認します。GA4のリアルタイムレポートでもイベントが送信されているか確認しましょう。

用途別の詳細な設定パターン

クリック計測は、計測対象の要素によって設定方法が異なります。以下のような用途別の設定パターンを詳しく知りたい方は、専門記事をご覧ください。

  • CVボタン（お問い合わせ・資料請求）のクリック計測
  • 外部リンクの一括クリック計測
  • 電話リンク（tel:）のタップ計測
  • メールリンク（mailto:）のクリック計測
  • PDFダウンロードの計測
  • バナー画像のクリック計測
  • 特定セクション内のすべてのクリック計測

→ GTMクリック計測の設定方法｜ボタン・リンク・外部クリックの計測手順を図解で解説

次のセクションでは、クリック以外のイベント計測（スクロール深度）の設定方法を解説します。

カスタムイベントの計測（応用編）

標準トリガーでは計測できない独自のアクションを計測する方法です。より高度な計測が可能になります。

使用例：

  • 特定のボタンクリック後の複数アクション
  • スライダー操作
  • モーダルウィンドウの表示
  • チャットボットの利用
  • ページ滞在時間の計測
  • 離脱時のポップアップ表示

実装方法：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：カスタムイベントトリガーの作成

  1. 「トリガー」→「新規」をクリック
  2. トリガー名：「お気に入りボタンクリック」
  3. トリガータイプ：「カスタムイベント」
  4. イベント名：favorite_click（JavaScriptで定義したevent名と一致させる）

ステップ2：データレイヤー変数の作成（パラメータを取得する場合）

  1. 「変数」→「ユーザー定義変数」→「新規」をクリック
  2. 変数名：「DL – Item ID」
  3. 変数タイプ：「データレイヤーの変数」
  4. データレイヤーの変数名：itemId
  5. 「保存」をクリック

同様に itemName も作成します。

ステップ3：GA4イベントタグの作成

  1. 「タグ」→「新規」をクリック
  2. タグ名：「GA4_お気に入りボタンクリック」
  3. タグタイプ：「Google アナリティクス: GA4 イベント」
  4. イベント名：favorite_click
  5. イベントパラメータを追加
パラメータ名値
item_id{{DL - Item ID}}
item_name{{DL - Item Name}}
  1. トリガーで「お気に入りボタンクリック」を選択
  2. 「保存」をクリック

データレイヤーの確認方法

ブラウザの開発者ツール（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形式）が入力されているか確認してください。

確認方法：

  1. GA4管理画面 → データストリーム → 詳細
  2. 測定IDをコピー
  3. GTM「変数」→「GA4設定タグ」変数 → 測定IDを照合

❌ 原因2：イベント名に使用できない文字が含まれている

GA4のイベント名には厳格なルールがあります。

NG例：

  • お問い合わせ-クリック（日本語・ハイフン）
  • button click（スペース）
  • contact/button（スラッシュ）

OK例：

  • contact_click
  • button_click
  • form_submit

ルール：

  • 英数字とアンダースコア（_）のみ
  • 最大40文字
  • 先頭は英字

❌ 原因3：GA4タグが複数発火している

複数のGA4設定タグが同じページで発火すると、イベントが重複送信され、データが不正確になります。

確認方法： GTMプレビューモードで「Summary」タブ → 「Tags Fired」に同じGA4タグが複数表示されていないか確認

解決策：

  • 「すべてのページ」トリガーで発火するGA4設定タグは1つだけにする
  • 重複している場合は統合する

エラー2：クリックイベントが発火しない

クリックトリガーが発火しない主な原因は以下の3つです。

  1. トリガータイプの選択ミス：<button>タグには「すべての要素」、<a>タグには「リンクのみ」を使い分ける
  2. 条件の設定ミス：Click ClassesやClick URLの値が実際のHTML要素と一致しているか確認
  3. JavaScriptによる動的生成要素：ページ読み込み後に生成されるボタンは通常のクリックトリガーで検知できない場合がある

クリック計測が動かない場合の詳しいトラブルシューティング（5つの原因と対処法）は、GTMクリック計測の設定方法で解説しています。

❌ 原因2：トリガー条件が厳しすぎる

複数の条件を「AND」で指定している場合、1つでも条件に合致しないと発火しません。

デバッグ方法：

  1. GTMプレビューモード→クリック→「Variables」タブ
  2. 実際のClick URL、Click Textなどの値を確認
  3. トリガー条件と照合

よくある間違い：

条件設定：

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>

デバッグの基本フロー（チェックリスト）

トラブルシューティングは以下の順番で確認すると効率的です：

  1. ☑ プレビューモードでタグが発火しているか
  2. ☑ トリガー条件がすべて満たされているか（Variables タブで確認）
  3. ☑ GA4のリアルタイムレポートに表示されるか（5-10秒待つ）
  4. ☑ イベント名、パラメータに誤りはないか
  5. ☑ GA4の測定IDが正しいか
  6. ☑ ブラウザのコンソールにエラーが出ていないか

イベント設定のまとめ

GTMを活用したイベント計測は、Webサイトのパフォーマンス改善に不可欠なツールです。紹介した5つの設定方法を参考に、まずは基本的なイベントから設定を始めてみてください。段階的に計測項目を増やしていくことで、より詳細なユーザー行動の把握が可能になります。

本記事では、GTMを使ったイベント設定の完全マニュアルをお届けしました。

重要なポイント:

  1. 3つの基本要素を理解する
    • タグ、トリガー、変数の役割と関係性
  2. 実践的な5つの設定をマスター
    • クリック、スクロール、フォーム、動画、カスタムイベント
  3. 必ずデバッグモードで確認
    • プレビューモード → リアルタイムレポート → 本番公開
  4. データを活用して改善
    • イベント計測はゴールではなくスタート
    • PDCAサイクルを回して継続的に改善

次のステップ:

  1. まずは簡単なクリックイベントから設定を始める
  2. プレビューモードで動作確認
  3. 段階的に計測項目を増やしていく
  4. データを分析して具体的な改善施策を実行

GTMを活用したイベント計測は、Webサイトのパフォーマンス改善に不可欠なツールです。本記事の設定方法を参考に、まずは基本的なイベントから始めてみてください。

関連記事

完全無料

無料診断サービス

専門家があなたのサイト・マーケティングを徹底分析。改善提案を無料でお届けします

無料

GA4の無料分析診断

Google Analytics 4の設定状況やデータ活用方法を無料で診断します

今すぐ診断を受ける
無料

WEBマーケティング無料診断

現在のマーケティング施策を分析し、改善提案を無料で提供します

準備中
無料

WEBサイト無料診断

サイトの使いやすさやSEO対策状況を無料で診断します

準備中