Googleタグマネージャー（GTM）の「要素の表示」トリガーは、「ユーザーがどの要素を表示したか」を計測できる便利な仕組みです。
しかし、見た目は簡単に設定できそうに見えても、実際には 「思ったように動かない」「データが取れない」 といったトラブルが起きやすいポイントでもあります。
特に、画面の構造やスクロールの仕組みはサイトごとに違うため、ほんの小さな設定の違いやサイト側の仕様によって、計測結果が大きく変わることがあります。
このコラムでは、GTMでスクロール計測を行うときに起きやすい “よくある失敗10選” をまとめました。
どれも実務でよく遭遇するものばかりなので、設定前に知っておくことでミスを大幅に減らせるので、ぜひご参照ください。
- 意図せず何度も計測される問題
- スクロールを飛ばす操作（アンカーリンク等）で計測漏れ
- 視認割合（Threshold）の設定ミス
- SPA（Single Page Application）での計測抜け
- GTMがサイトを読み込んだタイミングで要素が検知されない
- モーダル・アコーディオン内要素が計測されない
- 目視では見えていないのに「表示」と判定される問題
- デバイス（PC / SP）で発火率が大きく変わる
- CSSセレクタの誤設定
- DOM構造が変わり、突然発火しなくなる
- まとめ
① 意図せず何度も計測される問題
トリガーを起動するタイミングを「各要素が画面に表示されるたび」にすると、要素が画面に入るたびにトリガーが発火し、1ページビュー内で何度も計測されてしまう。
さらに「1ページにつき1度」にすると、今度は複数箇所に同じ要素がある場合に計測されなくなるなど、設定のバランスが難しい点も特徴。
例：
• 「再度表示されたら計測」にチェックが入っているために、スクロールアップ／ダウンで再度判定されてしまう
対策：
• ページ内の計測目的に応じて「1回のみ」か「複数回」を明確に設計する
↑トリガーを起動するタイミングを選択
② スクロールを飛ばす操作（アンカーリンク等）で計測漏れ
ページ内リンクやボタンのクリックで一気にジャンプすると、スクロールの割合を計測したいのであれば本来通過するはずの要素が画面に入らず、トリガーが発火しなくなってしまう。
例：
• 目次のリンク → セクション下部へジャンプ
• トップへ戻るボタン
• タブ切替でセクションが下方へ移動するUI
対策：
• セクション単位のイベントではなく、ユーザー操作イベント（アンカークリック）も併用
• 「表示されなければ発火しない前提」として分析時に考慮する
③ 視認割合（Threshold）の設定ミス
視認の最小割合が高すぎると、ユーザーが実際には見ていてもトリガーが発火しないケースが多い。
例：
• 50%に設定しているが、対象要素が大きすぎて50％以上の領域が表示されない
• スマホでは表示領域が狭く、Thresholdを満たせない
対策：
• 10〜25%など、現実的なラインから検討
↑画像が大きすぎるために視認の最小割合が条件に当てはまらず、トリガーが発火しない
④ SPA（Single Page Application）での計測抜け
SPAサイトでは、ページが切り替わっても実際にはDOMが再生成されず、GTMが「新しいページ」と認識しないケース。
例：
• 初回だけ発火するが、2画面目から動かない
• あるページだけイベントが取れていない
対策：
• history change トリガーとの併用
• ウェブ・アプリ側から要素の読み込み後にカスタムイベントを発火
⑤ GTMがサイトを読み込んだタイミングで要素が検知されない
GTMが読み込んだ時点でまだその要素が存在せず、後から要素が生成された場合にトリガーが動作しない。
例：
• 遅延読み込みされた画像バナー
• ECサイトの無限スクロール商品一覧
対策：
• 可能であればページロード時点で対象要素がDOMに存在するように調整
• もしくは、要素の表示トリガーの「DOMの変化をモニタリング」をONにして、後から追加された要素にもセレクタが適用されるかデバッグで確認する
• それでも発火しない場合は、CSSセレクタが後から追加される要素に正しくマッチしているか見直す
⑥ モーダル・アコーディオン内要素が計測されない
↑アコーディオン例
display:noneを使って非表示にしている要素は、表示した時点でGTMが要素を計測対象として捉えられないため計測できないケース。
例：
• display:noneを使ったFAQなどのアコーディオンメニューの開閉
• display:noneを使った商品詳細モーダル(ポップアップ表示)
• display:noneを使ったタブでのコンテンツ切り替え
対策：
• モーダルやアコーディオンが開いたタイミングで、サイト側からカスタムイベントを dataLayer.push() する
• 要素表示トリガーではなく、ユーザーの操作イベント（クリック・タップ）で計測する
⑦ 目視では見えていないのに「表示」と判定される問題
GTMは 「画面上に表示されたか」しか見ないため、人が目視できる範囲ではなく要素が隠れていても発火することがある。
例：
• 固定ヘッダーやCSSの重なりで要素が裏側に隠れている
対策：
• 実際のUI配置を考慮して、発火位置の見直し
⑧ デバイス（PC / SP）で発火率が大きく変わる
視認割合や画面サイズが違うことで、PCでは発火するのにスマホでは発火しないなど、デバイスにより発火率が変わる問題が起こる。
例：
• スマホだと要素が大きくて視認割合(Threshold)を満たさない
• PCは表示領域が広いため視認されやすい
対策：
• 「カスタムJavascript」変数などを使ってPC / SPで閾値を変える
⑨ CSSセレクタの誤設定
セレクタの指定が曖昧だと、意図しない複数要素で発火してしまうことがある。
ありがち：
• .title のような汎用的なクラス名を指定してしまう
• 複数箇所に同じ条件に合致する要素が存在する
• IDなのでページ内に一つだと思いきや、制作のミスで実はページ内に複数存在していた
対策：
• できるだけユニークなセレクタを利用
• ChromeのDevToolsでセレクタのヒット数を確認
• 複数該当する場合はnth-child や data属性を活用する
↑ChromeのDevTools内のConsoleから、document.querySelectorAllでいくつCSSセレクタが該当したかlengthの数を確認する
⑩ DOM構造が変わり、突然発火しなくなる
例えばABテストツールがDOMを書き換えると、設定したCSSセレクタと一致しなくなり、急に計測がゼロになるケース。
例：
• クラス名がDOM構造の変更により、指定したCSSセレクタと一致しなくなる
• 要素の階層に変更がある
対策：
• DOM変化がある場合、事前に計測設定を確認
• セレクタをDOM依存ではなくdata属性などで安定化
• DOM構造変更直後は特に計測監視を徹底する
まとめ
「要素の表示」トリガーはとても便利ですが、ページの構造やUIの動きに左右されやすく、気づかないうちに計測が漏れたり、逆に何度もイベントが発火したりすることがあります。
今回紹介した10のポイントは、特に初心者がつまずきやすい代表的なトラブルです。
こうした“落とし穴”を理解しておくと、データの信頼性が高まり、分析もしやすくなります。
もし計測がうまくいかないときは、今回のチェックリストを思い出して見直してみてください。
