Google Floodlight 代码

本文面向希望将 Floodlight 代码从跟踪代码管理器网站容器移至服务器容器的开发者。

通过服务器端跟踪代码管理器，您可以将 Google Floodlight 销售和计数器代码从网页移至服务器。将这些代码移至服务器可减少要在网页中运行的代码，并且有助于缩短网页加载时间。

准备工作

在将代码移到服务器之前，请确保您已完成以下操作：

第 1 步：设置转化链接器代码

您的 Floodlight 账号只有在设置了转化链接器代码后，才能将转化数据发送到 Google 跟踪代码管理器。

如果您已在服务器容器中配置了转化链接器代码，则可以跳过此步骤。

若要设置转化链接器代码，请执行以下操作：

  1. 在您的服务器容器工作区中，打开页面左侧的代码菜单。
  2. 点击新建以添加新的代码。
  3. 选择转化链接器代码类型。
  4. 设置可触发转化链接器服务器端代码的触发器。
    在大多数情况下，所有网页触发器是最佳选项。
  5. 为代码命名，然后点击保存。 转化链接器代码详细信息

第 2 步：设置 Floodlight 代码

Google 跟踪代码管理器支持服务器容器中的 Floodlight 计数器代码和 Floodlight 销售代码。

Floodlight 计数器

若要设置 Floodlight 计数器代码，请执行以下操作：

  1. 在您的服务器容器工作区中，选择页面左侧的代码菜单。
  2. 点击新建以添加新的代码。

  3. 选择 Floodlight 计数器代码类型。

    “选择代码类型”对话框，其中突出显示了 Floodlight 计数器代码

  4. 若要收集代码配置所需的值，请再打开一个浏览器窗口，然后登录 Campaign Manager 360。点击广告客户，然后点击相应广告客户的名称。在新的跟踪代码管理器 Floodlight 计数器代码中，输入以下值：

    • 广告客户 ID：广告客户 ID 显示在广告客户详情页面上广告客户名称的正下方。该值也是生成的 Floodlight 代码段中 src= 的值。
    • 组代码字符串：在“活动”表格中，找出所需活动，并找到右侧列中所列的组代码字符串。它也是生成的 Floodlight 代码段中 type= 的值。
    • 活动代码字符串：在“活动”表格中，找出所需活动，并找到右侧列中所列的活动代码字符串。它也是生成的 Floodlight 代码段中 cat= 的值。

  5. 设置所需的统计方法：

    • 标准：统计每次转化。
    • 唯一：计算每个唯一身份用户在每 24 小时（美国东部时间午夜至次日午夜）内的首次转化。
    • 每次会话：将每位用户的每次会话计为一次转化。会话时长取决于部署 Floodlight 代码的网站。

  6. 打开选择触发器窗口。

  7. 在触发器配置菜单中，选择一个触发器。在大多数情况下，所有网页是最佳选项。

    “选择触发器”对话框，其中突出显示了“所有网页”触发器

  8. 输入代码名称，然后点击保存。

    一张屏幕截图，其中显示“Floodlight 计数器代码名称”字段已更改为“Floodlight 计数器代码”

Floodlight 销售

若要设置 Floodlight 销售代码，请执行以下操作：

  1. 在您的服务器容器工作区中，选择页面左侧的代码菜单。
  2. 点击新建以添加新的代码。

  3. 选择 Floodlight 销售代码类型。注意：Floodlight 销售代码会自动从相应的电子商务字段中收集以下值：

    *   Order ID (Transaction ID)
*   Revenue (Value)

  4. 若要收集代码配置所需的值，请再打开一个浏览器窗口，然后登录 Campaign Manager 360。点击广告客户，然后点击相应广告客户的名称。在新的跟踪代码管理器 Floodlight 计数器代码中，输入以下值：

    • 广告客户 ID：广告客户 ID 显示在广告客户详情页面上广告客户名称的正下方。该值也是生成的 Floodlight 代码段中 src= 的值。
    • 组代码字符串：在“活动”表格中，找出所需活动，并找到右侧列中所列的组代码字符串。它也是生成的 Floodlight 代码段中 type= 的值。
    • 活动代码字符串：在“活动”表格中，找出所需活动，并找到右侧列中所列的活动代码字符串。它也是生成的 Floodlight 代码段中 cat= 的值。

  5. 设置所需的统计方法：

    • 标准：统计每次转化。
    • 唯一：计算每个唯一身份用户在每 24 小时（美国东部时间午夜至次日午夜）内的首次转化。
    • 每次会话：将每位用户的每次会话计为一次转化。会话时长取决于部署 Floodlight 代码的网站。

  6. 打开选择触发器窗口。

  7. 在触发器配置菜单中，选择一个触发器。在大多数情况下，所有网页是最佳选项。

  8. 输入代码名称，然后点击保存。

