1. はじめに
先日、Google タグマネージャー（GTM）でボタンのクリック計測を設定してプレビューを確認したところ、思わぬ挙動にハマってしまいました。
計測初心者の方も、「なんで動いたり動かなかったり？」と混乱しやすい状況かと思います。
この記事では、僕が実際に経験したトラブルとその対策をお届けします。
【計測】GTMのトリガー設定時におかしな挙動が起きたら確認したいこと
計測初心者の方も、「なんで動いたり動かなかったり？」と混乱しやすい状況かと思います。この記事では、僕が実際に経験したトラブルとその対策をお届けします。
2. GTMでの設定
まずは普通に設定を入れたケースをご紹介します。
2.1 トリガーの作成
トリガータイプ：クリック - すべての要素
条件：
Click ID が等しい設定内容：
例）my-button
┌─────────────────────────────────┐
│ トリガー名：click_my_button │
│ トリガータイプ：クリック — すべての要素 │
│ Click ID → 等しい → my-button │
└─────────────────────────────────┘
2.2 イベントタグの作成
タグタイプ：GA4 イベント
設定タグ：GA4 計測ID
イベント名：click_my_button
パラメータ：
button_name → {{Click Text}}
3. プレビューで確認
GTM のプレビューモードを開いてサイトを操作。
期待する動き：
ボタンをクリック → タグが発火
実際の挙動：
同じボタンをクリックしても、発火したりしなかったり
4. 注意点・落とし穴
4.1 Data Layer を見ると…
プレビューの Data Layer タブを開くと、gtm.click イベントが発生する要素が毎回違うことが判明。
4.2 原因は要素階層の指定不足
HTML側を見返すと、ボタン内に やアイコン SVG が入っており、クリック要素は実際には
5. 対策
5.1 click_elements で複数セレクタを指定
GTMでは「Click Element」変数を使って、複数のセレクタを OR 条件で指定できます。
設定方法：
トリガー設定画面で「Click Element」に切り替え
設定内容：
#my-button, #my-button *
これで、ボタン本体も子要素もまとめて拾えるようになります。
6. まとめ
- GTMのクリックトリガーは、要素階層まで意識しないといとハマる
- Data Layerタブで実際に発火要素を確認するクセをつける
- 「Click Element」で親＋子要素をまとめて指定するのがシンプルでおすすめ
めちゃくちゃ初歩的なミスで焦りましたが、一度深呼吸して Data Layer などをしっかり確認すれば解決できます。
Web制作のご依頼・ご相談お待ちしております。
お気軽にご連絡ください！
この記事が「同じような事象で調べた人」のお役に立てば幸いです。