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

此功能目前处于公开 Beta 版阶段，随时可能发生变化。

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

概览

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