可选：设置增强型转化

如果您未使用增强型转化，请直接跳到验证您的设置部分。

若要配置增强型转化，请按以下步骤操作。

设置用户提供的数据变量

在跟踪代码管理器中，您可以通过 3 种方式实现增强型转化功能。您只需选择其中一种方式，即可收集用户提供的数据。

自动收集 手动配置 代码配置
收集方法 根据您网站的代码自动收集用户提供的数据。

如果您需要控制收集输入数据的位置，请选择手动或代码设置。		 指定精选的 CSS 属性或 JavaScript 变量，以收集用户提供的数据。

如果您需要控制数据的格式设置和哈希处理，请选择代码配置。		 在您的网站上添加代码段，用于发送经过哈希处理的客户数据进行匹配。
利用这种方法，您可以在每次触发转化跟踪代码时发送格式一致的数据，从而最大限度地提高增强型转化衡量的准确性。
复杂性 简单 中等 复杂
技能 无需任何特殊技能 HTML 和 CSS Web 开发

自动收集

  1. 在您的网络容器中，打开变量菜单。
  2. 新建一个类型为用户提供的数据的用户定义的变量。
  3. 将类型设置为自动收集。
  4. 为变量命名，例如 My user-defined data。
  5. 点击保存。

手动配置

  1. 在您的网络容器中，打开变量菜单。
  2. 新建一个类型为用户提供的数据的用户定义的变量。
  3. 将类型设置为手动配置。

  4. 对于您希望通过增强型转化提供的相关用户数据字段，请添加新的或现有的变量。

  5. 若要指定 DOM 中的某个元素，请依次选择新建变量 > 变量配置 > DOM 元素进行创建。

  6. 在选择方法下，您可以使用 CSS 选择器或 ID。提示：如果您的 CSS 变量经常更改，请在网站上添加一个 HTML ID，并使用该 ID 变量。

  7. 输入 CSS 选择器或 ID 名称。您可以将“属性名称”字段留空。

  8. 为 DOM 元素变量命名并保存。然后，您的屏幕会返回用户提供的数据设置。

  9. 为用户提供的数据变量命名，例如 My user-defined data。

  10. 点击保存。

代码配置

第 1 步：确认并指定增强型转化变量

您可以发送未经过哈希处理的数据（Google 会在数据到达服务器之前对其进行哈希处理），也可以发送预先经过哈希处理的数据。如果您决定发送预先经过哈希处理的数据，请使用十六进制编码 SHA256 对数据进行编码。无论您做何选择，都请至少提供以下其中一个字段：email 或 phone_number。
如需将未经哈希处理的数据推送到数据层，请执行以下操作：

  1. 在您的网站上，以键值对的形式将用户提供的数据存储在 JavaScript 变量中。例如：

    var leadsUserData = {
  'email': 'name@example.com',
  'phone_number': '+11234567890',
  'address': {
    first_name: 'John',
    last_name: 'Doe',
    street: '123 Lemon',
    city: 'Some city',
    region: 'CA',
    country: 'US',
    postal_code: '12345',
  },
};

  2. 使用 dataLayer.push() 随事件一起发送用户数据。例如：

    <script>
  dataLayer.push({
    'event': 'formSubmitted',
    'leadsUserData': {
      'email': 'name@example.com',
      'phone_number': '+11234567890',
      'address': {
         first_name: 'John',
         last_name: 'Doe',
         street: '123 Lemon',
         city: 'Some city',
         region: 'CA',
         country: 'US',
        postal_code: '12345',
       },
     },
  });
<script>

变量 leadsUserData 现在可在 Google 跟踪代码管理器中使用。

如需将预先经过哈希处理的数据推送到数据层，请执行以下操作：

  1. 在您的网站上，使用十六进制编码 SHA256 对用户提供的数据进行哈希处理。编码后的数据的键必须以 sha256_ 开头。例如：

    {'sha256_email_address':await hashEmail(email.trim()),
}

  2. 使用 dataLayer.push() 随事件一起发送用户数据。以下示例展示了如何实现数据层，其中假设您自己编写了一个异步运行的哈希函数。

    <script>
  dataLayer.push({
    'event': 'formSubmitted',
    'leadsUserData': {
      'sha256_email_address': await hashEmail(email.trim()),
      'sha256_phone_number': await hashPhoneNumber(phoneNumber),
      'address': {
        sha265_first_name: await hashString(firstname),
        sha256_last_name: await hashString(lastname),
        sha256_street: await hashString(streetAddress),
        postal_code: '12345',
       },
     },
  });
