【GTM】onchangeイベントをトリガーに、GA4にデータを送信する方法

今回実装した内容

GTMの設定のみで、onchangeイベントをトリガーに、GA4へイベントデータとしてid属性の値を送信する方法を記載しています。

全体像

トリガー：gtm.js

• トリガータイプ：カスタムイベント
• イベント名：gtm.js
• このトリガーの発生場所：すべてのカスタムイベント
• このトリガーへの参照：onchange listener

補足

イベント名によって発火タイミングが変わる

イベント名	発火タイミング
gtm.js	ページビュー(Container Loaded)
gtm.dom	DOM Ready(DOM Ready)
gtm.load	ウィンドウの読み込み(Window Loaded)

タグ：onchange listener

• タグの種類：カスタムHTML
• HTML

<script>
  if (document.addEventListener) {
    document.addEventListener('change', {{generic event handler}}, false);
    document.addEventListener('change', {{get id handler}}, false);
    document.addEventListener('change', {{selected form value}}, false);
  } else if (document.attachEvent) {
    document.attachEvent('onchange', {{generic event handler}});
    document.attachEvent('onchange', {{get id handler}});
    document.attachEvent('onchange', {{selected form value}});
  }
</script>

• 配信トリガー：gtm.js

補足

GTMには、onchangeをトリガーにできるトリガータイプがありません。
ページビューのタイミングで上記処理を書き込むことで、onchangeイベントを拾えるようにしています。

変数：get id handler

• 変数のタイプ：カスタムJavaScript
• カスタムJavaScript

function(e) {
    return event.target.id;
}

• この変数への参照：onchange listener、form select tag

補足

特になし。
単純に、id属性の値を取得しているだけ。

変数：selected form value

• 変数のタイプ：カスタムJavaScript
• カスタムJavaScript

function(e) {
  var tag = event.target.tagName;
  if (tag == 'INPUT' || tag == 'TEXTAREA') {
    return 'input_done';
  } else {
    return event.target.value; 
  }
}

この変数への参照：onchange listener、form select tag

補足

• <input>、<textarea>の場合は、個人情報を含む可能性もあるため、一律で"input_done"という文字列を飛ばすように設定しています。

変数：generic event handler

• 変数のタイプ：カスタムJavaScript
• カスタムJavaScript

function() {
  return function(e) {
    window.dataLayer.push({
      'event': 'form_select',
      eventModel: {value: e.target.id, send_to: '{{ 計測ID }}'},
    });
  }
}

• この変数への参照：onchange lister

補足

• "form_select"というイベント名で設定しているトリガーを起動させています。

トリガー：form select trigger

• トリガーのタイプ：カスタムイベント
• イベント名：form_select
• このトリガーの発生場所：すべてのカスタムイベント
• このトリガーへの参照：form select tag

補足

• 特になし。

タグ：form select tag

• タグの種類：Googleアナリティクス:GA4イベント
• 設定タグ：GoogleAnalytics
• イベント名：form_select
• イベントパラメータ：
  • パラメータ名：{{get id handler}}
  • 値：{{selected form value}}
• 配信トリガー：form select trigger

補足

• 今までの処理で取得した値をもとに、このタグでGA4へイベントデータを送信しています。