【GA4対応】Google Tag Managerでフォームのコンバージョンイベント取得（MW WP Formの例） #GoogleAnalytics

Google analyticsが新しくアップデートされ、UIから何から変わりました。
正式には、Google Analytics 4（GA4）という名称とのこと。
Google Tag Manager（GTM）でも、これまでのアナリティクスようのタグとは別に、GA4用のタグが用意されています。

前提条件

GA4基準に、フォームのコンバージョンイベントをタグマネを使って取得する方法をまとめます。
ページのURLが変わらず、フォームのClassでコンバージョンを取得するパターンを想定し、
WordpressのプラグインMW WP Formでページ遷移しないフォームを例にしています。

また、すでにGA4のAnaryticsのタグ設定は、GTMで設定されている想定です。

変数の準備

MW WP Formの場合、確認画面、完了画面において、フォームにクラスが追加されます。
そのため、現在どのクラスが追加されているかを取得するための変数を作成します。

function(){
  //IDを指定して対象のフォームを設定
  //mw_wp_form_mw-wp-form-10の部分は対象のフォームのIDに置き換える
  var element = document.getElementById('mw_wp_form_mw-wp-form-10');
  if( element.classList.contains('mw_wp_form_confirm') == true ){
    return 'confirm';//確認画面の場合、confirmを返す
  } else if ( element.classList.contains('mw_wp_form_complete') == true ){
    return 'complete';//完了画面の場合、completeを返す
  } else {
    return 'input';//それ以外は、inputを返す
  }
}

実際の例

この変数は、確認画面の場合confirmを、完了画面の場合completeを、それ以外はinputを返します。

タグとトリガーの作成

変数が準備できたらタグを作成していきます。
まずは確認画面のタグから作成します。
新しくタグを作成し、タグの種類として「Google アナリティクス: GA4 イベント」を選択します。

設定タグに対象のGA4のアナリティクスを設定、イベント名に任意の名前を入力します。
このイベント名は、Analyticsで表示されるイベント名となります。

続いて配信トリガーをクリックし、トリガーを追加します。
トリガーのタイプをページビュー-DOM ready、
トリガーの発生場所を一部のDOM Readyイベントを選択、
そして条件に、先ほど作成した変数を追加、等しいを選び、confirmを入力します。

これで確認画面は完了です。トリガー、タグを保存して閉じます。

同様に、完了画面も設定します。
変数は共通のものを使いますが、タグとトリガーは新しく作る必要があります。
（先に作った確認画面のタグ・トリガーをコピーして作ると楽です）

トリガーの条件は、completeと入力します。

タグのイベント名も、わかりやすいものに変えます。

GTMのプレビューでサイトを開き、タグの発火を確認したら公開します。
公開後、フォームを操作してテストし、Analyticsでイベントが表示されるのが確認できれば成功です！

Analyticsの設定

あとは後日、Analytics側でイベントをコンバージョンとしてマークしておけば、効果測定も可能です。