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 代码,以避免数据重复。