使用Adobe Analytics收集页面数据

注意

Adobe Experience Platform Launch已更名为Adobe Experience Platform中的一套数据收集技术。因此，在整个产品文档中推出了几项术语更改。请参阅以下内容文档，以了解术语更改的综合参考。

了解如何使用使用AEM核心组件Adobe客户端数据层收集有关Adobe Experience Manager Sites中某个页面的数据。 Experience Platform中的标记和 Adobe Analytics扩展用于创建规则以将页面数据发送到Adobe Analytics。

您即将构建的内容

页面数据跟踪

在本教程中，您将根据Adobe客户端数据层中的事件触发标记规则。此外，为应触发规则的时间添加条件，然后发送 页面名称 和 页面模板 “AEM页面”到Adobe Analytics的值。

目标

在tag属性中创建一个事件驱动规则，以从数据层捕获更改
将页面数据层属性映射到标记属性中的数据元素
使用页面查看信标收集页面数据并将其发送到Adobe Analytics

前提条件

需要以下各项：

标记属性 在Experience Platform中
Adobe Analytics 测试/开发报表包ID和跟踪服务器。请参阅以下文档，了解创建报表包.
Experience Platform调试器浏览器扩展。从Chrome浏览器捕获了本教程中的屏幕截图。
（可选）带有的AEM Site Adobe客户端数据层已启用. 本教程使用public facing WKND 站点，但欢迎您使用自己的站点。

注意

需要有关集成标记属性和AEM站点的帮助吗？观看此视频系列.

为WKND站点切换标记环境

此 WKND 是面向公众的站点，构建于开源项目设计作为参考和教程适用于AEM实施。

您可以使用Experience Platform调试器执行以下操作，而不是设置AEM环境和安装WKND代码库切换实时 WKND站点到您的标记属性。但是，如果您自己的AEM站点已经具有 Adobe客户端数据层已启用.

登录Experience Platform和创建标记属性（如果您尚未这样做）。
确保初始标记JavaScript 已创建库并提升到标记环境.
从已将库发布到的标记环境中复制JavaScript嵌入代码。
在浏览器中，打开新选项卡并导航到 WKND站点
打开Experience PlatformDebugger浏览器扩展
导航到 Experience Platform标记 > 配置和下 插入的内嵌代码 将现有嵌入代码替换为您的从步骤3复制的嵌入代码。
启用 控制台日志记录 和锁定 “WKND”选项卡上的调试器。

验证WKND站点上的Adobe客户端数据层

此 WKND参考项目是使用AEM核心组件构建的，具有 Adobe客户端数据层已启用默认情况下。接下来，验证是否已启用Adobe客户端数据层。

导航到 WKND站点.
打开浏览器的开发人员工具并导航到 控制台. 运行以下命令：
```
adobeDataLayer.getState();
```
上述代码返回Adobe客户端数据层的当前状态。

展开响应并检查 page 登入。您应会看到类似以下的数据架构：

page-2eee4f8914:
    @type: "wknd/components/page"
    dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
    dc:title: "WKND Adventures and Travel"
    repo:modifyDate: "2020-08-31T21:02:21Z"
    repo:path: "/content/wknd/us/en.html"
    xdm:language: "en-US"
    xdm:tags: ["Attract"]
    xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"

要将页面数据发送到Adobe Analytics，让我们使用标准资产，例如 dc:title， xdm:language、和 xdm:template 数据层的ID。

欲了解更多信息，请查看页面架构从核心组件数据架构中。

注意

如果您没有看到 adobeDataLayer JavaScript对象？确保已启用Adobe客户端数据层在您的网站上。

创建Page Loaded规则

Adobe客户端数据层是事件驱动数据层。加载AEM Page数据层时，将触发 cmp:show 事件。创建在以下情况下触发的规则： cmp:show 事件从页面数据层触发。

导航到Experience Platform并进入与AEM站点集成的tag属性。
导航到规则部分，然后单击 创建新规则.
命名规则 页面已加载.
在事件子部分，单击添加以打开 事件配置 向导。
对象 事件类型 字段，选择 自定义代码.

