[GA4] 设置手动配置（跟踪代码管理器）

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

这些说明适用于符合以下条件的管理员和编辑者：想要在其网站上标识用户提供的数据，并将数据输入到 Google 跟踪代码管理器。

概览

您应更新您收集用户提供的数据的任何页面（例如注册页面、潜在客户发掘页面、结账页或类似页面）上的代码。您可以在一次会话中多次发送数据，以确保数据发送到 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.