<script>

变量 leadsUserData 现在可在 Google 跟踪代码管理器中使用。

第 2 步：创建用户提供的数据变量

  1. 在您的网络容器中，打开变量菜单。
  2. 新建一个类型为用户提供的数据的用户定义的变量。
  3. 将类型设置为代码。
  4. 对于您要提供的相关用户数据字段，请点击下拉菜单，然后选择新建变量。
  5. 在选择变量类型下，选择数据层变量。
  6. 在数据层变量中，引用存储的用户数据。例如 leadsUserData。
  7. 为数据层变量命名并保存。然后，您的屏幕会返回用户提供的数据设置。
  8. 为用户提供的数据变量命名，例如 My user-defined data。
  9. 点击保存。

为 Google 代码分配变量

  1. 在您的网络容器中，打开代码菜单。
  2. 修改您用于将数据发送到代码植入服务器的 Google 代码。
  3. 在配置设置下，添加名为 user_data 的新配置参数。将值设置为用户提供的数据变量，例如 {{My user-provided data}}。

  4. 保存您所做的更改。您的代码应如下所示：

    一张屏幕截图，其中显示了引用用户提供的数据变量的最终 Google 代码配置。

配置服务器端 Floodlight 代码

在服务器容器中，在 Floodlight 销售代码或 Floodlight 计数器代码中启用增强型转化。

  1. 选中包括用户提供的数据复选框。
    alt_text
  2. 按保存以保存您所做的更改。

可选：收入值

Floodlight 销售代码会将事件的 value 参数用作默认金额，以此计算收入。如需指定用于计算收入值的其他依据，您需要设置一个变量，以从数据库中提取数据并将其分配给您的 Floodlight 销售代码。

若要创建新变量，请执行以下操作：

  1. 在服务器容器中，打开变量菜单。
  2. 为数据输入创建一个用户定义的新变量。例如，如果您要使用 Firestore 数据库中的值，请创建一个 &lcub;&lcub;Firestore Lookup&rcub;&rcub; 变量。
  3. 为变量指定数据源。
  4. 为变量命名，例如“Profit lookup”，然后保存。

要在 Floodlight 销售代码中使用该变量，请执行以下操作：

  1. 在服务器容器中，打开代码菜单。
  2. 修改 Floodlight 销售代码。

  3. 在唯一参数部分执行以下操作：

    • 对于数据源，选择自定义配置。
    • 对于收入，选择您之前创建的变量。
    • 对于订单 ID，输入 ID 或使用变量动态填充订单 ID。

    使用收入值进行 Floodlight 销售跟踪

  4. 保存代码。

可选：自定义参数

您可以将自定义字段（例如 match_id）从您的网页传递到 Google Marketing Platform。

Google 跟踪代码管理器

若要针对 Floodlight 配置自定义字段，请将 x-dc- 附加到参数名称的前面：

  1. 在您的网络容器中，打开代码菜单。
  2. 修改 GA4 事件代码或创建新的事件代码。

  3. 在事件参数中，添加参数名称。为了指明参数会传递到 Floodlight，请在其名称前面附加 x-dc-。例如，如果您通常发送的是 match_id，请将其更改为 x-dc-match_id。

    在 GA4 网站代码中配置 dc- 参数。

  4. 保存代码。

gtag.js

若要针对 Floodlight 配置自定义字段，请将 x-dc- 附加到事件参数名称的前面：

  gtag('event', 'purchase', {
      'x-dc-match_id': [MATCH_ID],
      ...
  })

第 3 步：验证设置

开始使用服务器容器发送数据后，您可以按照以下步骤查看再营销是否正常运作：

  1. 打开您的网站。
  2. 在您的 Google 跟踪代码管理器服务器容器中，选择预览。Tag Assistant 将会启动并加载您的服务器容器。
  3. 代码标签页上会显示触发的所有代码。请务必检查您配置的代码是否成功触发。
  4. 控制台标签页上会显示数据传输到服务器容器期间发生的所有错误。检查是否存在错误并修正这些错误。

如需获取调试跟踪代码管理器容器方面的帮助，请参阅“预览和调试”帮助。

后续步骤

当您的 Floodlight 代码按预期运行后，您就可以移除网络容器中任何相同的 Floodlight 代码，以避免数据重复。