单击 打开编辑器 在主面板中，输入以下代码片段：

var pageShownEventHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger the Tag Rule and pass event
      console.log("cmp:show event: " + evt.eventInfo.path);
      var event = {
         //include the path of the component that triggered the event
         path: evt.eventInfo.path,
         //get the state of the component that triggered the event
         component: window.adobeDataLayer.getState(evt.eventInfo.path)
      };

      //Trigger the Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag data elements
      // i.e `event.component['someKey']`
      trigger(event);
   }
}

//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
   dl.addEventListener("cmp:show", pageShownEventHandler);
});

上述代码片段通过以下方式添加事件侦听器推送函数到数据层中。时间 cmp:show 事件触发于 pageShownEventHandler 调用函数。在此函数中，添加了一些健全性检查和一个新的 event 使用最新的数据层的状态用于触发事件的组件。

最后 trigger(event) 调用函数。此 trigger() 函数是标记属性中的保留名称，它 触发器 规则。此 event 对象作为参数传递，该参数随后被标记属性中的另一个保留名称公开。标记属性中的数据元素现在可以使用代码段（如）引用各种属性 event.component['someKey'].

保存更改。
下一下操作点击添加以打开 操作配置 向导。
对象 操作类型 字段，选择 自定义代码.
单击 打开编辑器 在主面板中，输入以下代码片段：
```
console.log("Page Loaded ");
console.log("Page name: " + event.component['dc:title']);
console.log("Page type: " + event.component['@type']);
console.log("Page template: " + event.component['xdm:template']);
```
此 event 对象传递自 trigger() 在自定义事件中调用的方法。此处 component 是从数据层派生的当前页面 getState 在自定义事件中。
保存更改并运行生成标记属性中的代码，以将代码提升到环境在您的AEM网站上使用。

注意

使用 Adobe Experience Platform调试器将嵌入代码切换为开发环境。
导航到您的AEM站点，然后打开开发人员工具以查看控制台。刷新该页，您应该会看到控制台消息已被记录：

页面加载的控制台消息

创建数据元素

接下来，创建多个数据元素以从Adobe客户端数据层捕获不同的值。如上一个练习中所见，可以直接通过自定义代码访问数据层的属性。使用数据元素的优势在于它们可以在标记规则中重复使用。

数据元素映射到 @type， dc:title、和 xdm:template 属性。

组件资源类型

导航到Experience Platform并进入与AEM站点集成的tag属性。
导航到 数据元素 部分并单击 创建新数据元素.
对于名称字段中，输入 组件资源类型.
对于 数据元素类型 字段，选择 自定义代码.

单击 打开编辑器 按钮，并在自定义代码编辑器中输入以下内容：

if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}

保存更改。

注意

请记住 event 对象将变得可用，并根据触发该对象的规则标记属性中的。直到数据元素为 已引用 在规则中。因此，在规则内使用此数据元素是安全的，例如 页面已加载 在上一步中创建的规则但是在其他环境中使用是不安全的。

页面名称

单击 添加数据元素 按钮
对于名称字段，输入 页面名称.
对于 数据元素类型 字段，选择 自定义代码.

单击 打开编辑器 按钮，然后在自定义代码编辑器中输入以下内容：

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

保存更改。

页面模板

单击 添加数据元素 按钮
对于名称字段，输入 页面模板.
对于 数据元素类型 字段，选择 自定义代码.

单击 打开编辑器 按钮，然后在自定义代码编辑器中输入以下内容：

if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
    return event.component['xdm:template'];
}

保存更改。
规则中现在应包含三个数据元素：

添加Analytics扩展

接下来，将Analytics扩展添加到标记资产，以将数据发送到报表包。

导航到Experience Platform并进入与AEM站点集成的tag属性。
转到扩展 > 目录
找到 Adobe Analytics 扩展并单击安装
下 库管理 > 报表包，输入要用于每个标记环境的报表包id。

