[GA4] 進行手動設定 (代碼管理工具)

這項功能屬於公開測試版功能，可能會有變動。

以下操作說明可協助管理員和編輯者找出使用者在網站上提供的資料，然後輸入到 Google 代碼管理工具。

總覽

我們建議您對收集使用者提供資料的所有頁面更新程式碼，例如註冊、待開發客戶產生、結帳頁面或類似頁面。您可以在一個工作階段中多次傳送資料，確保資料能傳送至 Analytics。

事前準備

這些操作說明假設您已具備下列條件：

• 可存取網站的代碼管理工具容器
• 已啟用「收集使用者提供的資料」功能，並允許納入使用者提供的資料
• 在代碼管理工具容器中，設定 Google Analytics：GA4 事件代碼

 操作說明

1. 登入 Google 代碼管理工具。
2. 在「工作區」分頁中，按一下左側的「代碼」。
3. 開啟用來收集顧客數位資料的「Google Analytics：GA4 事件」代碼。
4. 展開「事件參數」部分，然後點選「新增參數」。
5. 在「事件參數」欄位中輸入 user_data。
6. 在「值」欄位中，選取或建立「使用者提供的資料」變數。
7. 在「使用者提供的資料」變數中，選取「手動設定」。
   
8. 展開每個欄位的下拉式選單，然後選取所需變數。
9. 如果您要建立資料欄位的變數，請完成下列步驟：
   1. 依序按一下「變數設定」>「DOM 元素」。
   2. 在頂端輸入變數名稱。
   3. 在「選取方式」欄位中，點選「CSS 選取器」。
   4. 在「元素選取器」欄位中，輸入參照顧客數位資料的 CSS 選取器。瞭解如何找出使用者提供資料欄位的 CSS 選取器。
   5. 將「屬性名稱」欄位留空。
   6. 略過「格式值」欄位，以免發生設定問題。
   7. 儲存「DOM 元素」變數。
   8. 對每個資料收集欄位重複執行上述步驟。
10. 在「使用者提供的資料」變數中，略過「格式值」欄位。
11. 儲存事件代碼。
12. 按一下右上方的「提交」，發布變更。

找出使用者提供資料欄位的 CSS 選取器

請分別為各個欄位完成下列步驟，找出要輸入欄位的 CSS 選取器。若程式碼中有未經雜湊處理的變數，您可以選取這些變數，不需要建立新的 CSS 變數。若想進一步瞭解需要設定的欄位，請參閱這篇文章。

注意：如果您使用 JavaScript 變數，最簡單的方法可能是直接向開發人員確認該將哪些變數加進這些欄位。若您使用 CSS 選取器，請按照下方步驟操作。

1. 開啟 Google Chrome 瀏覽器視窗。
2. 前往您的網站 (讓 Google 代碼管理工具保持開啟)。
3. 找出要傳送至 Google Analytics 的顧客數位資料。舉例來說，如果要傳送電子郵件地址，請找出網頁上顯示電子郵件地址的位置。
4. 對著欄位按一下滑鼠右鍵，然後選取「檢查」。假設您要擷取電子郵件地址，請務必對電子郵件地址按一下滑鼠右鍵。
5. Chrome 開發人員工具頁面會醒目顯示部分程式碼，也就是網頁元素，您需要從中擷取顧客數位資料的 CSS 選取器。
6. 將滑鼠游標懸停在醒目顯示的程式碼上，然後按一下滑鼠右鍵。
7. 向下捲動至「複製」，然後選擇「複製 selector」。
8. 將複製文字貼進 Google Analytics 或代碼管理工具中的對應欄位。
   • 複製文字看起來像這樣：

     tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail

Next steps

Validate that user-provided data collection is set up correctly. Show me how.