发送页面查看信标

现在,您将创建一个规则以触发 Analytics 信标,进而发送在扩展配置中设置的 Page Name 变量。

您已在本教程的添加数据元素、规则和库课程中创建“All Pages - Library Loaded”规则,该规则将在加载标记库时在每个页面上触发。 您​ 也可以 ​将此规则用于Analytics,但此设置要求先定义Analytics信标中使用的所有数据层属性,然后再定义标记嵌入代码。 为增加数据收集的灵活性,您将新建一个在 DOM 就绪时触发的“所有页面”规则,以触发 Analytics 信标。

发送页面查看信标

  1. 转到左侧导航中的​ 规则 ​部分,然后单击​ 添加规则

    Add Rule

  2. 将规则命名为 All Pages - DOM Ready

  3. 单击​ 事件>添加 ​以打开Event Configuration屏幕

    命名规则并添加事件

  4. 选择​ Event Type > DOM Ready(请注意,该规则的顺序为“50”)

  5. 单击​ 保留更改
    配置事件

  6. 在 Actions 下,单击 单击加号图标 以添加新操作

    单击加号图标以添加新操作

  7. 选择​ 扩展> Adobe Analytics

  8. 选择​ 操作类型>发送信标

  9. 将 Tracking 保留设置为 s.t()。请注意,如果您想要在点击事件规则中发起 s.tl() 调用,则也可以使用 Send Beacon 操作来实现这一点。

  10. 单击​ 保留更改 ​按钮

    单击加号图标以添加新操作

  11. 单击​ 保存到库并生成

    单击 Save to Library and Build

验证页面查看信标

现在,您已创建用于发送 Analytics 信标的规则,接下来应该能够在 Experience Cloud Debugger 中看到相应请求。

  1. 在 Chrome 浏览器中打开 Luma 网站

  2. 单击Debugger图标 打开Experience Cloud Debugger 以打开​ Adobe Experience Cloud Debugger

  3. 前面的课程中所述,确保Debugger将标记属性映射到​ 您的 ​开发环境

    Debugger中显示的标记开发环境

  4. 单击以打开 Analytics 选项卡

  5. 展开您的报表包名称以显示针对该报表包发出的所有请求

  6. 确认使用 Page Name 变量和值触发了相应请求

    验证页面点击

NOTE
如果未显示页面名称,请回溯本页面中的各个步骤,以确保未遗漏任何内容。

使用规则添加变量

配置 Analytics 扩展后,您便在扩展配置中填充了 pageName 变量。如果在加载标记嵌入代码之前页面上就有可用的值,那么也可以在扩展配置中填充其他全局变量,如eVar和prop。

要更加灵活地设置变量和事件,可以通过在规则中使用 Set Variables 操作来实现。使用规则,您可以在不同的条件下设置不同的 Analytics 变量和事件。例如,之前,您只能在产品详细信息页面上设置 prodView 事件,且只能在订单确认页面上设置 purchase 事件。此部分将向您讲授如何使用规则设置变量。

用例

产品详细信息页面 (PDP) 是零售网站上的重要数据收集点。一般情况下,您会希望 Analytics 记录发生的产品查看事件以及查看的产品。这有助于您了解哪些产品在客户中受欢迎。在媒体网站上,文章或视频页面也可以使用类似于您在此部分所使用的跟踪技术。加载产品详细信息页面时,您可能希望将该值放入“页面类型”eVar 中,并设置一些事件和产品 ID。这使我们能够在分析中了解以下信息:

  1. 产品详细信息页面的加载次数是多少
  2. 查看了哪些特定产品以及查看次数是多少
  3. 其他因素(促销活动、搜索等)如何影响 PDP 的用户加载量

为页面类型创建数据元素

首先,您需要确定哪些页面属于产品详细信息页面。您可以使用数据元素来执行该操作。

为页面类型创建数据元素

  1. 在左侧导航中单击​ 数据元素

  2. 单击​ 添加数据元素

    添加新数据元素

  3. 将数据元素命名为 Page Type

  4. 选择​ 数据元素类型> JavaScript变量

  5. 使用digitalData.page.category.type作为​ JavaScript变量名称

  6. 检查​ 清除文本 ​和​ 强制小写 ​选项

  7. 单击​ 保存到库

    为页面类型添加新数据元素

为产品 ID 创建数据元素

接下来,您将使用数据元素收集当前产品详细信息页面中的产品 ID

为产品 ID 创建数据元素

  1. 在左侧导航中单击​ 数据元素

  2. 单击​ 添加数据元素

    添加新数据元素

  3. 将数据元素命名为 Product Id

  4. 选择​ 数据元素类型> JavaScript变量

  5. 使用digitalData.product.0.productInfo.sku作为​ JavaScript变量名称

  6. 检查​ 清除文本 ​和​ 强制小写 ​选项

  7. 单击​ 保存到库

    为页面类型添加新数据元素

添加 Adobe Analytics Product String 扩展

