サポートに連絡

メールでご返信します。通常は2日以内です。

不正利用を防ぐため、Google reCAPTCHA がこの送信を確認します。その際データが Google に送られます。スクリプトはこのフォームを開いたときにだけ読み込まれます。

← すべての記事

ボタンのクリックではなくフォームの成功を測る

· Lukas Wojcik

送信ボタンのクリック、フォーム送信、処理の完了は、それぞれ異なるイベントです。クリック後に入力検証エラー、リクエスト失敗、サーバーによる拒否が起きることもあります。Stats4U には自動の連絡カテゴリ、タグ付き送信、明示的なフォーム成功イベントがあります。選択によって、レポートが実際に表す内容が変わります。

123
  1. 送信
  2. アプリケーションの結果
  3. 成功イベント

必要な測定だけを有効にする

  1. 自分のカウンター から所有カウンターを開き、ダッシュボードとツール、問い合わせアクション の順に開きます。
  2. 計測設定 で、クリックカテゴリには 電話、メール、ダウンロードのクリックを自動で集計、タグ付き送信と確認済み成功には マークを付けたフォームの送信と、確認済みのフォーム処理の成功を集計 を有効にします。
  3. 保存 を選び、サイトが生成された JavaScript 連携を使っていることを確認します。

自動の連絡カテゴリには、contact-email、contact-phone、download などのアクション名があります。これらが表すのはクリックであり、メール配信、通話応答、ダウンロード完了ではありません。イベントはアドレス、電話番号、フォーム項目の内容を送信しません。

フォーム送信にタグを付ける

フォーム要素に、安定した個人情報を含まないフォーム名を追加します。名前は訪問者の識別ではなく、用途を表すものにします。次の例では問い合わせフォームにタグを付けています。

<form data-s4u-form="contact">
  <!-- Existing form controls and submission handling -->
</form>

このマーカーは、ブラウザーがフォームを送信すると form-submitted-contact を生成します。サーバーが受け入れたり処理したりした証拠にはなりません。既存の入力検証と処理コードは保ちます。測定用マーカーを追加しても、フォーム処理が実装されるわけではありません。

実際の成功時点で成功を通知する

独自フォームでは、アプリケーションが処理の成功を確認してから成功関数を呼び出します。HTTP 応答の到着、ボタンのクリック、fetch の Promise の解決だけでは不十分です。アプリケーション自身がサーバー応答とエラー状態を解釈する必要があります。

if (window.s4u && typeof window.s4u.formSuccess === 'function') {
  window.s4u.formSuccess('contact');
}

フォーム測定が有効でトラッカーが利用可能なら、この呼び出しは form-success-contact を生成します。既存の成功確認済み分岐に配置し、リクエスト前や無条件の完了処理には置かないようにします。Contact Form 7 では対応するメール送信成功イベントの連携を使えます。一般のフォームには、アプリケーションからの明示的な成功信号が必要です。

成功と失敗の両方を確認する

  1. 所有しているテスト環境で、有効な送信とアプリケーションに拒否される送信を試します。成功イベントを送るのは、成功が確認された場合だけにします。
  2. 計測デバッガー を使い、実際のイベントを数えずに、想定したイベントカテゴリと名前が受け入れられるか確認します。
  3. レポートに現れたイベント名を比較します。送信数が成功数より多いことは有用な手掛かりになりますが、特定のエラーの証明ではありません。

デバッガーは受け入れ条件を確認するもので、実際のフォームが正常に届いたかを確認するものではありません。アプリケーションの応答と通常の追跡リクエストは別々に調べます。イベントラベルと診断プロパティに氏名やフォーム内容を入れないようにします。

次の手順

アプリケーションに成功呼び出しを追加する前に、連携ガイドを確認します。

設置ガイドを開く
広告