特定の文字が表示されたらGTMでGA4にイベント送信する方法（コピペでOK）

分析対象サイトで、特定の文字列が出現したら、イベントを発生させたいといった要望に応えるため解説をします。

実際に画面に表示されたかどうかは問題ではなく、HTML上に出現したかどうかで判断します。ユーザーの目に映らない場所でもイベントを送信できますので、やり方を覚えておいて損はないです。

はじめに

今回は、GTMでタグを２つとトリガーを１つ用意します。

• 仕込み用のタグ（カスタムHTML）
• イベント送信用のタグ（GA4イベント）
• イベント送信用のトリガー（カスタムイベント）

仕込み用のタグ（カスタムHTML）を用意

仕込み用のタグにはJavascriptを記述する必要がありますが、いちいち考えて作る必要はないです。
以下のコードをコピーして使ってください。以下修正してお使いください。

• 「”文字列”」の箇所を対象の文字列に変更してください。
• 「event_name」の箇所を任意のイベント名に変更してください。

<script>
  // ページのDOMが完全に読み込まれたときに実行
  document.addEventListener("DOMContentLoaded", function() {
    // ページのHTML全体を取得
    var pageContent = document.body.innerHTML;

    // ページ内に「文字列」という文字列が含まれているか確認
    if (pageContent.includes("文字列")) {
      // GTMのdataLayerにイベントを送信
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: "event_name"  // イベント名は任意で設定
      });
    }
  });
</script>

上記コードをコピーして修正できたら、GTMタグのカスタムHTMLにセットします。

トリガーはDOMReadyで、すべてのDOMReadyイベントにしておきましょう。（対象ページで発火すればなんでもいいです。）

イベント送信用のタグ（GA4イベント）を用意

次は、GA4にイベントを送信するためのタグを用意します。

Googleアナリティクス：GA4イベントを選択して、イベント名に任意の値を入れましょう。（必ずしも上記コードで指定したevent_nameと一致させる必要はないです。）

イベント送信用のトリガー（カスタムイベント）を用意

続けて、イベント送信用のタグ（GA4イベント）にセットするためのトリガーを用意します。

トリガーでカスタムイベントを選択し、イベント名の箇所にJavascriptで指定しているイベント名（例のコードでいうevent_name）をセットします。

これをイベント送信用のタグ（GA4イベント）のトリガーとしてセットして準備完了です。

プレビューで確認

準備できたら、GTMでプレビューをしましょう。実際の画面上で対象の文字列を出現させて、タグが発火しているかを調べましょう。

問題なければ完了です。

解説

これまで、何を設定していたかを解説します。

まず、仕込み用のタグ（カスタムHTML）では、ページの読み込み時に対象の文字列がHTML上に存在するかどうかを探し出し、存在した場合は、event_nameイベントを作成しています。

そして、event_nameイベントが作成されたと同時に、イベント送信用のトリガー（カスタムイベント）が発火し、イベント送信用のタグ（GA4イベント）でGA4にイベントを送信しています。

応用すれば、サイト内の検索窓で検索されたキーワードをGA4に送ったりすることできますので、また今度解説します。

使い道

特定の文字列出現時のイベントの使い道としては、会員ごとにアクセス数を取りたいニーズだったり、SPAで対象コンテンツの表示数を取得したい場合に使えますね。

GTMでも文字列の出し分けに応じて、トリガーの発火条件にセットできるので、様々な表示制御に活用できます。

イベントが用意できれば、探索レポートでセグメントに活用したりとGA4の分析幅が大きく広がりますので是非試してみてください。