GTMで要素が表示されたときに発火するトリガーの設定方法

この記事のポイント

• GTMの「要素の表示」トリガーは、特定のCSSセレクタや要素IDを指定するだけで画面内への表示を検知できる標準機能である。
• フォーム完了メッセージやサンクスページ要素のような動的に出現する要素のイベント計測に、このトリガーが有効な手段となる。
• サイトの構造によっては標準トリガーが安定しないケースがあり、その場合はカスタムHTMLタグでMutationObserverを実装するのが定石である。
• MutationObserverを使う方法では、要素の追加や表示を監視し、条件を満たした時点でdataLayer.pushを実行してカスタムイベントを発火させる。

Googleタグマネージャー（GTM）を活用していると、「特定の要素がユーザーの画面に表示されたときにイベントを発火させたい」というニーズが出てきます。たとえば、フォーム送信後に表示されるメッセージ <p class="form_complete">お申込みありがとうございました。</p> を検知して、GA4や広告計測タグを発火させたいケースです。

しかし、この要素はJavaScriptで動的に表示されることが多く、単純なページビューやクリックトリガーでは計測できません。では、どうすればよいのでしょうか？

本記事では、GTMの「要素の表示」トリガーを使った標準的な方法と、うまく動作しない場合のためのカスタムスクリプト（MutationObserver）を使った応用方法を解説します。この記事を読めば、フォーム完了メッセージなど動的に表示される要素を正確にトラッキングできるようになります。

GTMの「要素の表示」トリガーを使う方法（推奨）

図1: 標準トリガーと代替実装の使い分け判断フロー

まずはGTMが提供する標準機能「要素の表示（Element Visibility）」トリガーを利用しましょう。フォーム完了後に表示される以下の要素を検知する例を考えます。

<p class="form_complete">お申込みありがとうございました。</p>

設定手順

STEP

トリガーを作成

以下の設定に従ってトリガーを作成します。

• 種類：要素の表示
• 選択方法：CSS セレクタ
• セレクタ：p.form_complete
• 最小表示率：1%
• 発火タイミング：1回のみ or 要素が表示されるたび（要件に応じて選択）
• DOM変更を監視：オン

STEP

条件を追加する（任意）

同じクラスが別用途で使われている場合は、テキスト内容を変数化して条件判定するのがおすすめです。

• 変数 > 新規 > カスタム JavaScript

function () {
  var el = document.querySelector('p.form_complete');
  return el ? (el.textContent || '').trim() : '';
}

• 変数名例：JS - 完了メッセージ
• トリガー条件で「JS - 完了メッセージ 等しい お申込みありがとうございました。」を指定

STEP

タグと接続

タグに作成したトリガーを紐づけます。今回はGA4イベントタグと紐づけていますが、広告のコンバージョンタグに紐づけることで、フォーム送信完了を広告のコンバージョンとしてカウントすることもできます。

• GA4イベントタグを作成し、イベント名を form_complete_visible とする
• パラメータに message: {{JS - 完了メッセージ}} を設定すると後で分析に便利

標準機能で動作しない場合：MutationObserverを使う方法

図2: MutationObserverによるイベント検知フロー図

サイトの仕組みによっては「要素の表示」トリガーが安定しない場合があります。その場合は、カスタムHTMLタグで要素の追加や表示を監視し、要素が現れたら dataLayer.push() を実行してカスタムイベントを発火させます。

サンプルコード

<script>
(function() {
  var fired = false;

  function isVisible(el) {
    if (!el) return false;
    var rect = el.getBoundingClientRect();
    var inViewport = rect.bottom > 0 && rect.top < window.innerHeight;
    var style = window.getComputedStyle(el);
    return inViewport && style.display !== 'none' && style.visibility !== 'hidden';
  }

  function check() {
    var el = document.querySelector('p.form_complete');
    if (!el) return;
    var text = (el.textContent || '').trim();
    if (!fired && text === 'お申込みありがとうございました。' && isVisible(el)) {
      fired = true;
      window.dataLayer.push({
        event: 'formCompleteVisible',
        message: text
      });
    }
  }

  var observer = new MutationObserver(check);
  observer.observe(document.documentElement, { childList: true, subtree: true });
  window.addEventListener('scroll', check);
  window.addEventListener('resize', check);
  document.addEventListener('DOMContentLoaded', check);
  window.addEventListener('load', check);
})();
</script>

GTM側の設定

• トリガー：カスタムイベント
• イベント名：formCompleteVisible
• 条件：{{message}} 等しい お申込みありがとうございました。

この方法なら、フォーム送信後にメッセージが表示されたタイミングを確実に捉えられます。

まとめ

本記事では「GTMで要素が表示されたときに発火するトリガー」を実装する方法を解説しました。

• 標準機能（要素の表示トリガー）
  • セレクタ指定 p.form_complete
  • DOM変更を監視をオンにする
  • テキスト一致条件で精度を高められる
• 安定しない場合の解決策
  • カスタムHTMLタグ + MutationObserver
  • dataLayer.push() でカスタムイベントを発火

動的に表示される要素を正確に計測できれば、フォーム完了の正しいCV計測や、ユーザー行動の深掘り分析に役立ちます。ぜひプロジェクトに応じて適切な方法を導入してみてください。