オキーフではもう長いこと Google アナリティクスを活用していますが、2023年7月にユニバーサルアナリティクスが廃止になる事を受けて、GA4への移行を進めています。その中で、GTM (Google タグ マネージャー) の活用も進めています。GTMではCV計測のため、さまざまなイベントを設定するわけですが、CSSのclass変化をトリガーにできたら便利なのにな、と思い調べたところ、なかなか適したサンプルが見つからなかったので、作成してみました。参考になれば幸いです。

GTMの設定は下記の4つ。監視対象のページをトリガーとして、タグからカスタムHTMLを動かし、JavaScriptによりCSSのclass変化を監視し、GTMのイベントに変換、これをトリガーとして、GA4のイベントに送り出します。

• トリガー1

  監視ページ指定

  監視するclassがあるページを指定したトリガーを作成します。

• タグ1

  class変化の監視とGTMイベント化

  カスタムHTMLを使ってJavaScriptでclass変化を監視して、GTMイベントに変換します。

• トリガー2

  GTMイベント監視

  GTMイベントの発生を監視して、トリガーとします。

• タグ2

  GA4イベント化

  GA4のイベントとして送り出します。

トリガー1：ページビュー

ここで、タグ1 を発動させるページを限定しておきます。監視するclassがないページでカスタムHTMLを起動するとJavaScriptでエラーを吐いてしまうためです。

タグ1：カスタム HTML

<script type="text/javascript">
var strHTML = document.querySelector('.wpcf7-form');
var aryConfig = { attributes: true, attributeFilter: ['class'] };
var objObserver = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    var strClass = mutation.target.className;
    if(strClass.search(/sent/g) > 0){
      dataLayer.push({'event':'gtm_trigger'});
    }
  });
});
objObserver.observe(strHTML,aryConfig);
</script>

1. var strHTML = document.querySelector('.wpcf7-form');

   querySelector で監視対象を指定します。サンプルでは WordPress プラグインの Contact Form 7 の送信時に .wpcf7-form の class に sent の class が付く変化を監視します。

2. var aryConfig = { attributes: true, attributeFilter: ['class'] };

   observe の設定値 attributeFilter で class を監視するよ、と言う設定をする。設定値についてはググってもらえれば、監視対象をより細かく設定できるかと思います。

3. var objObserver = new MutationObserver(function(mutations){

   MutationObserver で監視対象に変化があったときの動作を設定しています。mutations から取り出した mutation が監視対象の状態です。

4. var strClass = mutation.target.className;

   className で mutation からclassを取り出して、

   if(strClass.search(/sent/g) > 0){

   search(/sent/g) で文字列を検出。class に sent と言う文字列が付いたら、

   dataLayer.push({'event':'gtm_trigger'});

   GTMのイベントデータ dataLayer に event として gtm_trigger ※ を入れます。これをGTMのトリガーのカスタムイベントで検出します。

5. objObserver.observe(strHTML,aryConfig);

   最後に strHTML を aryConfig の設定で監視して、objObserver を発動するよ、と言う設定。

トリガー2：カスタムイベント

ここで、カスタムHTMLで dataLayer に入れたイベントを検出し、トリガーとします。

タグ2：Google アナリティクス: GA4 イベント

※2で設定したトリガーをGA4のイベントとして送り出します。