フォームの三段計測（view/start/submit）と二重計測の回避術【採用サイト×GA4】

採用サイトのCV改善は、フォームのどこで詰まっているかを把握することから始まります。本稿は、表示（view）→開始（start）→送信（submit）の三段で計測し、重複送信や二重計測を避けるための実装テンプレをまとめた“実務ガイド”です。

前提｜GA4の標準と推奨イベントを正しく使う

• Enhanced MeasurementをONにすると、GA4は自動でform_start（初回入力）とform_submit（送信）を収集します。フォームの種類によっては拾えない場合があるため、後述のGTM補強を併用します。
• “応募完了”はGA4の推奨イベントgenerate_leadを使うと、将来のレポート連携で有利です。
• 検証はDebugViewでリアルタイム確認が最短です。

三段計測の設計（view / start / submit）

1. form_view（命名自由）… 応募ページ到達で発火（ページビューと同時）
2. form_start … 入力開始時。Enhanced Measurementが拾えないケースはGTMで補強。
3. generate_lead … 送信成功時（Thanks到達 or 成功コールバック）。推奨イベント名。

この三段で「到達率→開始率→完了率→エラー率」が分解でき、入力摩擦の特定が容易になります。

Step 1｜form_view を送る（ページ到達）

応募ページに到達したら、form_viewを1回だけ送信します（命名は任意）。GTMのPage Viewトリガー（URL一致）で実装します。

// GTM: GA4 Event
event_name: form_view
params: {
  form_id: 'apply_main',
  job_id: '{{DLV - job_id}}'
}

Step 2｜form_start を確実に取る（Enhanced Measurement＋GTM補強）

Enhanced Measurementのform_startは「そのセッションで初めてフォームに触れた瞬間」に自動送信されます。拾えないケース（カスタムUI、SPA、iframe、AJAX強依存など）は、GTMで「フォーカス or 入力」をトリガーに補強します。

GTM補強（例：入力要素へのフォーカスで1回だけ）

// 1) Custom HTML (once) - adds a focus listener and pushes to dataLayer
<script>
(function(){
  if (window.__formStartFired) return;
  document.addEventListener('focusin', function(e){
    var el = e.target;
    if (!el.closest || !el.closest('form')) return;
    if (window.__formStartFired) return;
    window.__formStartFired = true;
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'form_started',
      form_id: 'apply_main'
    });
  });
})();
</script>

// 2) GTM: Custom Event trigger = form_started
// 3) GA4 Event tag
event_name: form_start
params: { form_id: 'apply_main' }

まずは自動（Enhanced Measurement）を活かし、足りない場合だけ最小限の補強で安定化させましょう。

Step 3｜送信（submit）は generate_lead 推奨＋二重計測を防ぐ

送信成功時はgenerate_leadを1回だけ発火させます。Thanksページに遷移するタイプならURL一致で送るのが簡単です。AJAX送信なら“成功コールバック”で dataLayer.push() → GTMカスタムイベントで送ります。

Thanksページ方式

// GTM Trigger: Page View (Some Pages) - Page URL equals https://example.com/thanks
// GA4 Event
event_name: generate_lead
params: {
  form_id: 'apply_main',
  job_id: '{{DLV - job_id}}',
  medium: '{{UTM Medium}}'
}

AJAX成功コールバック方式

// in your form submit success callback:
dataLayer.push({
  event: 'lead_submitted',
  form_id: 'apply_main',
  job_id: window.__JOB_ID || ''
});

// GTM: Custom Event trigger = lead_submitted
// GA4 Event: generate_lead (params as above)

二重計測の代表的な原因と回避

• Thanks再訪（ブックマーク/戻る→再読込）→ 1回限りフラグを使う（sessionStorage）

// on thanks page
if (!sessionStorage.getItem('lead_sent')) {
  sessionStorage.setItem('lead_sent','1');
  // fire generate_lead
}

• 自動の form_submit と手動 generate_lead の重複 → 分析は generate_lead をCV（Key event）に統一、form_submitは補助指標に。
• 複数タグの同時発火 → GTMでタグシーケンス/除外トリガーを設定

GTMでのフォーム計測“詰まり”対策（標準→応用）

ブラウザの“標準 submit”イベントを使わないフォーム（AJAX/SPAなど）は、GTMのForm Submissionトリガーだけでは反応しないことがあります。その場合は、クリックやカスタムイベント、DOM監視など別手段を取ります。

• Buttonクリック→成功時のみdataLayerを押す
• XHR/fetchの完了フック→dataLayerを押す
• アプリ側で“共通push関数”を用意（トラッキング安定）

DebugViewで“現場検証”→Key event化

1. 自分のブラウザをデバッグモードにして、form_view → form_start → generate_leadの順で到着するかを確認。
2. 問題なければ管理画面でKey eventに指定（旧：コンバージョン）。名称変更の背景は押さえておくと関係者説明が楽です。

探索レポの雛形（歩留まり＆媒体比較）

探索（ファネル）で以下のステップを作成します。

1. Step1：form_view
2. Step2：form_start
3. Step3：generate_lead

ディメンションに session_source/medium と page_location を入れれば、媒体別の歩留まりや職種ページ別の差が一目で分かります。

実装チェックリスト（現場用）

• Enhanced Measurement：ON（form_start/form_submitが入るか確認）
• 応募完了イベント：generate_leadで統一（Thanks or AJAX成功）
• Thanks重複防止：sessionStorage等で一回限り
• GTM補強：フォーカス/入力開始でform_startを1回だけ
• DebugView検証：順序・パラメータ・回数を目視確認
• Key event化：generate_lead（＋必要ならtel/LINEクリック）を登録

まとめ｜“正しく1回だけ”を徹底する

採用の意思決定を速くするには、フォームの歩留まりがクリアに見えていることが必須です。GA4の自動計測をベースに、GTMで最小限の補強を加え、view → start → submitの三段を“正しく1回だけ”計測する設計にしておきましょう。

次は、tel/LINE/外部遷移のクリック計測と、媒体別応募率・CPOレポートをセットで進めると、運用の解像度が一気に上がります。