注意

在本教程中，您可以将一个报表包用于所有环境，但在现实工作中，您需要使用单独的报表包，如下图所示

小贴士

我们建议使用 “为我管理库”选项 作为Library Management设置，因为它使保留 AppMeasurement.js 库为最新。
选中方框以启用 使用Activity Map.
下常规 > 跟踪服务器，输入您的跟踪服务器，例如， tmd.sc.omtrdc.net. 如果您的网站支持，请输入SSL跟踪服务器 https://
单击保存以保存更改。

向Page Loaded规则添加条件

接下来，更新 页面已加载 规则以使用 组件资源类型 数据元素，以确保规则仅在 cmp:show 事件用于页面. 其他组件可以触发 cmp:show 事件，例如，当幻灯片发生更改时，轮盘组件会触发该事件。因此，请务必为此规则添加条件。

在标记属性UI中，导航到 页面已加载 之前创建的规则。
下条件点击添加以打开 条件配置 向导。
对象 完成情况类型 字段，选择 值比较 选项。
将表单字段中的第一个值设置为 %Component Resource Type%. 您可以使用数据元素图标以选择 组件资源类型 数据元素。将比较器保留设置为 Equals.
将第二个值设置为 wknd/components/page.

注意

可以在监听的自定义代码函数中添加此条件 cmp:show 之前在教程中创建的事件。但是，将其添加到UI中可让可能需要对规则进行更改的其他用户更加可见。此外，我们还可以使用数据元素！
保存更改。

设置Analytics变量并触发页面查看信标

目前 页面已加载 规则仅输出控制台语句。接下来，使用数据元素和Analytics扩展将Analytics变量设置为操作在 页面已加载 规则。我们还设置了额外的操作来触发 页面查看信标 并将收集的数据发送到Adobe Analytics。

在Page Loaded规则中，移除此 核心 — 自定义代码 操作（控制台语句）：
在操作子部分下，单击添加以添加新操作。
设置扩展键入到 Adobe Analytics 并设置 操作类型 到 设置变量
在主面板中，选择一个可用的 eVar 和设置为数据元素的值 页面模板. 使用数据元素图标以选择 页面模板 元素。
向下滚动，下 其他设置 设置 页面名称 到数据元素 页面名称：
保存更改。
接下来，在右边添加一个额外的“操作” Adobe Analytics — 设置变量 点按加图标：
设置扩展键入到 Adobe Analytics 并设置 操作类型 到 发送信标. 由于此操作被视为页面查看，因此请将默认跟踪设置为 s.t().
保存更改。此 页面已加载 规则现在应具有以下配置：
- 1. 聆听 cmp:show 事件。
- 2. 检查事件是否由页面触发。
- 3. 将Analytics变量设置为 页面名称 和 页面模板
- 4. 发送Analytics页面查看信标
保存所有更改并构建标记库，提升到适当的环境。

验证页面查看信标和Analytics调用

现在， 页面已加载 规则将发送Analytics信标，您应该能够使用Experience Platform调试器查看Analytics跟踪变量。

打开 WKND站点在浏览器中。
单击“调试器”图标以打开Experience PlatformDebugger。
确保Debugger将标记属性映射到您的开发环境，如前面和中所述 控制台日志记录 已选中。
打开Analytics菜单，并确认已将报表包设置为您的报表包。此外，还应填充页面名称：
向下滚动并展开 网络请求. 您应该能够找到 evar 为 页面模板：
返回浏览器并打开开发人员控制台。点击轮播页面顶部的。
在浏览器控制台中观察控制台语句：

这是因为轮播会触发 cmp:show 事件但是因为我们检查了 组件资源类型，则不会触发任何事件。

注意

如果您没有看到任何控制台日志，请确保 控制台日志记录 已检查 Experience Platform标记 在Experience PlatformDebugger中。
导航到文章页面，例如西澳大利亚. 观察页面名称和模板类型的变化。