使用 Google Analytics 4 追蹤自動填入行為

1. 簡介

本程式碼研究室會引導您使用 Google Analytics 4 (GA4) 追蹤網頁表單的自動填入行為。本文以 web.dev 上的「評估表單上的瀏覽器自動填入功能」等文章為基礎，探討評估自動填入功能的概念和動機。

內容如下：

• 導入 JavaScript，偵測自動填入互動，包括欄位是由自動填入功能填寫、手動填寫，或兩者混合填寫。
• 定義自訂 GA4 事件，追蹤自動填入狀態。
• 將自動填入資料以自訂參數的形式傳送至 GA4。
• 在 GA4 中設定自訂維度，用於報表。
• 瞭解如何分析收集到的資料。

這種做法可讓您瞭解使用者多常依賴自動填入功能、最常自動填入哪些欄位，以及找出表單可用性的潛在問題。有助於您瞭解如何改善使用者體驗及提高轉換率。

必要條件

• 具備 HTML、CSS 和 JavaScript 的基本知識。
• 在網站上設定 Google Analytics 4 資源。
• 熟悉 gtag.js 程式庫，可將事件傳送至 GA4。
• 存取要追蹤的表單 HTML。
• 基本瞭解 Google Analytics 4 報表。

課程內容

• 如何使用 JavaScript 偵測自動填入行為，並考量不同的使用者互動情境。
• 如何建立含有有意義參數的自訂 GA4 事件。
• 如何將自訂事件參數 (包括表單和欄位 ID) 傳送至 GA4。
• 如何在 GA4 中設定自訂維度，以分析收集到的資料。

軟硬體需求

• 文字編輯器或 IDE。
• 具備開發人員工具的網路瀏覽器。
• 網站程式碼。
• 您的 Google Analytics 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 程式碼中的這兩行：

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.

敬請採取行動：如未更新 formId 和 fieldsToTrack，使其與特定 HTML 表單和欄位 ID 相符，追蹤指令碼將找不到表單元素，且不會有任何資料傳送至 Google Analytics。

最佳做法：使用 data-form-id：提供的指令碼會優先使用表單中的 data-form-id 屬性 (如有)，將 form_id 參數傳送至 GA4。相較於只依賴 id 屬性，這種做法通常更可靠，特別是當您追蹤多個表單，或使用可能會操控元素 ID 的架構時。確認 data-form-id 已在 上設定

標記。

程式碼說明：

• 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. 測試

• 在瀏覽器中提交表單。
• 在 Google Analytics 4 中使用「即時」或「DebugView」報表，確認 autofill_form_interaction 事件是否已傳送。
• 確認事件參數是否正確填入 (例如 form_id、field_id、autofill_status)。

測試專業提示：在 GA4 中使用 DebugView (位於「設定」>「DebugView」下方)，詳細驗證即時事件和參數。在測試期間，這份報表提供的資訊比標準即時報表更即時且更精細。

必須完全相符：建立自訂維度時，請確保您在 GA4 中輸入的「事件參數」名稱 (例如 field_id) 完全符合 JavaScript 程式碼中 gtag('event', ...) 呼叫所用的參數鍵，包括底線和大小寫。

4. 在 GA4 中設定自訂維度

如要在 GA4 報表中使用 field_id 和 autofill_status 參數，請建立自訂維度：

1. 前往 GA4 資源。
2. 依序前往「設定」>「自訂定義」。
3. 建立新的自訂維度：
   • 事件參數： field_id
   • 維度名稱： Field ID
   • 範圍：事件
4. 建立另一個自訂維度：
   • 事件參數： autofill_status
   • 維度名稱： Autofill Status
   • 範圍：事件
5. 建立第三個自訂維度：
   • 事件參數： form_id
   • 維度名稱： Form ID
   • 範圍：事件

重要處理延遲：Google Analytics 最多可能需要 48 小時，才能處理新建立的自訂維度。建立後，您無法立即在報表中查看或使用這些屬性。請據此規劃，稍後再回來查看。

5. 在 GA4 中分析資料

收集資料後，您可以在 GA4 報表中進行分析：

1. 依序前往「報表」>「參與度」>「事件」。
2. 選取autofill_form_interaction活動。
3. 使用「次要維度」下拉式選單選取自訂維度 (例如「欄位 ID」、「自動填入狀態」、「表單 ID」)。新增「欄位 ID」可顯示觸發 autofill_form_interaction 事件的特定表單欄位。如要深入瞭解每個欄位的填寫方式，您可以同時查看「欄位 ID」和「自動填入狀態」這兩個維度。這項組合會直接顯示各個欄位的互動類型分布情形。
4. 建立探索，進一步瞭解資料。你可以使用不同技術，例如：
   • 任意形式：探索資料並建立自訂圖表。
   • 表格：以表格格式查看資料。
   • 程序：分析使用者填寫表單的歷程。漏斗探索可協助您以視覺化方式呈現使用者填寫多步驟表單的進度，並醒目顯示自動填入行為 (或未自動填入) 對進度的影響。
   

發掘更深入的洞察資料：雖然標準事件報表很有用，但建議您搭配使用 GA4 探索 (任意形式、漏斗探索等)、「欄位 ID」和「自動填入狀態」自訂維度，更彈性地深入分析使用者自動填入行為。

可透過這項資料解答的問題範例：

• 哪些欄位最常自動填入？
• 使用者多常使用自動填入功能？
• 使用者是否傾向手動填寫特定欄位中的資訊？
• 自動填入行為會隨時間改變嗎？
• 自動填入行為會因表單而異嗎？

6. 其他注意事項

• 表單驗證：請考量表單驗證對自動填寫偵測的影響。如果驗證失敗，系統可能無法正確觸發變更事件。
• 動態表單：如果您使用動態表單，請確認 JavaScript 程式碼可以處理欄位數量和 ID 的變更。您可能需要使用 MutationObserver 追蹤表單中的變更。
• 效能：避免在網頁中加入過多 JavaScript。請務必測試程式碼，確認對效能的影響。
• 使用者隱私權：收集資料時，請注意使用者隱私權。請勿在未經適當同意的情況下收集私密資訊。
• 事件限制：GA4 對可傳送的事件和參數數量設有限制。請據此規劃實作作業。
• 多個表單：如果同一個網頁有多個表單，請務必調整程式碼，追蹤所有表單。您需要為每個表單調整 formId 選擇器和事件監聽器。
• 無障礙設計：確保身心障礙使用者也能存取導入內容。
• 測試：在不同瀏覽器和裝置上徹底測試導入作業，確保運作正常。

7. 結語

你成功了！從設定 JavaScript 監聽器，到在 Google Analytics 4 中設定這些自訂維度，您已成功完成所有步驟，真正掌握自動填入追蹤功能。您現在已具備所有必要知識，可將收集到的資料轉換為表單上真正令人愉悅且有效率的使用者體驗。

準備好迎接源源不絕的實用洞察資訊吧！您將能準確掌握使用者與各個欄位的互動情形，瞭解表單的哪些部分最適合自動填入功能，並找出先前可能未發現的隱藏摩擦點。掌握這項強大知識後，您就能進行精準的智慧調整、簡化使用者歷程、減少表單放棄率，並讓至關重要的轉換率進一步提升。

您現在可以持續最佳化及調整網路表單，這不僅是完成 Codelab，更是以資料驅動設計展開精彩冒險的起點。現在就開始運用全新的分析超能力，嘗試改善表單，讓表單不僅實用，還能為每位使用者帶來絕佳體驗。祝您最佳化愉快！