WordPressのフォーム系プラグインにSnow Mokey Forms (※以後 SMF) というプラグインがある。

Snow Monkey Forms – WordPress プラグイン | WordPress.org 日本語

これは開発終了した人気フォーム系プラグインMW WP Formの作者が後継として開発しているプラグイン。

フォーム系プラグインではContact Form 7もポピュラーだが、標準で確認・完了画面が存在しないためか日本では敬遠されがち😓。

SMFはMW WP Formの知見を元に最適化されていてかなり使いやすい。ただ、入力＞確認＞完了の処理プロセスがAjax処理されておりURLが変化しないため、GA4のPageViewベースでの実績把握が難しいという課題がある。

これをSMFのDOMイベントを使ってWordpress側には手を入れずGTMだけで対応してみるメモ

⛳️ゴール

GA4のPave Viewベースで実績把握できるようにする
WordPress、GA4には手を入れずGTMだけで対応する

🎯対応方針

SMFのDOMイベントでDataLayerを制御する
DataLayerを元にGA4の page_viewイベントを記録する

※2022年に追加されたGA4の拡張計測機能イベントのform_start、form_submitは適用条件に確証が持てないため無視😓

参考: 拡張計測機能イベント – アナリティクスヘルプ

検証環境でイベント挙動を確認した範囲ではform_startは発火するが、form_submitが発火してないっぽい😭

ということで、以下対応手順

📝1. DataLayerの制御タグ

SMFのDOMイベントでDataLayerを制御するJSを設定するためのGTMタグを作成。SMFのDOMイベントは「Snow Monkey Forms v0.7.0 をリリースしました – Snow Monkey」を参照。

今回の計測対象イベントは「確認、完了、システムエラー」のみ

GTMタグ = 🔖Smf@EventDispatcher
Type = カスタムHTML

HTML

設定する変数はvirtual_path (仮想URL)、form_step (ステップ名) の２種類 (念の為smfでカプセル化)

<script>
(function() {
  var form = document.querySelector('.snow-monkey-form');
  if (!form) return;

  var sendVpv = function(path, stepName) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'vpv_fire',        // GTMのトリガー用
      'smf': {
        'virtual_path': path,      // 仮想URL
        'form_step': stepName      // ステップ名
      }
    });
  };

  form.addEventListener('smf.confirm', function() {
    sendVpv('/contact/confirm/', '確認');
  }, false);

  form.addEventListener('smf.complete', function() {
    sendVpv('/contact/thanks/', '完了');
  }, false);

  form.addEventListener('smf.systemerror', function() {
    sendVpv('/contact/systemerror/', 'システムエラー');
  }, false);
})();
</script>

📝2. DataLayer制御タグの発動トリガー

(1) のGTMタグに設定するトリガーを作成。

GTMトリガー = 🎯Smf@OnPageContact
Type = DOM Ready
- タイプはページビューや初期化などの早いタイミングだとフォームDOM展開前に発火してリスナー登録エラーになる可能性があるのでウインドウの読み込み、DOM Readyあたりが安全。
発火条件 = {{Page Path}} / 含む / %フォームSlug%
- 全ページ対象でも良いけど、問い合わせページだけで発火するようにしておく (※環境に応じて設定)

📝3. DataLayer変数

（１）で定義した仮想URL、ステップ名のDataLayer変数を管理するためのGTM変数を設定。

🔢DLV#Smf@virtual_path
変数名 = smf.virtual_path
DataLayer Ver = 2

🔢DLV#Smf@form_step
変数名 = smf.form_step
DataLayer Ver = 2

📝4. DataLayer変数のGA4送信タグ

続いて（１）の処理で変更されたDataLayer変数（３）をGA4に送信するGTMタグを設定。

GTMタグ = 🔖Smf@EventSender
Type = GA4イベント
計測ID = %連携GA4のID%
Event Name = page_view
Event Parameter
- page_location / https://{{Page Hostname}}{{🔢DLV#Smf@virtual_path}}
- page_title / %フォームページタイトル% - {{🔢DLV#Smf@form_step}}
  - フォームページタイトルはGA4側でのページ名フィルタ要件を踏まえて適当に調整

📝5. DataLayer変数のGA4送信タグの発動トリガー

(4) のGTMタグに設定するトリガーを作成。

GTMトリガー = 🎯Smf@OnVpvChanged
Type = カスタムイベント
発火条件 = すべて
- ⚠️Cookie Compliance設定をしている場合は、Statics系同意がない場合に発火を止める条件追加が必要。

📝6. 動作確認 (GTM)

GTMのプレビューモードで対象フォームページを操作して、イベント、送信変数が期待する動作をしているか確認して問題なければGTM公開。その後GA4のPave Viewで期待する結果で記録されているか確認して完了。

ex. 確認画面表示時のタグ詳細

イベント名 = vpv_fire
配信タグ = 🔖Smf@EventSender
イベント名 = page_view
eventSettingsTable

[
  {
    parameter: "page_location",
    parameterValue: "%yourDomain%/contact/confirm/"
  },
  {parameter: "page_title", parameterValue: "INQ - 確認"}
]

📝オマケ. GA4でイベントとして表示する

GA4側でイベントとして処理したい場合は、GA4 / 管理 / プロパティ設定 / データの表示 / イベントでカスタムイベントを追加すればOK。

設定例 (問合せ完了)

最近の投稿

アーカイブ

カテゴリー

最近のコメント

タグ