Google アナリティクス 4 で自動入力の動作をトラッキングする

1. はじめに

この Codelab では、Google アナリティクス 4（GA4）を使用してウェブフォームでの自動入力の動作をトラッキングする方法について説明します。これは、web.dev のフォームでのブラウザの自動入力の測定などの記事で説明されている、自動入力の測定のコンセプトと動機に基づいています。

次の方法を学習します。

JavaScript を実装して、自動入力によるフィールドの入力、手動による入力、両方の組み合わせによる入力など、自動入力の操作を検出します。
自動入力のステータスをトラッキングするカスタム GA4 イベントを定義します。
自動入力データをカスタムパラメータとして GA4 に送信します。
レポート用に GA4 でカスタムディメンションを設定します。
収集したデータを分析する方法を理解する。

この方法では、ユーザーが自動入力にどのくらいの頻度で依存しているか、どのフィールドが最も頻繁に自動入力されているかを把握し、フォームのユーザビリティに関する潜在的な問題を特定できます。これにより、ユーザーエクスペリエンスを改善してコンバージョンを増やす方法についての分析情報を得ることができます。

前提条件

HTML、CSS、JavaScript に関する基本的な知識。
ウェブサイトに Google アナリティクス 4 プロパティが設定されていること。
GA4 にイベントを送信するための gtag.js ライブラリの基本事項を理解していること。
トラッキングするフォームの HTML にアクセスできること。
Google アナリティクス 4 のレポートに関する基本的な知識。

学習内容

さまざまなユーザー操作のシナリオを考慮して、JavaScript を使用して自動入力の動作を検出する方法。
有意義なパラメータを含むカスタム GA4 イベントを作成する方法。
フォームやフィールドの識別子など、カスタムイベントパラメータを GA4 に送信する方法。
収集したデータを分析するために GA4 でカスタムディメンションを設定する方法。

必要なもの

テキストエディタまたは IDE。
デベロッパーツールを備えたウェブブラウザ。
ウェブサイトのコード。
Google アナリティクス 4 アカウント。

2. 自動入力検出ロジックを実装する

このステップでは、JavaScript コードをウェブページに追加します。このスクリプトは、フォームフィールドをモニタリングして、ブラウザの自動入力機能を使用して入力された場合と手動で入力された場合を検出します。

HTML フォームの構造例

まず、これから使用する HTML フォームの例を見てみましょう。重要な点は以下のとおりです。

フォーム自体に id（例: myForm）があり、理想的には data-form-id 属性（例: data-form-id="myForm"）があります。
トラッキングする各入力フィールドには、一意の id（id="name"、id="email" など）が必要です。

<form id="myForm" data-form-id="myForm" action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br>

    <label for="city">City:</label>
    <input type="text" id="city" name="city"><br>

    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip"><br>

    <button type="submit">Submit</button>
</form>

<devsite-script src="/path/to/your/static/js/autofill_tracker.js"></devsite-script>

自動入力トラッキング JavaScript

検出を行う JavaScript コードを次に示します。トラッキングを初期化し、指定されたフィールドの変更をリッスンし、自動入力のステータスを判断し、フォームの送信時に GA4 にイベントを送信します。

// autofill_tracker.js
const formId = 'myForm'; // Replace with your form's ID
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace with your field IDs

const autofillStatuses = {};

function initializeAutofillTracking() {
    const form = document.getElementById(formId);
    if (!form) {
        console.error(`Form with ID '${formId}' not found.`);
        return;
    }

    fieldsToTrack.forEach(fieldId => {
        const field = form.querySelector(`#${fieldId}`);
        if (!field) {
          console.warn(`Field with ID '${fieldId}' not found in the form.`);
          return;
        }

        autofillStatuses[fieldId] = 'EMPTY';
        field.addEventListener('change', (event) => {
            const fieldElement = event.target;
            if (fieldElement.matches(':autofill')) {
                if (autofillStatuses[fieldId] === 'EMPTY'){
                  autofillStatuses[fieldId] = 'AUTOFILLED';
                } else if(autofillStatuses[fieldId] === 'ONLY_MANUAL'){
                    autofillStatuses[fieldId] = 'ONLY_MANUAL_THEN_AUTOFILLED';
                } else if (autofillStatuses[fieldId] === 'AUTOFILLED_THEN_MODIFIED'){
                    // keep the status
                } else {
                    autofillStatuses[fieldId] = 'AUTOFILLED';
                }
            } else {
                if (autofillStatuses[fieldId] === 'AUTOFILLED'){
                    autofillStatuses[fieldId] = 'AUTOFILLED_THEN_MODIFIED';
                } else if (autofillStatuses[fieldId] === 'ONLY_MANUAL_THEN_AUTOFILLED') {
                  autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }else{
                    autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }
            }
        });
    });

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const formElement = event.target;
      const formId = formElement.dataset.formId;
      fieldsToTrack.forEach(fieldId => {
        gtag('event', 'autofill_form_interaction', {
          'form_id': formId,
          'field_id': fieldId,
          'autofill_status': autofillStatuses[fieldId]
        });
      });
      formElement.submit();
    });
}

document.addEventListener('DOMContentLoaded', initializeAutofillTracking);

構成（重要）

スクリプトが正しく動作する前に、JavaScript コード内の次の 2 行を変更する必要があります。

const formId = 'myForm'; // Replace 'myForm' with the actual ID of YOUR form.
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace these with the actual IDs of the input fields YOU want to track.

コードの説明:

