ホーム»ブログ»Google タグマネージャー»【コピペOK】GTMイベント設定完全マニュアル｜クリック・スクロール・フォーム送信を5分で実装

【コピペOK】GTMイベント設定完全マニュアル｜クリック・スクロール・フォーム送信を5分で実装

Google タグマネージャー作成日: 2024/11/21 更新日: 2025/12/20

Webサイトのユーザー行動を正確に把握するには、Google Tag Manager（GTM）を使ったイベント計測が不可欠です。本記事では、GTM初心者の方でも5分で実装できる実践的なイベント設定方法を、コピペで使えるコード例とともに詳しく解説します。

Google Tag Managerとイベント計測の重要性
Google Tag Manager（GTM）の基本を理解しよう
GTMイベント設定の基本と重要性
【事前準備】GTM組み込み変数の設定
- 設定手順
【実践編】GTMでよく使うイベント設定方法5選
イベント設定時の注意点
イベント計測の活用方法
よくあるエラーと解決方法
イベント設定のまとめ

Google Tag Managerとイベント計測の重要性

Webサイトのパフォーマンスを向上させるには、ユーザー行動の正確な把握が不可欠です。Google Tag Manager（GTM）を活用したイベント計測は、マーケティング担当者が自らタグ管理を行える強力なツールです。本記事では、GTMの基本から実践的なイベント設定方法まで、初心者の方にも分かりやすく解説します。

Google Tag Manager（GTM）の基本を理解しよう

GTMは、Webサイトやアプリに各種トラッキングコードやマーケティングタグを簡単に追加・管理できるツールです。従来はエンジニアに依頼が必要だった作業を、マーケティング担当者が自分で行えるようになります。Google アナリティクス4（GA4）と連携することで、より詳細なユーザー行動分析が可能になります。

GTMを使うメリット:

コードの直接編集が不要
タグを一元管理できる
変更が即座に反映可能
複数のツールを効率的に管理

GTMイベント設定の基本と重要性

イベント設定の基本概要

GTMのイベント設定とは、ユーザーがサイト内で行う特定のアクション（クリック、スクロール、フォーム送信など）を計測するための仕組みです。これにより、どのアクションがコンバージョンにつながるのかを明確に把握でき、マーケティング施策の効果測定や改善が可能になります。GTMを活用すれば、コードの修正が不要なため、迅速かつ柔軟な設定が実現できます。

イベント設定の役割とSEOへの影響

イベント設定は、ユーザー行動をデータとして収集することで、サイト改善やコンバージョン率向上の施策に直結します。さらに、正確なデータ計測は、サイトのユーザビリティ向上とSEOの評価にも影響を与えるため、Google検索上位表示を狙う上でも非常に重要な要素となります。具体的な改善策をPDCAサイクルで回すための基盤として、GTMでのイベント設定は不可欠です。

GTMの3つの基本構成要素

GTMは3つの構成で設定ができます。タグ・トリガー・変数の3つの要素で構成されております。この３つの設定と行うことで通常のGA4では計測できないデータや複数のタグ（MAツールのタグやGA4や広告タグなど）をマーケターげ管理することができるようになります。

1.タグ（Tag）- 何を実行するか

タグはそのツールを利用するのに必要なコードのことを言います。このタグを設置しないと計測やツールの利用ができません。
GA4の埋め込みタグやMAツールなどの埋め込みタグのことを言います。このタグを設置することで利用することができます。

アナリティクスコード
コンバージョン計測コード
リマーケティングコード
コンバージョンタグ

2. トリガー（Trigger）- いつ実行するか

トリガーはタグを発生させるタイミングを設定するものになります。例えば、指定のページのみにツールを動かしたいやクリックされた回数を計測するなどの際に使用します。タグをどのタイミングで動かすかを指定することで細かくデータを収集することができます。

一番設定が多い部分は、広告のコンバージョンタグの発火のタイミングはよく設定します。

ページビュー
クリックイベント
フォーム送信
カスタムイベント

3. 変数（Variable）- どんなデータを使うか

変数は、取得したデータを格納する「箱」のようなものです。2種類あります。

組み込み変数：GTMにデフォルトで用意されている変数
ユーザー定義変数：独自に設定する変数

