LoginSignup
0

More than 1 year has passed since last update.

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

今回実装した内容

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

全体像

スクリーンショット 2021-04-17 18.28.11.png

トリガー: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へイベントデータを送信しています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0