form.dataset.formId: data-form-id 属性の値を取得して、formId パラメータとして使用します。
event.preventDefault(): デフォルトのフォーム送信を防止し、フォームを送信する前にイベントを送信できるようにします。
gtag('event', 'autofill_form_interaction', ...): 次のパラメータを含むカスタムイベントを送信します。
form_id: フォームの ID。
field_id: フィールドの ID。
autofill_status: フィールドの現在の自動入力ステータス。
form.submit(): イベントを GA4 に送信した後、フォームを送信します。
document.addEventListener('DOMContentLoaded', ...): ページの HTML 構造が完全に読み込まれた後にのみスクリプトが実行されるようにします。これにより、まだ存在しない要素を見つけようとしてエラーが発生することを防ぎます。

3. テスト

ブラウザでフォームを送信します。
GA4 のリアルタイム レポートまたは DebugView レポートを使用して、autofill_form_interaction イベントが送信されていることを確認します。
イベントパラメータ（form_id、field_id、autofill_status など）が正しく入力されていることを確認します。

4. GA4 でカスタムディメンションを設定する

GA4 レポートで field_id パラメータと autofill_status パラメータを使用するには、カスタムディメンションを作成する必要があります。

GA4 プロパティに移動します。
[設定] > [カスタム定義] に移動します。
新しいカスタムディメンションを作成します。
- イベントパラメータ: field_id
- ディメンション名: Field ID
- スコープ: イベント
別のカスタムディメンションを作成します。
- イベントパラメータ: autofill_status
- ディメンション名: Autofill Status
- スコープ: イベント
3 つ目のカスタムディメンションを作成します。
- イベントパラメータ: form_id
- ディメンション名: Form ID
- スコープ: イベント

5. GA4 でデータを分析する

データを収集したら、GA4 レポートで分析できます。

[レポート] > [エンゲージメント] > [イベント] に移動します。
autofill_form_interaction イベントを選択します。
[セカンダリディメンション] プルダウンを使用して、カスタムディメンション（[フィールド ID]、[自動入力のステータス]、[フォーム ID] など）を選択します。[フィールド ID] を追加すると、どの特定のフォームフィールドが autofill_form_interaction イベントをトリガーしているかを確認できます。各フィールドがどのように入力されたかについてより詳細な分析情報を得るには、[フィールド ID] とともに [自動入力のステータス] を別のディメンションとして確認します。この組み合わせは、各フィールドのインタラクションタイプの分布を直接示します。
データ探索を作成して、データに関する分析情報をさらに取得します。次のようなさまざまな手法を使用できます。
- 自由形式: データを探索してカスタムの可視化を作成します。
- 表: データを表形式で表示します。
- 目標到達プロセス: フォームでのユーザージャーニーを分析します。ファネルデータ探索では、ユーザーが複数ステップのフォームをどのように進んでいるかを可視化できます。また、自動入力の動作（またはその欠如）が進行に影響している可能性があるステージをハイライト表示することもできます。

このデータで解決できる疑問の例:

最も頻繁に自動入力されるフィールドはどれですか？
ユーザーはどのくらいの頻度で自動入力を使用していますか？
ユーザーが手動で情報を入力する傾向がある特定のフィールドはありますか？
自動入力の動作は時間とともに変化しますか？
フォームによって自動入力の動作はどのように変わりますか？

6. その他の考慮事項

フォームの検証: フォームの検証が自動入力の検出に与える影響を検討します。検証に失敗すると、変更イベントが正しくトリガーされないことがあります。
動的フォーム: 動的フォームがある場合は、JavaScript コードでフィールドの数と ID の変更を処理できることを確認してください。フォームの変更を追跡するには、MutationObserver を使用する必要がある場合があります。
パフォーマンス: ページに JavaScript を追加しすぎないようにします。コードのパフォーマンスへの影響を必ずテストしてください。
ユーザーのプライバシー: データを収集する際は、ユーザーのプライバシーに配慮してください。適切な同意なしに機密情報を収集しないようにしてください。
イベントの上限: GA4 では、送信できるイベント数とパラメータ数に上限があります。それに応じて実装を計画します。
複数のフォーム: 同じページに複数のフォームがある場合は、すべてのフォームをトラッキングするようにコードを調整してください。formId セレクタとイベントリスナーは、各フォームに合わせて調整する必要があります。
アクセシビリティ: 実装が障がいのあるユーザーにも利用可能であることを確認します。
テスト: さまざまなブラウザやデバイスで実装を徹底的にテストし、期待どおりに動作することを確認します。

7. まとめ

やりました！JavaScript リスナーの設定から Google アナリティクス 4 でのカスタムディメンションの設定まで、手順を順調に進め、オートフィルトラッキングを完全にマスターしました。これで、収集したデータをフォーム上で本当に快適で効率的なユーザーエクスペリエンスに変換する準備が整いました。

貴重な分析情報が次々と届くようになります。ユーザーが各フィールドをどのように操作しているかを正確に把握し、フォームのどの部分で自動入力が最も効果的かを確認し、これまで見えなかった摩擦点を特定できます。この強力な知識を基に、的を絞ったスマートな調整を行い、ユーザージャーニーを効率化し、フォームの離脱を減らすことで、重要なコンバージョン率をさらに高めることができます。

ウェブフォームを継続的に最適化して改善する機能が、お客様の手元に届きました。これは単なる Codelab の完了ではなく、データドリブンデザインの刺激的な冒険の始まりです。ぜひ、新しい分析機能を活用して改善を試し、フォームを機能的なだけでなく、すべてのユーザーにとって素晴らしいものにしてください。今後ともよろしくお願いいたします。