変数は、取得したデータを入れる箱というイメージを持っていただければと思います。
取得したデータを箱に格納してGA4などにデータを渡して集計できるようにするものになります。

ページURL
クリック要素
カスタムJavaScript

イベント設定で計測できる主な行動:

ボタンクリック数
外部リンクのクリック
PDFダウンロード数
ページスクロール深度
フォーム送信完了
動画再生・視聴完了
特定要素の表示

イベント設定により、どのアクションがコンバージョンにつながるのかを明確に把握でき、マーケティング施策の効果測定や改善が可能になります。

【事前準備】GTM組み込み変数の設定

イベント設定を行う前に、GTMの組み込み変数を有効化する必要があります。この設定は一度行えば、以降のすべてのイベント設定で使用できます。

設定手順

ステップ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

これで事前準備は完了です。次は実際のイベント設定に進みましょう。

【実践編】GTMでよく使うイベント設定方法5選

1. クリックイベントの計測

クリックイベントは説明の通りクリック数を計測する設定方法になります。
お問い合わせへの推移ボタンやポップアップなどの要素のクリック数を計測することが多くあります。サイトでよく使うものになるので、覚えておいてください。

設定手順

1.トリガーの作成

トリガータイプで「クリック – リンクのみ」を選択
トリガー条件の設定
- Page Path：クリックを計測したいページのURL
- Click URL：クリックされた箇所のURL

※全ての条件がマッチした際にトリガーが動きますので1つでも条件にマッチしない場合はトリガーが動かないのでご注意ください。

GA4へのイベント送信設定
- イベント名の設定（例：「button_click」）
- パラメータの追加（クリック要素、クリック先URLなど）

他にもCSSやdata属性を取得するパターンも可能になりますので、クリックイベントだけの解説記事に詳細をまとめさせていただきます。

クリックトリガーの公式はこちら

2. スクロール深度の計測設定

ユーザーがどこまでコンテンツを読んでいるかを把握するためのスクロール深度計測は、コンテンツマーケティングに重要なデータを提供します。

設定手順

1.スクロールトリガーの作成

トリガータイプで「スクロール深度」を選択
垂直スクロール深度の設定（例：25%, 50%, 75%, 90%）

スクロール量を計測する場合、アンカーリンクやページの読み込みに遅延が起こると、計測のデータは多少ズレが発生します。特にアンカーリンクがある場合は、正しく計測できないことが多いためご注意ください。

2.GA4へのイベント送信設定

イベント名の設定（例：「scroll_depth」）
パラメータの追加（スクロール率など）

GA4のイベントタグの設定を行い、指定のGoogleアナリティクスのIDを入力して、
イベント名・イベントパラメータ・イベントパラメータの値を入れる。

トリガーとして、先ほど1で設定したものを選択して完了になります。

スクロールのトリガーの公式ヘルプはこちら

3. 動画再生イベントの計測

動画コンテンツの効果を測定するための設定です。特にYouTube動画は、GTMの標準機能で簡単に計測できます。

YouTube動画の計測設定

1.YouTube動画トリガーの作成

トリガータイプで「YouTube動画」を選択
以下のアクションを設定：
- 再生開始
- 一時停止
- 完了視聴

Youtubeの動画のトリガーもデフォルトで用意されているものがありますので、そのまま使用するだけトリガーの設定は完了します。しかし、YoutubeのみになりますのでYoutube以外の動画の再生時間などを計測する場合には独自の設定が必要になります。

2.パラメータの設定

動画タイトル
再生時間
進捗率

タグの設定も基本的にはデフォルトで組み込み変数が用意されているのでそれをイベントパラメータに設定することで値を取得して、GA4側で計測したデータを閲覧することができます。

youtube動画のトリガーの公式ヘルプはこちら

4. フォーム送信イベントの計測

フォームトリガーの設定

1.送信完了の検知方法

フォーム送信トリガー
カスタムトリガー

先ほどのクリックイベントと同じようにトリガーのタイプを「フォームの送信」を選択して、指定のページのみすることでトリガーの設定は完了。

別途バリデーションの対応がフォームの構造では必要になります。
公式ヘルプはこちら

5. カスタムイベントの計測

JavaScriptを使用した高度な設定

