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

This feature is part of an open beta. Keep in mind that the feature is subject to change.

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

總覽

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

事前準備

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

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

 操作說明

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

Identify CSS selectors for user-provided data fields

To identify the CSS selectors to input into the fields, complete these steps for each field. If you already have unhashed variables in your code, you can select those instead of creating new CSS variables.

Note: If you’re using JavaScript variables, it’s likely easiest to ask your developer which variables should be added to these fields. If you’re using CSS Selectors, you can follow the steps below.

1. Open a Google Chrome browser window.
2. Go to your website, but keep Google Tag Manager open.
3. Identify the customer data you want to send to Google Analytics. For example, if you want to send an email address, identify where the email address is present on the page.
4. Right click the field and select Inspect. For example, if you are trying to capture an email address, make sure you are right clicking the email address.
5. On the Chrome Developer Tools page, you will see a portion of the code highlighted. This code is the page element where you need to extract CSS Selectors for the customer data.
6. Hover your mouse over the highlighted code and right-click it.
7. Scroll down to "Copy", then select Copy Selector.
8. Paste the copied text in the corresponding field in Google Analytics or Tag Manager.
   • The copied text should look something like the following:

     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.