如果您已经熟悉 Adobe Analytics 实施,则可能也熟悉产品变量。产品变量具有非常具体的语法,而且其使用方式会因上下文而略有不同。为帮助在标记中更轻松地填充产品变量,已在标记扩展市场中创建了三个其他扩展! 在此部分中,您将添加一个由 Adobe 咨询团队创建的扩展,以将其用在产品详细信息页面中。

添加 Adobe Analytics Product String 扩展

  1. 转到 Extensions > Catalog 页面

  2. 找到由Adobe Consulting服务创建的Adobe Analytics Product String扩展,然后单击​ 安装
    添加由 Adobe 咨询团队创建的 Adobe Analytics Product String 扩展

  3. 花些时间阅读相关说明

  4. 单击​ 保存到库

    保存该扩展并将其构建到您的库

为产品详细信息页面创建规则

现在,您将使用新的数据元素和扩展来构建产品详细信息页面规则。对于此功能,您将再创建一个在 DOM 就绪时触发的页面加载规则。但是,您将使用相应条件以便该规则只在产品详细信息页面上触发,并设置顺序以便该规则在用于发送信标的规则“之前”触发。__

构建产品详细信息页面规则

  1. 转到左侧导航中的​ 规则 ​部分,然后单击​ 添加规则

    Add Rule

  2. 将规则命名为 Product Details - DOM Ready - 40

  3. 单击​ 事件>添加 ​以打开Event Configuration屏幕

    命名规则并添加事件

  4. 选择​ 事件类型> DOM就绪

  5. 将​ Order ​设置为40,以便该规则在​ 包含Analytics > Send Beacon操作的规则之前 ​运行

  6. 单击​ 保留更改
    配置事件

  7. 在​ 条件 ​下,单击 单击加号图标 以打开Condition Configuration屏幕
    单击加号图标以添加新条件

    1. 选择​ 条件类型>值比较

    2. 使用数据元素选取器,在第一个字段中选择 Page Type

    3. 从比较运算符下拉列表中选择​ Contains

    4. 在下一个字段中键入 product-page(这是从 PDP 上的数据层提取的页面类型值的独特部分)

    5. 单击​ 保留更改

      定义条件

  8. 在 Actions 下,单击 单击加号图标 以添加新操作

    单击加号图标以添加新操作

  9. 选择​ 扩展> Adobe Analytics Product String

  10. 选择​ 操作类型>设置s.products

  11. 在​ Analytics电子商务事件 ​部分中,选择​ prodView

  12. 在​ 产品数据的数据层变量 ​节中,使用数据元素选取器选择Product Id数据元素

  13. 单击​ 保留更改

    使用 Adobe Analytics Product String 扩展添加产品字符串变量

  14. 在 Actions 下,单击 单击加号图标 以添加新操作

    为产品字符串添加其他操作

  15. 选择​ 扩展> Adobe Analytics

  16. 选择​ 操作类型>设置变量

  17. 选择​ eVar1 >设置为 ​并输入product detail page

  18. 设置​ event1,并将可选值留空

  19. 在“事件”下,单击​ 添加其他 ​按钮

  20. 设置​ prodView ​事件,并将可选值留空

  21. 单击​ 保留更改

    在 PDP 规则中设置 Analytics 变量

  22. 单击​ 保存到库并生成

    保存规则

验证产品详细信息页面数据

您刚刚创建了一个规则,该规则会在发送信标之前设置变量。现在,您应该能够在 Experience Cloud Debugger 中查看在点击中传出的新数据。

验证产品详细信息页面数据

  1. 在 Chrome 浏览器中打开 Luma 网站

  2. 导航到任意产品详细信息页面

  3. 单击Debugger图标 打开Experience Cloud Debugger 以打开​ Adobe Experience Cloud Debugger

  4. 单击 Analytics 选项卡

  5. 展开您的报表包

  6. 请注意当前位于 Debugger 中的产品详细信息变量,即:eVar1 已设置为“product detail page”,Events 变量已设置为“event1”和“prodView”,Products 变量已设置为您正在查看的产品的产品 ID,并且 Page Name 仍由 Analytics 扩展进行设置

    验证页面点击

发送跟踪链接信标

页面加载时,通常会触发由 s.t() 函数触发的页面加载信标。这会自动递增在 pageName 变量中列出的页面的 page view 量度。

但是,有时候您不希望递增网站上的页面查看次数,因为正在执行的操作“不足以”计为一次页面查看,或者可能根本不属于页面查看。在这种情况下,将使用 s.tl() 函数,该函数通常称为“跟踪链接”请求。虽然它称为跟踪链接请求,但不需要在单击链接时触发。该请求可以由标记规则生成器中可用的​ 任意 ​事件触发,包括您自己的自定义JavaScript。

在本教程中,您将使用最酷的 JavaScript 事件之一(Enters Viewport 事件)来触发 s.tl() 调用。

用例

对于此用例,您希望了解用户是否在Luma主页上向下滚动到足够远的位置,以查看我们页面的​ 特色产品 ​部分。 我们公司内部对于用户是否查看了该部分存在一些分歧,因此您希望使用 Analytics 查明真相。

