使用 Google 跟踪代码管理器向 Floodlight 代码传递值

在 Google 跟踪代码管理器中实现 Floodlight 代码时，您不妨将值从网站传递给代码，从而捕获关键营销参数，以便日后将其用于构建受众群体或针对特定的自定义指标生成报表。

dataLayer 是 Google 跟踪代码管理器中的 JavaScript 对象，它可提供用于将所需的值传递给宏的接口。稍后您可以使用这些宏来填充指定代码。本文具体介绍了如何使用 dataLayer 来与 Campaign Manager 360 进行通信，以及如何将所需的任意值传递给 Floodlight 代码。如需了解更深入的说明，请访问有关针对网络实施 Google 跟踪代码管理器的 Google Developers 页面。

以往，新创建的 Floodlight 代码会包含占位符，在调用代码时，Web 开发者会将其替换为所需的值。请参见以下代码段示例：

...
document.write('<iframe
    src="http://XXXXXXX.fls.doubleclick.net/activityi;src=XXXXXXXX;type=;cat=;u1=[item];u2=[quantity];u3=[price];u4=[postage];u5=[seller];ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
...

请务必将粗体元素（item、quantity、price、postage 和 seller）替换为您想要传递给 Floodlight 代码的实际值。通常，您可以使用内容管理系统来替换这些元素，或让开发团队将其编入代码。

要配置 Google 跟踪代码管理器，以便在调用代码时使用变量来插入值，请按以下步骤操作。执行这些步骤的前提是，您已将 Campaign Manager 360 帐号关联至相关的 Google 跟踪代码管理器帐号，而且您能够将代码发送到 Google 跟踪代码管理器并批准这些代码。在 Google 跟踪代码管理器中进行更改后，您便可执行常规的测试和发布流程。

配置

1. 在 Google 跟踪代码管理器中，为每个要传递的值创建宏。

   1. 为宏指定一个描述性的名称。例如，如果您要捕获所订购产品的名称，则可以调用宏“product_name”。

   2. 将宏的类型设置为数据层变量。

   3. 指明变量的名称，因为系统会在 dataLayer 调用中声明该名称。

   4. 至于版本号，请选择版本 2。

2. 在 Campaign Manager 360 中，创建 Floodlight 代码并启用 u 标准变量。

3. 将 Floodlight 代码推送到 Google 跟踪代码管理器并批准该代码。

4. 在 Google 跟踪代码管理器中修改该代码，并为不同的 u 变量分配适当的宏。例如，如果您想要捕获 u 变量“u1”内产品的名称，那么您就要：

   1. 转到自定义变量部分。

   2. 点击下拉菜单，然后选择“u1”。

   3. 点击文本框旁边的宏图标，然后选择在第 1 步中创建的“{{product_name}}”宏（请注意，大括号“{{}}”用于表明这是一个宏，而非“product_name”这段文字）。

   4. 为其他所有 u 变量和您希望捕获的宏重复执行上述步骤。

实现

您可以根据自己的情况，从以下几种不同的dataLayer实施方法中选择一种。

方法 1：您现有的确认页面包含全部所需值

有些网站使用内容管理系统 (CMS) 或其他类似方法来创建所需的网页。CMS可传递在上一页中设置的值或来自后端数据库的值。

在这些情况下，您可以执行以下操作：

1. 设置触发 Floodlight 代码的规则，以便在网址为确认页时触发 Floodlight 代码。

2. 在您网站上的 Google 跟踪代码管理器前面插入与如下示例类似的 dataLayer 定义，插入时请将示例中括号内的所有元素替换为您想要传递的值（这里假定您的所有宏的名称都附加了 _value）：

   <script>
    var dataLayer = [{“item_value”:item_value,
        “quantity_value”:quantity_value,
        “price_value”: price_value,
        “postage_value”: postage_value,
        “seller_value”: seller_value}];
</script>

   填充好的代码示例：

   <script>
    var dataLayer = [{“item_value”:”great shoes”,
        “quantity_value”: 1,
        “price_value”: 20,
        “postage_value”: 8,
        “seller_value”: “shoemaker”}];
</script>

Google 跟踪代码管理器触发 Floodlight 代码时，指定的宏会替换为您在 dataLayer 定义中所指定的值。

方法 2：您的结帐页和确认页的网址相同，或页面使用 AJAX（JavaScript 方法）

1. 创建用于在事件发生后触发代码的规则。例如，您可以创建一个名为“purchase_complete”的事件。

   规则名称：fire_floodlight_tag
   条件：{{event}} equals purchase_complete
   使用此规则的代码：无

2. 使用 JavaScript 来触发事件，并将需要的所有信息传递给 Floodlight 代码：

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:item_value,
    “quantity_value”: quantity_value,
    “price_value”: price_value,
    “postage_value”: postage_value,
    “seller_value”: seller_value});

   填充好的 JavaScript 调用示例：

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:”great shoes”,
    “quantity_value”: 1,
    “price_value”: 20,
    “postage_value”: 8,
    “seller_value”: “shoemaker”});

   请注意：所添加的事件值（上面示例中的粗体值）用于表示 Google 跟踪代码管理器用来触发 Floodlight 代码的事件。

