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

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

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

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

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

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

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

設定手順

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

標準機能で動作しない場合：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で要素が表示されたときに発火するトリガー」を実装する方法を解説しました。

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