// カスタムイベントの発火
dataLayer.push({
  'event': 'customEvent',
  'eventCategory': 'UserAction',
  'eventAction': 'ButtonClick',
  'eventLabel': 'Contact'
});

イベント設定時の注意点

各の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のプレビューモードでは発火しているのに、GA4のリアルタイムレポートにデータが表示されない

原因と解決方法:

GA4の測定IDが間違っている
- GTMの「GA4設定タグ」で正しい測定ID（G-XXXXXXXXXX）が入力されているか確認
- 測定IDは、GA4管理画面 > データストリーム > 詳細から確認可能
イベント名に使用できない文字が含まれている
- 英数字、アンダースコア（_）のみ使用可能
- NG例: 「お問い合わせ-クリック」「button click」（スペースNG）
- OK例: 「contact_click」「button_click」
GA4タグが複数発火している
- 「すべてのページ」トリガーで発火するGA4設定タグが複数ないか確認
- 重複している場合は1つに統合

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

症状: デバッグモードでクリックしても、タグが発火しない

原因と解決方法:

組み込み変数が有効化されていない
- GTM > 変数 > 組み込み変数の設定で、Click関連の変数がすべてチェックされているか確認
- 特に「Click Element」「Click URL」「Click Text」は必須
トリガー条件が厳しすぎる
- 複数の条件を「AND」で指定している場合、1つでも合致しないと発火しない
- デバッグモードの「Variables」タブで、実際の値を確認
- 条件を緩めるか、「OR」条件に変更
リンクのクリックが速すぎる
- 「リンクのみ」トリガーの場合、「タグ配信を待つ」オプションを有効化
- 待機時間を2000ミリ秒（2秒）に設定

エラー3: スクロール深度が正しく計測されない

症状: スクロールしても25%、50%などのイベントが発火しない

原因と解決方法:

ページ高さが短すぎる
- ページ全体の高さが画面より短い場合、スクロールが発生しないため計測不可
- 対象ページのコンテンツ量を確認
アンカーリンクで自動スクロールしている
- ページ読み込み時にアンカーリンク（#section）で自動的に下部に移動すると、すべてのスクロールイベントが一度に発火
- 「すべてのページ」ではなく、特定のページのみに限定
無限スクロールやSPA構造
- 動的にコンテンツが読み込まれるページでは、計測がずれる
- カスタムJavaScriptでの実装を検討

エラー4: フォーム送信が計測できない

症状: フォーム送信してもイベントが発火しない

原因と解決方法:

フォームにバリデーションエラーがある
- GTMのフォームトリガーは、正常に送信された場合のみ発火
- ブラウザの開発者ツールでコンソールエラーを確認
Ajaxによる送信
- ページ遷移せずに送信が完了する場合、標準のフォームトリガーでは検知できない
- カスタムイベントをdataLayerにpushする必要がある
// フォーム送信完了後に以下を実行 dataLayer.push({'event': 'form_submit_success'});
サンクスページ計測に切り替える
- フォーム送信後に専用のサンクスページ（/thanks/など）に遷移する場合
- ページビュートリガーでサンクスページを指定する方が確実

エラー5: トリガーが意図しないページで発火する

症状: 特定のページだけで発火させたいのに、全ページで発火してしまう

原因と解決方法:

Page Path条件が間違っている
- 「含む」条件で広すぎる文字列を指定している
- 例: /contactで指定すると/contact-formも/contact-usも該当
- 解決: 「等しい」または「正規表現の一致」を使用
変数の値を確認していない
- デバッグモードで「Variables」タブを開き、実際のPage Path値を確認
- https://example.com/blog/articleの場合、Page Pathは/blog/articleのみ

エラー6: 変数に値が入らない（undefined）

症状: カスタム変数を作成したが、値が「undefined」になる

原因と解決方法:

JavaScriptの実行タイミングが早すぎる
- ページが完全に読み込まれる前に変数を取得している
- トリガーを「DOM Ready」または「Window Loaded」に変更
セレクタが間違っている
- 要素を取得するCSSセレクタが間違っている
- ブラウザの開発者ツールでdocument.querySelector('セレクタ')を実行して確認
dataLayerのタイミング問題
- dataLayerへのpushが、GTMの読み込みより後に実行されている
- dataLayerは GTMスニペットより前に配置する必要がある