方法 3：您的结帐页和确认页的网址相同，或页面使用 AJAX（自动事件跟踪方法）

自动事件跟踪使用事件监听器。事件监听器是一种位于网页上的特殊代码，用来监听用户事件；待事件发生后，它便会自动创建可用于触发其他代码的程序化事件。用户事件可能会包含以下操作：点击按钮或链接、提交表单或计时器达到定义的时间间隔。

以下示例说明了如何使用链接点击监听器来触发代码。在这种情况下，当用户通过点击列表选择产品或从下拉列表中选择产品时，事件即会发生，然后系统会打开相应网页，供用户下载 PDF 手册。此页面会包含指向手册的链接，而点击此链接的操作就是我们要跟踪并计为转化的操作。

转到 Google 跟踪代码管理器帐号，并执行以下操作：

1. 设置链接点击监听器。

   1. 选择新建代码。

   2. 输入一个描述性的名称，如“downloadLinkListener”（可以是PDF手册下载链接中所使用的名称）。

   3. 在“代码类型”下拉列表中，将鼠标悬停在“事件监听器”部分，然后从右侧的展开式下拉列表中选择链接点击监听器。

   4. 如果点击链接后，访问者进入了其他网页，请确保等待代码已选中。请勿更改“最长等待时间”字段，除非您有特殊原因，例如，您正在触发大量代码并想确保所有代码均已执行。

2. 设置宏，以便在用户点击链接时捕获网址。

   1. 选择新建宏。

   2. 输入一个描述性的名称，如“linkURL”。

   3. 从“宏类型”下拉列表中选择自动事件变量。

   4. 从“变量类型”下拉列表中选择元素网址（请注意，此选项仅适用于使用标准 HREF 格式的链接，不适用于 JavaScript 链接）。

3. 设置宏来捕获用户选择的产品。为了明确说明本示例，我们假定产品名称已在下拉菜单中列出，并且菜单的 HTML ID 代码为“productName”。如果查找此 ID 时需要帮助，请咨询您的 Web 开发者。

   1. 选择新建宏。

   2. 输入一个描述性的名称，如“selectedProduct”。

   3. 从“宏类型”下拉列表中选择 Dom 元素。

   4. 在“元素 ID”字段中，输入字段的 ID。在这种情况下，ID即为“productName”（不带引号）。

   5. 在“属性名称”字段中输入 value，因为在下拉列表中的项被选定后，我们需要检索 value 属性的内容。

4. 设置触发事件监听器代码的规则。

   1. 选择新建规则。

   2. 输入一个描述性的名称，如“downloadLinkClicked”。

   3. 在“条件”下，将第一个下拉列表设置为 {{event}}，将第二个下拉列表设置为 equals，然后将文本框设置为 gtm.linkClick。

   4. 点击加号 (+)。

   5. 将新的一行中的第一个下拉列表设置为您在第 2 步中创建的 {{linkURL}} 宏，将第二个下拉列表设置为 equals，然后将文本框设置为要下载的 PDF 的网址（例如 http://www.site.com/pdfs/brochure1.pdf）。

5. 设置一个 Floodlight 代码来捕获转化（如果您已创建了此代码，或已通过 Campaign Manager 360 分享了此代码，请跳至步骤 E）。

   1. 选择新建代码。

   2. 输入一个描述性的名称，如“brochureDownloadTag”。

   3. 根据需要选择合适的代码类型，如“Floodlight 计数器”。

   4. 设置包含标识代码值的“广告客户 ID”、“组代码”和“活动代码字符串”，然后根据需要配置任何其他标准代码值。

   5. 从“自定义变量”下的下拉列表中，选择您要用于进行跟踪的u1或其他任何自定义变量。

   6. 点击文本框旁边的宏按钮，然后选择您在第 3 步中创建的 {{selectedProduct}} 宏。

6. 根据需要进行测试和发布。