在标记中创建规则

  1. 转到左侧导航中的​ 规则 ​部分,然后单击​ 添加规则
    Add Rule

  2. 将规则命名为 Homepage - Featured Products enters Viewport

  3. 单击​ 事件>添加 ​以打开Event Configuration屏幕

    添加精选产品规则

  4. 选择​ Event Type > Enters Viewport。 此时将显示一个字段,您需要在其中输入 CSS 选择器,该选择器将标识页面上应在进入浏览器视区时触发此规则的项目。

  5. 返回到Luma主页,然后向下滚动到精选产品部分。

  6. 右键单击“精选产品”标题与此部分所含项目之间的空白处,然后从右键单击菜单中选择Inspect。 这会将您引导至目标位置附近。

  7. 在目标位置附近,可能就在选定部分正下方,您需要查找包含 class="we-productgrid aem-GridColumn aem-GridColumn--default--12" 的 div。找到该元素。

  8. 右键单击此元素,然后选择​ 复制>复制选择器

    配置 Enters Viewport 事件

  9. 返回标记,并将此值从剪贴板粘贴到标记为Elements matching the CSS selector的字段中。

    1. 有一点要注意,如何标识 CSS 选择器将由您来决定。此方法存在一些缺陷,因为页面上的某些更改可能会破坏此选择器。在标记中使用任何CSS选择器时,请考虑这一点。
  10. 单击​ 保留更改
    配置 Enters Viewport 事件

  11. 在 Conditions 下,单击 单击加号图标 以添加新条件

  12. 选择​ 条件类型>值比较

  13. 使用数据元素选取器,在第一个字段中选择 Page Name

  14. 从比较运算符下拉列表中选择​ 等于

  15. 在下一个字段中键入 content:luma:us:en(这是从数据层提取的主页的页面名称 - 我们只希望此规则在主页上运行)

  16. 单击​ 保留更改

    配置主页条件

  17. 在 Actions 下,单击 单击加号图标 以添加新操作

  18. 选择​ 扩展> Adobe Analytics

  19. 选择​ 操作类型>设置变量

  20. eVar3 设置为 Home Page - Featured Products

  21. prop3 设置为 Home Page - Featured Products

  22. Events 变量设置为 event3

  23. 单击​ 保留更改

    配置 Enters Viewport 事件

  24. 在 Actions 下,单击 单击加号图标 以添加其他新操作

  25. 选择​ 扩展> Adobe Analytics

  26. 选择​ 操作类型>发送信标

  27. 选择​ s.tl() ​跟踪选项

  28. 在​ 链接名称 ​字段中,输入Scrolled down to Featured Products。 此值将放入 Analytics 的“自定义链接”报表中。

  29. 单击​ 保留更改

    配置特色产品信标

  30. 单击​ 保存到库并生成

    保存规则并构建

验证跟踪链接信标

现在,您将需要确保在向下滚动到我们网站主页的“精选产品”部分时会计入此点击。 第一次加载主页时,不应发起该请求,但在向下滚动直至 New Arrivals 部分可见后,该点击应触发我们的新值。

  1. 在 Chrome 浏览器中打开 Luma 网站,并确保您位于主页顶部。

  2. 单击​ 调试器图标 打开Experience Cloud Debugger 以打开Adobe Experience Cloud调试器

  3. 单击 Analytics 选项卡

  4. 展开您的报表包点击

  5. 请注意主页的常规页面查看点击中的页面名称等(但 eVar3 或 prop3 中没有任何内容)。

    Debugger 中显示的页面查看

  6. 保持Debugger处于打开状态,在您的网站上向下滚动,直至看到“精选产品”部分

  7. 再次查看 Debugger,此时应该出现另一次 Analytics 点击。此点击应具有与您设置的 s.tl() 点击相关联的参数,即:

    1. LinkType = "link_o"(这表示此点击是自定义链接点击,而不是页面查看点击)

    2. LinkName = "Scrolled down to Featured Products"

    3. prop3 = "Home Page - Featured Products"

    4. eVar3 = "Home Page - Featured Products"

    5. Events = "event3"

      Debugger 中显示的页面查看

添加插件

插件是一段 JavaScript 代码,您可以将该代码添加到实施中以执行未内置到产品中的特定功能。插件既可以由您自行构建,也可以由其他 Adobe 客户/合作伙伴或 Adobe 咨询团队构建。

要实施插件,基本上有三个步骤:

  1. 包含将引用插件的 doPlugins 函数
  2. 添加插件的主函数代码
  3. 包含用于调用函数、设置变量和执行其他操作的代码

使 Analytics 对象可全局访问

如果您将要添加 doPlugins 函数(如下所示)并使用插件,则需要选中用于使 Analytics“s”对象在 Analytics 实施中全局可用的复选框。

  1. 转到​ 扩展>已安装

  2. 在Adobe Analytics扩展中,单击​ 配置

    配置 Analytics

  3. 在​ 库管理 ​下,选中标记为Make tracker globally accessible的框。 正如您在帮助气泡中所看到的,选中该复选框将导致跟踪器在 window.s 下的范围设置为全局,如果您希望在客户 JavaScript 中引用它,则务必要这样做。
    使跟踪器可全局访问